/* ── site-components tokens.css ── */ /* site-components 토큰 — 부품 CSS는 색·그림자·모서리를 이 변수로만 쓴다(부품 안에 hex 없음). 기본값은 법률사무소 승전(네이비·라벤더). 다른 사이트는 이 파일을 고치지 말고 사이트 CSS에서 :root { --sc-brand: …; } 처럼 필요한 변수만 덮어쓴다. 글자 대비: --sc-ink·--sc-muted·--sc-brand·--sc-brand-2·--sc-accent-text는 --sc-surface·--sc-tint·--sc-tint-2 위에서 4.5:1 이상이 되게 고른다. */ :root { /* 주색 — 주 버튼·현재 메뉴·채워지는 면 */ --sc-brand: #001555; --sc-brand-strong: #000c33; /* 짙은 바탕, 그라디언트 끝 */ --sc-brand-hover: #000f40; /* 채운 버튼 hover */ --sc-brand-hi: #0a2470; /* B3 그라디언트 밝은 쪽 */ --sc-brand-2: #233f8e; /* 보조 남색 — hover 글자, 아이콘 선, 밑줄 */ /* 강조색 — 형광펜, 짙은 바탕 위 버튼, 라벨 */ --sc-accent: #a9a6ea; --sc-accent-hi: #c3c1f2; /* B3 짙은 바탕판 그라디언트 밝은 쪽 */ --sc-accent-line: #9c98dc; /* 열린 FAQ 테두리, 현재 메뉴 왼쪽 띠 */ --sc-accent-text: #5b55b8; /* 흰·틴트 바탕 위 강조 글자, 진행 줄, 초점 테두리 */ /* 바탕 */ --sc-surface: #ffffff; --sc-surface-2: #f6f7fb; /* D3 타일, 모바일 서브메뉴 바탕 */ --sc-hover: #f4f5fa; /* 목록 hover 바탕 */ --sc-tint: #eceff6; /* 메인 색의 아주 연한 틴트 */ --sc-tint-2: #dddcf2; /* 강조색 틴트 */ --sc-glass: rgba(255, 255, 255, .72); /* N6 유리 바탕 */ --sc-scrim: rgba(0, 12, 51, .5); /* 모바일 메뉴 뒤 막 */ /* 글자·선 */ --sc-ink: #1f232b; --sc-muted: #4f5561; --sc-on-dark: #ffffff; --sc-on-dark-muted: #d6dbea; --sc-line-soft: #e3e6ef; /* 헤더 아래 선, 패널 테두리 */ --sc-line: #dcdfe8; --sc-line-strong: #c9cfe2; /* 버튼 외곽선, 단계 원 테두리 */ /* 그림자 — 브랜드 색 기운. 숫자 세 개(r,g,b)만 바꾸면 모든 그림자가 따라간다 */ --sc-shadow-rgb: 0, 21, 85; --sc-shadow-deep-rgb: 0, 12, 51; --sc-shadow-sm: 0 8px 20px rgba(var(--sc-shadow-rgb), .08); --sc-shadow-md: 0 8px 18px rgba(var(--sc-shadow-rgb), .2); --sc-shadow-lg: 0 2px 4px rgba(var(--sc-shadow-deep-rgb), .05), 0 24px 48px rgba(var(--sc-shadow-rgb), .16); --sc-shadow-on-dark: 0 6px 16px rgba(0, 0, 0, .35); --sc-shadow-on-dark-hover: 0 12px 28px rgba(0, 0, 0, .45); /* 모양·움직임·크기 */ --sc-radius-sm: 10px; --sc-radius-md: 14px; --sc-radius-lg: 18px; --sc-ease: cubic-bezier(.2, .7, .2, 1); --sc-header-h: 72px; --sc-container: 1280px; --sc-gutter: clamp(20px, 5vw, 64px); --sc-focus: var(--sc-accent-text); /* ── 2차 부품(2026-10-20)이 쓰는 값. 사이트 테마를 바꿀 때 아래 *-rgb 세 숫자도 같은 색으로 바꾼다 ── */ --sc-accent-soft: #ecebf8; /* 연한 강조 틴트 — T6 알약, SP5 타일, K3 바탕 끝, P4 꼬리표, A1 직함, F2 아이콘 칸 */ --sc-accent-wash: #f4f3fc; /* 아주 연한 강조 — K2 hover, K3 바탕 가운데, A1 바탕 끝 */ --sc-accent-rgb: 169, 166, 234; /* --sc-accent와 같은 색(알파용: 배지 테두리, 푸터 선). 테마마다 꼭 같이 바꾼다 */ --sc-on-dark-rgb: 255, 255, 255; /* 짙은 바탕 위 흰색 알파 */ --sc-surface-rgb: 255, 255, 255; /* 퀵바 QB2 유리 */ --sc-overlay-rgb: var(--sc-shadow-deep-rgb); /* 사진 위 막(H2·H7·L3·C1) */ --sc-card-shadow: 0 1px 2px rgba(var(--sc-shadow-rgb), .05), 0 6px 16px rgba(var(--sc-shadow-rgb), .06); --sc-card-shadow-hover: 0 2px 4px rgba(var(--sc-shadow-rgb), .05), 0 14px 30px rgba(var(--sc-shadow-rgb), .11); --sc-card-shadow-lift: 0 4px 8px rgba(var(--sc-shadow-rgb), .07), 0 22px 46px rgba(var(--sc-shadow-rgb), .16); } /* ── site-components icons/icon-styles.css ── */ /* ── 아이콘 칸 스타일 I1~I4 (site-components) ───────────────────────────── 필요: tokens.css. 아이콘 SVG는 icons.mjs / icons.js의 svg()로 넣는다. 마크업: {svg} I3의 hover·focus 채움은 칸을 감싼 a·button에 반응한다(칸 자체는 초점을 받지 않음). */ /* 모든 부품이 공유하는 아이콘 기본값 — 아이콘을 쓰는 페이지엔 이 파일을 함께 붙인다 */ .sc-ic { width: 24px; height: 24px; flex: none; display: block; } .sc-ic .sc-tn { stroke: none; fill: var(--sc-tone, none); fill-opacity: var(--sc-tone-o, 1); } .sc-icbox { display: grid; place-items: center; flex: none; color: var(--sc-brand); } /* I1 선 아이콘 단독 — 바탕 칸 없이 */ .sc-icbox--i1 .sc-ic { width: 36px; height: 36px; } /* I2 연한 틴트 둥근 사각 칸 */ .sc-icbox--i2 { width: 60px; height: 60px; border-radius: 16px; background: var(--sc-tint); color: var(--sc-brand-2); } .sc-icbox--i2 .sc-ic { width: 30px; height: 30px; } /* I3 원형 칸 — 감싼 링크에 올리거나 Tab으로 오면 주색으로 차오름 */ .sc-icbox--i3 { width: 64px; height: 64px; border-radius: 50%; background: var(--sc-tint); color: var(--sc-brand-2); box-shadow: inset 0 0 0 1px var(--sc-line); transition: background-color .3s, color .3s, box-shadow .3s, transform .3s var(--sc-ease); } .sc-icbox--i3 .sc-ic { width: 30px; height: 30px; } :is(a, button):is(:hover, :focus-visible) .sc-icbox--i3 { background: var(--sc-brand); color: var(--sc-on-dark); box-shadow: inset 0 0 0 1px var(--sc-brand), 0 8px 18px rgba(var(--sc-shadow-rgb), .22); transform: translateY(-2px); } /* 초점 테두리는 링크 전체가 아니라 원에 그린다 */ .sc-iclink:has(.sc-icbox--i3):focus-visible { outline: none; } .sc-iclink:focus-visible .sc-icbox--i3 { outline: 2px solid var(--sc-focus); outline-offset: 3px; } /* I4 두 톤 — 선은 주색, 주된 면(sc-tn)만 강조색으로 옅게 */ .sc-icbox--i4 { --sc-tone: var(--sc-accent); --sc-tone-o: .8; } .sc-icbox--i4 .sc-ic { width: 40px; height: 40px; } /* 선택: 아이콘 + 이름 묶음(링크·칸)과 격자 목록 */ .sc-icgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 12px; margin: 0; padding: 0; list-style: none; } .sc-icgrid > li, .sc-iclink { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .sc-iclink { padding: 4px; border-radius: var(--sc-radius-md); color: inherit; text-decoration: none; } .sc-icname { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--sc-ink); transition: color .3s; } .sc-iclink:is(:hover, :focus-visible) .sc-icname { color: var(--sc-brand); } @media (max-width: 899px) { .sc-icgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 560px) { .sc-icgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; } .sc-icname { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .sc-icbox--i3, .sc-icname { transition: none; } :is(a, button):is(:hover, :focus-visible) .sc-icbox--i3 { transform: none; } } /* ── site-components nav/nav.css ── */ /* ── 헤더 + 메뉴 hover N1·N2·N3·N6 (site-components) ───────────────────── 필요: tokens.css, icons/icon-styles.css(아이콘 기본값). N3·N6은 nav.js. 헤더 한 줄의 칸 높이는 --sc-header-h로 고정 — hover·스크롤 효과는 transform·opacity·색만 바꾼다. 변형 클래스는 헤더(.sc-hd)에 붙인다: hover 하나(sc-nav--n1|n2|n3) + 선택으로 sc-nav--n6(스크롤 유리). 900px 미만에서는 데스크톱 메뉴·전화를 감춘다 — 모바일은 dropdown/mobile-menu(D5)가 맡는다. */ .sc-hd { position: relative; z-index: 50; } .sc-hd--sticky, .sc-nav--n6 { position: -webkit-sticky; position: sticky; top: 0; } /* 바탕은 별도 층 — N6에서 이 층만 오므라든다(헤더 칸 높이는 그대로) */ .sc-hd__bg { position: absolute; inset: 0; z-index: -1; background: var(--sc-surface); border-bottom: 1px solid var(--sc-line-soft); transform-origin: 50% 0; transition: transform .32s var(--sc-ease), background-color .32s, box-shadow .32s; } .sc-hd__in { position: relative; /* 메가 드롭다운·N3 알약의 기준 */ display: flex; align-items: center; gap: 20px; height: var(--sc-header-h); max-width: var(--sc-container); margin: 0 auto; padding-inline: var(--sc-gutter); } .sc-hd__logo { flex: none; display: flex; text-decoration: none; align-items: center; min-height: 44px; border-radius: 6px; transform-origin: 0 50%; transition: transform .32s var(--sc-ease); } .sc-hd__logo img { width: 150px; height: auto; } .sc-hd__nav { margin-left: auto; } /* position: static — 드롭다운 패널이 .sc-hd__in 기준으로 놓이게 */ .sc-hd__menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } /* 메뉴 한 칸 */ .sc-m { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 13px; border-radius: var(--sc-radius-sm); font-size: 15.5px; font-weight: 600; color: var(--sc-ink); text-decoration: none; white-space: nowrap; transition: color .25s; } .sc-m[aria-current="page"] { color: var(--sc-brand); font-weight: 700; } .sc-m .sc-ic { width: 16px; height: 16px; opacity: .7; } .sc-m .sc-m__ext { width: 14px; height: 14px; opacity: .6; } /* 헤더 전화(알약, 폭 고정 — 글자가 바뀌어도 크기 그대로) */ .sc-hd__tel { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 170px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--sc-brand); color: var(--sc-on-dark); font-weight: 700; font-size: 15px; text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .25s, transform .25s, box-shadow .25s; } .sc-hd__tel .sc-ic { width: 18px; height: 18px; } .sc-hd__tel:hover, .sc-hd__tel:focus-visible { background: var(--sc-brand-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--sc-shadow-rgb), .24); } /* N1 — 밑줄이 왼쪽에서 그어지고 오른쪽으로 빠짐 */ .sc-nav--n1 .sc-m::after, .sc-nav--n2 .sc-m::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--sc-brand-2); transform: scaleX(0); transition: transform .3s var(--sc-ease); } .sc-nav--n1 .sc-m::after { transform-origin: right; } .sc-nav--n1 .sc-m:hover::after, .sc-nav--n1 .sc-m:focus-visible::after { transform: scaleX(1); transform-origin: left; } .sc-nav--n1 .sc-m[aria-current="page"]::after { transform: scaleX(1); background: var(--sc-brand); } .sc-nav--n1 .sc-m:hover { color: var(--sc-brand); } /* N2 — 가운데에서 양옆으로 퍼지는 밑줄 + 글자색 */ .sc-nav--n2 .sc-m::after { transform-origin: center; } .sc-nav--n2 .sc-m:hover, .sc-nav--n2 .sc-m:focus-visible { color: var(--sc-brand-2); } .sc-nav--n2 .sc-m:hover::after, .sc-nav--n2 .sc-m:focus-visible::after, .sc-nav--n2 .sc-m[aria-current="page"]::after { transform: scaleX(1); } /* N3 — 알약 바탕이 메뉴 사이를 미끄러짐. 칸 폭을 같게 해 알약 크기가 변하지 않는다(--sc-n3-w) */ .sc-hd__pill { display: none; } .sc-nav--n3 .sc-hd__pill { display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; width: var(--sc-n3-w, 134px); height: 44px; border-radius: 999px; background: var(--sc-tint); box-shadow: inset 0 0 0 1px var(--sc-line); opacity: 0; transition: transform .32s var(--sc-ease), opacity .25s; } .sc-nav--n3 .sc-hd__pill.is-on { opacity: 1; } .sc-nav--n3 .sc-hd__pill.no-anim { transition: none; } .sc-nav--n3 .sc-hd__menu { gap: 0; } .sc-nav--n3 .sc-hd__menu > li { width: var(--sc-n3-w, 134px); } .sc-nav--n3 .sc-m { position: relative; z-index: 1; width: 100%; justify-content: center; padding: 0 6px; } .sc-nav--n3 .sc-m:hover, .sc-nav--n3 .sc-m:focus-visible, .sc-nav--n3 .sc-m[aria-current="page"] { color: var(--sc-brand); } /* N6 — 내리면 바탕이 유리 알약으로 오므라들고 로고가 조금 작아짐(nav.js가 .is-scrolled) */ .sc-nav--n6.is-scrolled .sc-hd__bg { background: var(--sc-glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: transparent; border-radius: var(--sc-radius-lg); transform: translateY(6px) scale(.975, .84); box-shadow: 0 1px 2px rgba(var(--sc-shadow-deep-rgb), .06), 0 10px 30px rgba(var(--sc-shadow-rgb), .14); } .sc-nav--n6.is-scrolled .sc-hd__logo { transform: scale(.88); } /* 폭이 좁아지면: 전화 먼저 감추고, 900 미만은 모바일 메뉴로 */ @media (max-width: 1099px) { .sc-hd__tel { display: none; } } @media (max-width: 899px) { .sc-hd__nav { display: none; } .sc-hd__in { gap: 8px; } .sc-hd__logo img { width: 124px; } } @media (prefers-reduced-motion: reduce) { .sc-hd__bg, .sc-hd__logo, .sc-m, .sc-m::after, .sc-hd__tel, .sc-hd__pill { transition: none !important; } } /* N3 + 드롭다운 트리거(dropdown.css)를 함께 쓸 때: 트리거도 같은 폭 칸으로 */ .sc-nav--n3 .sc-dd__btn { position: relative; z-index: 1; width: 100%; justify-content: center; padding: 0 6px; } .sc-nav--n3 .sc-dd__btn:hover, .sc-nav--n3 .sc-dd.is-open .sc-dd__btn { background: transparent; } /* 화면에는 숨기고 읽기 프로그램에는 읽히는 글자("(새 창)" 등) — 사이트에 같은 역할의 클래스가 있으면 그것을 써도 된다 */ .sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── site-components dropdown/dropdown.css ── */ /* ── 데스크톱 드롭다운 D3(아이콘 격자)·D4(목록 + 미리보기) (site-components) ── 필요: tokens.css, icons/icon-styles.css, nav/nav.css(헤더 .sc-hd__in이 패널 기준), dropdown.js. 패널은 본문 위에 떠 있다(absolute) — 열려도 아래 내용이 1px도 밀리지 않는다. 마크업:
  • …
    • JS가 없으면 마우스 올림·초점 들어옴(:focus-within)으로 열린다. */ .sc-dd { position: static; } /* 메가 패널이 .sc-hd__in 기준으로 놓이게 */ .sc-dd__btn { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 13px; border: 0; border-radius: var(--sc-radius-sm); background: transparent; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--sc-ink); cursor: pointer; white-space: nowrap; transition: color .25s, background-color .25s; } .sc-dd__btn:hover, .sc-dd.is-open .sc-dd__btn { color: var(--sc-brand-2); background: var(--sc-tint); } .sc-dd__btn[aria-current="page"] { color: var(--sc-brand); font-weight: 700; } .sc-dd__chev { width: 16px; height: 16px; transition: transform .3s var(--sc-ease); } .sc-dd.is-open .sc-dd__chev { transform: rotate(180deg); } .sc-dd__panel { position: absolute; top: 100%; z-index: 20; text-align: left; background: var(--sc-surface); border: 1px solid var(--sc-line-soft); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-lg); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--sc-ease), transform .25s var(--sc-ease), visibility 0s linear .25s; } .sc-dd.is-open .sc-dd__panel, html:not(.sc-js) .sc-dd:is(:hover, :focus-within) .sc-dd__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } /* 트리거와 패널 사이 틈을 마우스가 건널 때 닫히지 않게 */ .sc-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .sc-dd__panel a { color: var(--sc-ink); text-decoration: none; } /* D3 — 아이콘 큰 타일 격자(가로 4칸), 헤더 가운데 */ .sc-dd--d3 .sc-dd__panel { left: 50%; width: 680px; margin-left: -340px; padding: 16px; } .sc-dd3__grid { display: grid; grid-template-columns: repeat(var(--sc-d3-cols, 4), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .sc-dd3__grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 108px; padding: 14px 8px; border-radius: var(--sc-radius-md); background: var(--sc-surface-2); text-align: center; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--sc-brand); transition: background-color .25s, color .25s, transform .25s var(--sc-ease); } .sc-dd3__grid .sc-ic { width: 32px; height: 32px; color: var(--sc-brand-2); transition: transform .25s var(--sc-ease); } .sc-dd3__grid a:hover, .sc-dd3__grid a:focus-visible { background: var(--sc-tint-2); transform: translateY(-2px); } .sc-dd3__grid a:hover .sc-ic, .sc-dd3__grid a:focus-visible .sc-ic { transform: scale(1.08); } /* D4 — 왼쪽 묶음 목록 + 오른쪽 미리보기(크기 고정, 겹쳐 둔 카드 중 하나만 보임) */ .sc-dd--d4 .sc-dd__panel { left: max(8px, calc(var(--sc-gutter) - 8px)); right: max(8px, calc(var(--sc-gutter) - 8px)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; padding: 20px; } .sc-dd4__list { display: grid; grid-template-columns: repeat(var(--sc-d4-cols, 3), minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: auto auto; column-gap: 10px; align-content: start; } .sc-dd4__gh { margin: 0 0 6px; padding: 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--sc-accent-text); } .sc-dd4__list ul { margin: 0; padding: 0; list-style: none; } .sc-dd4__list a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: var(--sc-radius-sm); font-size: 14.5px; font-weight: 600; transition: background-color .25s, color .25s; } .sc-dd4__list .sc-ic { width: 20px; height: 20px; color: var(--sc-brand-2); } .sc-dd4__list a:hover, .sc-dd4__list a:focus-visible, .sc-dd4__list a.is-on { background: var(--sc-tint); color: var(--sc-brand); } .sc-dd4__pv { position: relative; display: grid; border-radius: var(--sc-radius-md); background: var(--sc-tint); overflow: hidden; } .sc-dd4__card { grid-area: 1 / 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s var(--sc-ease), visibility 0s .25s; } .sc-dd4__card.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .sc-dd4__card img, .sc-dd4__media { width: 150px; height: 150px; border-radius: 12px; object-fit: cover; } .sc-dd4__media { display: grid; place-items: center; background: var(--sc-tint-2); color: var(--sc-brand); } .sc-dd4__media .sc-ic { width: 56px; height: 56px; --sc-tone: var(--sc-accent); --sc-tone-o: .8; } .sc-dd4__k { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: var(--sc-accent-text); } .sc-dd4__t { margin: 0 0 6px; font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--sc-brand); } .sc-dd4__d { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sc-muted); } @media (prefers-reduced-motion: reduce) { .sc-dd__btn, .sc-dd__chev, .sc-dd__panel, .sc-dd3__grid a, .sc-dd3__grid .sc-ic, .sc-dd4__list a, .sc-dd4__card { transition: none !important; } .sc-dd3__grid a:hover, .sc-dd3__grid a:focus-visible { transform: none; } } /* ── site-components dropdown/mobile-menu.css ── */ /* ── D5 모바일 덧씌우기 메뉴 + 아코디언 서브메뉴 (site-components) ───────── 필요: tokens.css, icons/icon-styles.css, nav/nav.css, mobile-menu.js(없어도 열리고 닫힘). 규칙(static/CLAUDE.md 14번, wordpress-magazine.md 화면 세부 4): - 메뉴·막은 fixed로 본문 위에 덧씌우기만 한다. html·body에 overflow·position 잠금을 걸지 않는다. - 숨은 체크박스는 position: fixed(스크롤로 옮길 수 없어 포커스 때 페이지를 굴리지 않음). - 뒤 스크롤은 막의 overscroll-behavior: contain + 1px 넘치는 스크롤 상자, JS의 wheel·touchmove·방향키 차단. - 사이트는 html { scroll-padding-top }을 쓰지 말고 [id] { scroll-margin-top: … }으로 둔다. - 헤더(.sc-hd)에 transform·filter·backdrop-filter를 걸지 않는다(fixed 메뉴의 기준이 바뀜). N6 유리는 .sc-hd__bg 층에만 건다. 마크업 순서: .sc-hd 안에 [체크박스] → .sc-hd__bg → .sc-hd__in(…버거 label) → 막 label → nav.sc-mm (~ 형제 선택자로 연다) */ .sc-mm-toggle { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .sc-mm-burger { position: relative; display: none; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; border-radius: 12px; color: var(--sc-brand); cursor: pointer; transition: background-color .25s; -webkit-tap-highlight-color: transparent; } .sc-mm-burger:hover { background: var(--sc-tint); } .sc-mm-toggle:focus-visible ~ .sc-hd__in .sc-mm-burger { background: var(--sc-tint); outline: 2px solid var(--sc-focus); outline-offset: 2px; } .sc-mm-burger .sc-ic { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--sc-ease); } .sc-mm-burger__close { opacity: 0; transform: rotate(-90deg); } .sc-mm-toggle:checked ~ .sc-hd__in .sc-mm-burger__open { opacity: 0; transform: rotate(90deg); } .sc-mm-toggle:checked ~ .sc-hd__in .sc-mm-burger__close { opacity: 1; transform: none; } /* 어두운 막 — 1px 넘치는 스크롤 상자라 손가락으로 밀어도 뒤 페이지로 스크롤이 넘어가지 않는다 */ .sc-mm__scrim { position: fixed; left: 0; right: 0; top: var(--sc-header-h); bottom: 0; z-index: 3; background: var(--sc-scrim); opacity: 0; visibility: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: none; scrollbar-width: none; transition: opacity .3s, visibility 0s .3s; -webkit-tap-highlight-color: transparent; } .sc-mm__scrim::-webkit-scrollbar { display: none; } .sc-mm__scrim::before { content: ""; display: block; height: calc(100% + 1px); } /* 메뉴 판 — 오른쪽에서 들어온다(transform) */ .sc-mm { position: fixed; top: var(--sc-header-h); right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; width: 86%; max-width: 420px; background: var(--sc-surface); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(100%); transition: transform .32s var(--sc-ease), visibility 0s .32s; } .sc-mm-toggle:checked ~ .sc-mm__scrim { opacity: 1; visibility: visible; transition-delay: 0s; } .sc-mm-toggle:checked ~ .sc-mm { visibility: visible; transform: none; transition-delay: 0s; } .sc-mm__list { margin: 0; padding: 8px 0; list-style: none; } .sc-mm__list > li { border-bottom: 1px solid var(--sc-line-soft); } .sc-mm__list > li > a, .sc-mm__acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 54px; padding: 0 20px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 16.5px; font-weight: 700; color: var(--sc-ink); text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s; } .sc-mm__list > li > a .sc-ic { width: 14px; height: 14px; margin-left: auto; opacity: .6; } .sc-mm__list > li > a:hover, .sc-mm__acc-btn:hover, .sc-mm__list > li > a:focus-visible, .sc-mm__acc-btn:focus-visible { background: var(--sc-hover); color: var(--sc-brand-2); } .sc-mm__list > li > a[aria-current="page"] { color: var(--sc-brand); box-shadow: inset 3px 0 0 var(--sc-accent-line); } .sc-mm__acc-btn[aria-expanded="true"] { color: var(--sc-brand-2); } .sc-mm__chev { width: 16px; height: 16px; transition: transform .3s var(--sc-ease); } .sc-mm__acc-btn[aria-expanded="true"] .sc-mm__chev { transform: rotate(180deg); } /* 아코디언 — grid-template-rows 0fr → 1fr. JS가 없으면 펼친 채로 둔다(링크가 숨지 않게) */ .sc-mm__sub { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--sc-ease); } .sc-mm__sub-in { min-height: 0; overflow: hidden; background: var(--sc-surface-2); } .sc-js .sc-mm__sub { grid-template-rows: 0fr; } .sc-js .sc-mm__sub-in { visibility: hidden; transition: visibility 0s .3s; } .sc-js .sc-mm__acc.is-open .sc-mm__sub { grid-template-rows: 1fr; } .sc-js .sc-mm__acc.is-open .sc-mm__sub-in { visibility: visible; transition-delay: 0s; } .sc-mm__gh { margin: 0; padding: 14px 20px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--sc-accent-text); } .sc-mm__sub ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0 8px 8px; list-style: none; } .sc-mm__sub a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: var(--sc-radius-sm); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--sc-ink); text-decoration: none; transition: background-color .25s; } .sc-mm__sub .sc-ic { width: 20px; height: 20px; color: var(--sc-brand-2); } .sc-mm__sub a:hover, .sc-mm__sub a:focus-visible { background: var(--sc-surface); } /* 아래 전화 단추 */ .sc-mm__call { display: grid; gap: 8px; margin-top: auto; padding: 16px 20px 20px; } .sc-mm__call a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; background: var(--sc-brand); color: var(--sc-on-dark); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s; } .sc-mm__call a .sc-ic { width: 18px; height: 18px; } .sc-mm__call a.sc-mm__call--ghost { background: var(--sc-surface); color: var(--sc-brand); box-shadow: inset 0 0 0 1.5px var(--sc-brand); } .sc-mm__call a:hover, .sc-mm__call a:focus-visible { background: var(--sc-brand-hover); color: var(--sc-on-dark); } /* 900 이상에서는 모바일 메뉴 전체를 빼서 Tab이 들르지 않게 */ @media (min-width: 900px) { .sc-mm-toggle, .sc-mm-burger, .sc-mm__scrim, .sc-mm { display: none; } } @media (max-width: 899px) { .sc-mm-burger { display: grid; } } @media (prefers-reduced-motion: reduce) { .sc-mm-burger .sc-ic, .sc-mm__scrim, .sc-mm, .sc-mm__sub, .sc-mm__sub-in, .sc-mm__chev { transition: none !important; } } /* ── site-components topbar/topbar.css ── */ /* ── 헤더 위 띠 TB1·TB2 (site-components) ───────────────────────────────── 필요: tokens.css, icons/icon-styles.css. JS는 D5 모바일 메뉴와 같이 쓸 때만 topbar.js(메뉴 판 위치 보정). 원본: 2026-10-20 승전 예시 카탈로그 topbar.html #tb1·#tb2. 겉모습·크기 그대로, 색만 변수로. - 띠는 문서 흐름 안에 있고 스크롤하면 함께 올라가 사라진다. 헤더(.sc-hd--sticky)만 붙는다. - 높이 고정(--sc-tb-h). 글이 길면 말줄임(…)으로 끝나 띠 높이가 늘지 않는다. - 닫기 버튼 없음(닫으면 아래 전체가 한 번에 올라가는 흔들림 — layout-stability.md). - 899px 이하 문구는 .sc-tb__dk(데스크톱) / .sc-tb__mb(모바일) 둘 중 하나만 보인다(폭 기준 → 흔들림 아님). - 링크는 보이는 높이가 띠 높이(40·44px)여도 누르는 영역은 ::before로 위아래 44px. */ .sc-tb { position: relative; height: var(--sc-tb-h, 44px); font-size: 15px; line-height: 1.3; } .sc-tb__in { display: flex; align-items: center; gap: 16px; height: 100%; max-width: var(--sc-container); margin: 0 auto; padding-inline: var(--sc-gutter); } .sc-tb p { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; } .sc-tb ul { margin: 0; padding: 0; list-style: none; } .sc-tb .sc-ic { width: 16px; height: 16px; } .sc-tb__ell { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sc-tb__tnum { font-variant-numeric: tabular-nums; } .sc-tb__mb { display: none; } /* 띠 링크 — 밑줄은 hover·초점 때 색만 생긴다. 누르는 영역 44px(옆으로는 넓히지 않아 이웃과 안 겹침) */ .sc-tb__a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 100%; min-width: 44px; white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s, opacity .2s; } .sc-tb__a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } .sc-tb__a:hover, .sc-tb__a:focus-visible { text-decoration-color: currentColor; } .sc-tb .sc-tb__ext { width: 13px; height: 13px; margin-left: 3px; opacity: .75; } .sc-tb__arr { transition: transform .25s var(--sc-ease); } .sc-tb__a:hover .sc-tb__arr, .sc-tb__a:focus-visible .sc-tb__arr { transform: translateX(3px); } /* ================= TB1 짙은 띠: 왼쪽 전화 굵게 + 시간·위치 / 오른쪽 링크 묶음 ================= */ .sc-tb1 { --sc-tb-h: 44px; background: var(--sc-brand-strong); color: var(--sc-on-dark); } .sc-tb1 .sc-tb__in { justify-content: space-between; gap: 24px; } .sc-tb1 :focus-visible { outline-color: var(--sc-accent); } .sc-tb1__l { display: flex; align-items: center; gap: 18px; min-width: 0; } .sc-tb1__tel { flex: none; gap: 8px; } .sc-tb1__k { font-size: 13px; font-weight: 600; color: var(--sc-accent); } .sc-tb1__tel b { font-size: 17px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .sc-tb1__h { font-size: 15px; color: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .85); } .sc-tb1__h .sc-ic { opacity: .85; } .sc-tb1__r { display: flex; align-items: center; flex: none; } .sc-tb1__r li { display: flex; align-items: center; height: 44px; } .sc-tb1__r li + li::before { content: ""; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .45); } .sc-tb1__r .sc-tb__a { font-size: 15px; font-weight: 500; color: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .85); } .sc-tb1__r .sc-tb__a:hover, .sc-tb1__r .sc-tb__a:focus-visible, .sc-tb1__tel:hover, .sc-tb1__tel:focus-visible { color: var(--sc-on-dark); } /* 900~1180px: 오른쪽 셋째 링크를 숨겨 왼쪽 시간 문구 자리를 남긴다 */ @media (max-width: 1180px) and (min-width: 900px) { .sc-tb1__r li:nth-child(3) { display: none; } } /* ================= TB2 연한 틴트 한 줄: 가운데 안내 + 오시는 길 ================= */ .sc-tb2 { --sc-tb-h: 40px; background: var(--sc-tint-2); color: var(--sc-brand); } .sc-tb2 .sc-tb__in { justify-content: center; gap: 10px; } .sc-tb .sc-tb2__pin { width: 18px; height: 18px; color: var(--sc-accent-text); } .sc-tb .sc-tb2__t { display: block; font-size: 15px; font-weight: 600; } .sc-tb2__go { flex: none; gap: 4px; margin-left: 8px; padding: 0 4px; font-size: 15px; font-weight: 700; color: var(--sc-brand-2); } .sc-tb2__go:hover, .sc-tb2__go:focus-visible { color: var(--sc-brand); } /* ================= 899px 이하 ================= */ @media (max-width: 899px) { .sc-tb__dk { display: none !important; } .sc-tb__mb { display: inline; } .sc-tb2 { --sc-tb-h: 44px; } /* 누르는 영역이 띠 높이 그대로 44px */ /* TB1: 전화 + 지도(.is-keep) 두 개만 */ .sc-tb .sc-tb1__h { display: none; } .sc-tb1__r li:not(.is-keep) { display: none; } .sc-tb1__r li.is-keep::before { display: none; } } /* 띠 + D5 모바일 메뉴: 메뉴 판·막을 헤더 아래 끝에 맞춘다(topbar.js가 --sc-mm-top을 헤더에 적음). JS가 없으면 mobile-menu.css 기본값(--sc-header-h) 그대로. */ .sc-tb ~ .sc-hd .sc-mm, .sc-tb ~ .sc-hd .sc-mm__scrim { top: var(--sc-mm-top, var(--sc-header-h)); } @media (prefers-reduced-motion: reduce) { .sc-tb__a, .sc-tb__arr { transition: none !important; } .sc-tb__a:hover .sc-tb__arr, .sc-tb__a:focus-visible .sc-tb__arr { transform: none; } } /* 화면에는 숨기고 읽기 프로그램에는 읽히는 글자 — nav/nav.css와 같은 규칙(이 부품만 따로 쓸 때 대비) */ .sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── site-components buttons/buttons.css ── */ /* ── 버튼 B1·B3·B5 (site-components) ─────────────────────────────────── 필요: tokens.css, icons/icon-styles.css. JS 없음. 떠오름은 1px까지만, 움직임은 transform·그림자·색만. 초점 테두리는 사이트 공통 :focus-visible을 따른다. B1 화살표가 4px 밀려나는 버튼 … (.sc-b1--light 흰 바탕판) B3 두 톤 그라디언트 + 브랜드 그림자 … (.sc-b3--on-dark 짙은 바탕 위 강조색판) B5 전화 버튼(아이콘 칸 + 번호, 폭 고정) … (.sc-b5--soft 아이콘 칸이 연한 강조색) */ .sc-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .25s var(--sc-ease), box-shadow .25s, background-color .25s, color .25s; } .sc-btn .sc-ic { width: 20px; height: 20px; transition: transform .25s var(--sc-ease); } /* B1 */ .sc-b1 { background: var(--sc-brand); color: var(--sc-on-dark); } .sc-b1:hover, .sc-b1:focus-visible { transform: translateY(-1px); box-shadow: var(--sc-shadow-md); } .sc-b1:hover .sc-ic, .sc-b1:focus-visible .sc-ic { transform: translateX(4px); } .sc-b1--light { background: var(--sc-surface); color: var(--sc-brand); box-shadow: inset 0 0 0 1.5px var(--sc-line-strong); } .sc-b1--light:hover, .sc-b1--light:focus-visible { box-shadow: inset 0 0 0 1.5px var(--sc-brand), 0 8px 18px rgba(var(--sc-shadow-rgb), .12); } /* B3 */ .sc-b3 { background: linear-gradient(135deg, var(--sc-brand-hi) 0%, var(--sc-brand) 45%, var(--sc-brand-strong) 100%); color: var(--sc-on-dark); box-shadow: 0 6px 16px rgba(var(--sc-shadow-rgb), .28), 0 1px 2px rgba(var(--sc-shadow-deep-rgb), .2); } .sc-b3:hover, .sc-b3:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(var(--sc-shadow-rgb), .36), 0 2px 4px rgba(var(--sc-shadow-deep-rgb), .2); } .sc-b3:hover .sc-ic, .sc-b3:focus-visible .sc-ic { transform: translateX(4px); } .sc-b3--on-dark { background: linear-gradient(135deg, var(--sc-accent-hi) 0%, var(--sc-accent) 100%); color: var(--sc-brand); box-shadow: var(--sc-shadow-on-dark); } .sc-b3--on-dark:hover, .sc-b3--on-dark:focus-visible { box-shadow: var(--sc-shadow-on-dark-hover); } /* B5 — 폭 고정(긴 번호 기준), 숫자 고정폭: 글자·상태가 바뀌어도 크기 그대로 */ .sc-b5 { gap: 0; justify-content: flex-start; width: var(--sc-b5-w, 230px); min-height: 56px; padding: 0 20px 0 6px; background: var(--sc-surface); color: var(--sc-brand); box-shadow: inset 0 0 0 1.5px var(--sc-line-strong); font-variant-numeric: tabular-nums; } .sc-b5__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 12px; border-radius: 50%; background: var(--sc-brand); color: var(--sc-on-dark); transition: background-color .25s, color .25s, transform .25s var(--sc-ease); } .sc-b5 .sc-b5__ic .sc-ic { transform: none; } .sc-b5__tx { display: flex; flex-direction: column; font-size: 17px; line-height: 1.2; letter-spacing: .01em; } .sc-b5__tx small { margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--sc-muted); } .sc-b5:hover, .sc-b5:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--sc-brand), 0 8px 18px rgba(var(--sc-shadow-rgb), .14); } .sc-b5:hover .sc-b5__ic, .sc-b5:focus-visible .sc-b5__ic { background: var(--sc-brand-2); transform: rotate(-8deg); } .sc-b5--soft .sc-b5__ic { background: var(--sc-tint-2); color: var(--sc-brand); } .sc-b5--soft:hover .sc-b5__ic, .sc-b5--soft:focus-visible .sc-b5__ic { background: var(--sc-accent); color: var(--sc-brand); } @media (max-width: 560px) { .sc-b5--fluid { width: 100%; } } @media (prefers-reduced-motion: reduce) { .sc-btn, .sc-btn .sc-ic, .sc-b5__ic { transition: none !important; } .sc-btn:hover, .sc-btn:focus-visible, .sc-btn:hover .sc-ic, .sc-btn:focus-visible .sc-ic, .sc-b5:hover .sc-b5__ic, .sc-b5:focus-visible .sc-b5__ic { transform: none; } } /* ── site-components highlight/highlight.css ── */ /* ── 형광펜 E1b — 화면에 들어올 때 한 번 그어지는 띠 (site-components) ─────── 필요: tokens.css, highlight.js. 제목 안 핵심 낱말을 로 감싼다. 띠는 ::before 한 층(transform: scaleX)이라 글자 줄이 흔들리지 않는다. 낱말은 줄바꿈하지 않는다(nowrap). JS가 없거나 의 sc-js 한 줄이 없으면 처음부터 칠해진 채로 보인다. */ .sc-hl { position: relative; z-index: 0; white-space: nowrap; padding: 0 .06em; } .sc-hl::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: .1em; height: .4em; border-radius: 3px; background: var(--sc-hl-color, var(--sc-accent)); opacity: .6; transform: scaleX(1); transform-origin: left; } .sc-js .sc-hl::before { transform: scaleX(0); transition: transform .35s var(--sc-ease) .15s; } .sc-js .sc-hl.is-in::before { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .sc-js .sc-hl::before { transform: scaleX(1); transition: none; } } /* ── site-components faq/faq.css ── */ /* ── FAQ 아코디언 E3a·E3b·E3c (site-components) ────────────────────────── 필요: tokens.css, icons/icon-styles.css(셰브론), faq.js. 열고 닫기는 grid-template-rows 0fr → 1fr(사용자가 직접 연 펼침이라 아래가 내려가는 것은 허용). JS가 없거나 의 sc-js 한 줄이 없으면 답이 펼친 채로 보인다(네이버 수집·접근 보장). 변형: .sc-faq--a 테두리형 · .sc-faq--b +/− 원 단추형 · .sc-faq--c 열린 항목 틴트형(Q 배지) */ .sc-faq { display: grid; gap: 10px; } .sc-faq__h { margin: 0; font-size: inherit; } .sc-faq__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--sc-brand); transition: background-color .25s, color .25s; } .sc-faq__t { flex: 1; } .sc-faq__chev { width: 20px; height: 20px; color: var(--sc-brand-2); transition: transform .3s var(--sc-ease); } .sc-faq__btn[aria-expanded="true"] .sc-faq__chev { transform: rotate(180deg); } .sc-faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--sc-ease); } .sc-faq__in { min-height: 0; overflow: hidden; } .sc-js .sc-faq__panel { grid-template-rows: 0fr; } .sc-js .sc-faq__in { visibility: hidden; transition: visibility 0s .32s; } .sc-js .sc-faq__item.is-open .sc-faq__panel { grid-template-rows: 1fr; } .sc-js .sc-faq__item.is-open .sc-faq__in { visibility: visible; transition-delay: 0s; } .sc-faq__in > * { margin: 0; padding: 0 16px; font-size: 15px; line-height: 1.7; color: var(--sc-muted); } .sc-faq__in > :last-child { padding-bottom: 16px; } .sc-faq__in > * + * { margin-top: 10px; } /* a — 테두리형 */ .sc-faq--a .sc-faq__item { border: 1px solid var(--sc-line); border-radius: var(--sc-radius-md); background: var(--sc-surface); transition: border-color .25s, box-shadow .25s; } .sc-faq--a .sc-faq__btn { border-radius: var(--sc-radius-md); } .sc-faq--a .sc-faq__btn:hover, .sc-faq--a .sc-faq__btn:focus-visible { color: var(--sc-brand-2); } .sc-faq--a .sc-faq__item.is-open { border-color: var(--sc-accent-line); box-shadow: var(--sc-shadow-sm); } /* b — 위 굵은 선 + 줄 구분, +/− 원 단추 */ .sc-faq--b { gap: 0; border-top: 2px solid var(--sc-brand); } .sc-faq--b .sc-faq__item { border-bottom: 1px solid var(--sc-line); } .sc-faq--b .sc-faq__btn { padding-inline: 4px; } .sc-faq--b .sc-faq__in > * { padding-inline: 4px; } .sc-faq__pm { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sc-line-strong); transition: background-color .25s, box-shadow .25s; } .sc-faq__pm i { position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--sc-brand); transition: transform .3s var(--sc-ease), background-color .25s; } .sc-faq__pm i + i { transform: rotate(90deg); } .sc-faq--b .sc-faq__btn:hover .sc-faq__pm, .sc-faq--b .sc-faq__btn:focus-visible .sc-faq__pm { box-shadow: inset 0 0 0 1.5px var(--sc-brand); } .sc-faq--b .sc-faq__btn[aria-expanded="true"] .sc-faq__pm { background: var(--sc-brand); box-shadow: inset 0 0 0 1.5px var(--sc-brand); } .sc-faq--b .sc-faq__btn[aria-expanded="true"] .sc-faq__pm i { background: var(--sc-on-dark); } .sc-faq--b .sc-faq__btn[aria-expanded="true"] .sc-faq__pm i + i { transform: rotate(90deg) scaleX(0); } /* c — 열린 항목이 틴트 바탕, Q 배지 */ .sc-faq--c .sc-faq__item { border-radius: var(--sc-radius-md); background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--sc-line); transition: background-color .3s, box-shadow .3s; } .sc-faq--c .sc-faq__btn { border-radius: var(--sc-radius-md); } .sc-faq__q { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--sc-tint-2); color: var(--sc-accent-text); font-size: 14px; font-weight: 800; transition: background-color .25s, color .25s; } .sc-faq--c .sc-faq__btn:hover, .sc-faq--c .sc-faq__btn:focus-visible { color: var(--sc-brand-2); } .sc-faq--c .sc-faq__item.is-open { background: var(--sc-tint); box-shadow: inset 0 0 0 1px transparent; } .sc-faq--c .sc-faq__item.is-open .sc-faq__q { background: var(--sc-brand); color: var(--sc-on-dark); } .sc-faq--c .sc-faq__in > * { padding-left: 58px; } @media (prefers-reduced-motion: reduce) { .sc-faq__btn, .sc-faq__chev, .sc-faq__panel, .sc-faq__in, .sc-faq__item, .sc-faq__pm, .sc-faq__pm i, .sc-faq__q { transition: none !important; } } /* ── site-components tabs/tabs.css ── */ /* ── 묶음 탭 E8 — 밑줄이 미끄러지고 패널 높이 고정 (site-components) ───────── 필요: tokens.css, icons/icon-styles.css(칸 아이콘), tabs.js. 패널은 모두 같은 격자 칸에 겹쳐 두어(grid-area 1/1) 가장 긴 패널 높이로 고정 — 탭을 바꿔도 아래가 튀지 않는다. 밑줄은 transform: translateX만. 탭 수는 JS가 --sc-tabs-n으로 넣는다(없으면 3). JS가 없거나 sc-js가 없으면 탭 줄을 숨기고 모든 패널을 차례로 보여 준다. */ .sc-tabs__list { position: relative; display: grid; grid-template-columns: repeat(var(--sc-tabs-n, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--sc-line); } .sc-tabs__tab { min-height: 52px; padding: 0 8px; border: 0; border-radius: var(--sc-radius-sm) var(--sc-radius-sm) 0 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--sc-muted); cursor: pointer; transition: color .25s, background-color .25s; } .sc-tabs__tab:hover, .sc-tabs__tab:focus-visible { color: var(--sc-brand); background: var(--sc-hover); } .sc-tabs__tab[aria-selected="true"] { color: var(--sc-brand); } .sc-tabs__bar { position: absolute; left: 0; bottom: -1px; width: calc(100% / var(--sc-tabs-n, 3)); height: 3px; border-radius: 3px; background: var(--sc-brand); transition: transform .32s var(--sc-ease); } .sc-tabs__panels { display: grid; gap: 28px; padding-top: 20px; } html:not(.sc-js) .sc-tabs__list { display: none; } .sc-js .sc-tabs__panels { gap: 0; } .sc-js .sc-tabs__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s var(--sc-ease), visibility 0s .25s; } .sc-js .sc-tabs__panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .sc-tabs__panel { border-radius: 12px; } /* 패널 안 카드 목록(선택) — 아이콘 칸 + 제목·한 줄 */ .sc-tabs__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .sc-tabs__cards a { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: var(--sc-radius-md); background: var(--sc-tint); color: inherit; text-decoration: none; transition: background-color .25s, transform .25s var(--sc-ease); } .sc-tabs__cards a:hover, .sc-tabs__cards a:focus-visible { background: var(--sc-tint-2); transform: translateY(-2px); } .sc-tabs__cards .sc-icbox { width: 44px; height: 44px; border-radius: 12px; background: var(--sc-surface); color: var(--sc-brand-2); } .sc-tabs__cards b { display: block; font-size: 16px; color: var(--sc-brand); } .sc-tabs__cards small { display: block; font-size: 14px; color: var(--sc-muted); } @media (max-width: 560px) { .sc-tabs__cards { grid-template-columns: 1fr; } .sc-tabs__tab { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .sc-tabs__tab, .sc-tabs__bar, .sc-js .sc-tabs__panel, .sc-tabs__cards a { transition: none !important; } .sc-js .sc-tabs__panel, .sc-tabs__cards a:hover, .sc-tabs__cards a:focus-visible { transform: none; } } /* ── site-components heading/heading.css ── */ /* ── 섹션 머리 T2·T6·T7 + 섹션 라벨 (site-components) ───────────────────── 필요: tokens.css. JS 없음. 형광펜을 함께 쓰면 highlight/highlight.css + highlight.js. 라벨은

    (헤딩 아님). H2는 검색 키워드 제목 그대로. T2 가운데: p.sc-label(한국어 꼬리표) → span.sc-head__rule → h2.sc-head__h(끝 구절 span.sc-head__em) → p.sc-head__lead T2를 고른 사이트는 영어 라벨 대신 한국어 꼬리표(modern-design 1장 "섹션 라벨" 예외). T6 p.sc-label(영어 1~3단어, 알약) → h2.sc-head__h → span.sc-head__bar → p.sc-head__lead T7 div.sc-head__mark > (p.sc-label + h2.sc-head__h) → p.sc-head__lead. 아래 본문을 같은 왼쪽 정렬선에 두려면 .sc-t7-indent. 한 사이트는 T2·T6·T7 중 하나만 쓴다. 장식(선·막대)은 aria-hidden span. */ /* 섹션 라벨 공통(modern-design 1장): 영어 1~3단어, 대문자·넓은 자간은 CSS가 만든다 */ .sc-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent-text); } .sc-head { word-break: keep-all; overflow-wrap: break-word; } /* H2: 360px에서 28px — 한국어 키워드 제목 20자 안팎이 두 줄, 길어도 세 줄 안 */ .sc-head__h { margin: 0; font-size: clamp(28px, 22.74px + 1.348vw, 40px); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; color: var(--sc-brand); } .sc-head__em { color: var(--sc-accent-text); } .sc-head__lead { margin: 16px 0 0; font-size: clamp(16px, 15.12px + .225vw, 18px); line-height: 1.75; color: var(--sc-muted); } /* ── T2 가운데 정렬 + 한국어 꼬리표 → 짧은 선 → 두 색 H2 → 리드 */ .sc-head--t2 { text-align: center; } .sc-head--t2 .sc-label { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: none; } .sc-head__rule { display: block; width: 40px; height: 2px; margin: 14px auto 18px; border-radius: 2px; background: var(--sc-accent-text); } .sc-head--t2 .sc-head__h { font-size: clamp(28px, 21.87px + 1.573vw, 42px); font-weight: 700; line-height: 1.3; } /* ── T6 라벨 알약 배지 + H2 + 액센트 막대 알약 바탕 --sc-accent-soft(새 토큰, 없으면 --sc-tint-2). 흰 섹션에 둔다(틴트 섹션이면 알약이 묻힘). */ .sc-head--t6 .sc-label { display: inline-flex; align-items: center; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--sc-accent-soft, var(--sc-tint-2)); letter-spacing: .12em; } .sc-head--t6 .sc-head__h { margin-top: 16px; } .sc-head__bar { display: block; width: 48px; height: 4px; margin: 20px 0; border-radius: 4px; background: linear-gradient(90deg, var(--sc-brand), var(--sc-accent-line)); } .sc-head--t6 .sc-head__lead { margin-top: 0; } /* ── T7 세로 선 라벨: 라벨 + H2를 왼쪽 2px 선으로 묶고, 리드·본문은 선 안쪽 같은 정렬선 */ .sc-head--t7 { --sc-t7-pad: clamp(18px, 2.4vw, 28px); padding-left: var(--sc-t7-pad); } .sc-head__mark { position: relative; margin-left: calc(-1 * var(--sc-t7-pad)); padding-left: var(--sc-t7-pad); } .sc-head__mark::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--sc-accent-line); } .sc-head--t7 .sc-label { font-size: 12px; letter-spacing: .16em; } .sc-head--t7 .sc-head__lead { margin-top: 18px; font-size: 17px; } .sc-t7-indent { padding-left: clamp(18px, 2.4vw, 28px); } /* ── site-components cards/cards.css ── */ /* ── 카드 K1~K8 · P1~P4 · S1~S3 · A1·A2 · F1~F3 (site-components) ───────────── 필요: tokens.css, icons/icon-styles.css(아이콘 기본값·I1~I4), buttons/buttons.css(A2·F2·F3 버튼), nav/nav.css(.sc-sr — F2 "새 창" 안내 글자), cards.js(K5 빛만. 없으면 빛이 위 가운데에 고정). 마크업: cards/example.html. 출처: 2026-10-20 승전 카드 예시 카탈로그(_preview/cards.html) — 겉모습·동작 그대로, 색만 변수. - 움직임은 transform·opacity·box-shadow·색만. hover 때 카드 크기는 그대로(떠오름은 translateY). - 링크 카드(K·P·A1)는 카드 전체가 a 하나. 절차(S)·정보(F)는 카드 자체가 링크가 아니다. - 아이콘 칸 .sc-card__ic 에 sc-icbox--i1~i4 를 붙이면 그 칸 스타일로 바뀐다(크기·자리는 카드가 정한 그대로). - 새 토큰 후보(아직 tokens.css에 없음 — 기존 변수로 대체값을 둠): --sc-accent-soft(강조색 아주 연한 틴트 → 대체 --sc-tint), --sc-accent-wash(강조색 바탕 물들임 → 대체 --sc-hover), --sc-card-shadow / --sc-card-shadow-hover / --sc-card-shadow-lift(카드 그림자 세 단 → 대체는 아래 값). */ /* 카드 그림자 세 단 — 색은 --sc-shadow-rgb를 따른다. 사이트가 :root에 --sc-card-shadow… 를 주면 그 값을 쓴다 */ :where(.sc-cards, .sc-card, .sc-steps, .sc-person, .sc-facts, .sc-way, .sc-hours) { --_sh1: var(--sc-card-shadow, 0 1px 2px rgba(var(--sc-shadow-rgb), .05), 0 6px 16px rgba(var(--sc-shadow-rgb), .06)); --_sh2: var(--sc-card-shadow-hover, 0 2px 4px rgba(var(--sc-shadow-rgb), .05), 0 14px 30px rgba(var(--sc-shadow-rgb), .11)); --_sh3: var(--sc-card-shadow-lift, 0 4px 8px rgba(var(--sc-shadow-rgb), .07), 0 22px 46px rgba(var(--sc-shadow-rgb), .16)); --_soft: var(--sc-accent-soft, var(--sc-tint)); --_wash: var(--sc-accent-wash, var(--sc-hover)); /* 짙은 바탕 위 반투명 강조색 — color-mix가 없는 브라우저(Safari 16.1 이하)는 아래 @supports에서 단색으로 */ --_ac13: color-mix(in srgb, var(--sc-accent) 13%, transparent); --_ac16: color-mix(in srgb, var(--sc-accent) 16%, transparent); --_ac18: color-mix(in srgb, var(--sc-accent) 18%, transparent); --_ac28: color-mix(in srgb, var(--sc-accent) 28%, transparent); --_ac45: color-mix(in srgb, var(--sc-accent) 45%, transparent); } @supports not (color: color-mix(in srgb, red 50%, blue)) { :where(.sc-cards, .sc-card, .sc-steps, .sc-person, .sc-facts, .sc-way, .sc-hours) { --_ac13: var(--sc-brand-hi); --_ac16: var(--sc-brand-hi); --_ac18: var(--sc-brand-hi); --_ac28: var(--sc-brand-hi); --_ac45: var(--sc-accent-line); } } /* ── 묶음 격자: 같은 줄 카드 높이 같게(grid stretch). ul > li > a, div > a 둘 다 된다 ── */ .sc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; } .sc-cards > li { display: flex; min-width: 0; margin: 0; } .sc-cards > li > * { flex: 1 1 auto; min-width: 0; } @media (min-width: 640px) { .sc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } /* K6 행 목록 · P3 가로 카드: 900px부터 두 열 */ .sc-cards.sc-cards--rows { grid-template-columns: minmax(0, 1fr); gap: 12px; } .sc-cards.sc-cards--wide { grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 900px) { .sc-cards.sc-cards--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } .sc-cards.sc-cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } /* K7 벤토: 카드 6장, 앞의 두 장이 큰 칸(is-big) */ .sc-cards.sc-cards--bento { gap: 16px; } @media (min-width: 640px) { .sc-cards.sc-cards--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "b1 b1" "s1 s2" "b2 b2" "s3 s4"; } .sc-cards--bento > :nth-child(1) { grid-area: b1; } .sc-cards--bento > :nth-child(2) { grid-area: b2; } .sc-cards--bento > :nth-child(3) { grid-area: s1; } .sc-cards--bento > :nth-child(4) { grid-area: s2; } .sc-cards--bento > :nth-child(5) { grid-area: s3; } .sc-cards--bento > :nth-child(6) { grid-area: s4; } } @media (min-width: 1024px) { .sc-cards.sc-cards--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; grid-template-areas: "b1 b1 s1 s2" "s3 s4 b2 b2"; } } /* ── 링크 카드 바닥 ── */ .sc-card { --_r: 16px; --_lift: -3px; --_bg: var(--sc-surface); --_bd: transparent; --_sh: none; --_sh-on: var(--_sh); position: relative; display: flex; flex-direction: column; border: 1px solid var(--_bd); border-radius: var(--_r); background: var(--_bg); box-shadow: var(--_sh); color: var(--sc-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .25s var(--sc-ease), box-shadow .25s var(--sc-ease), background-color .25s, border-color .25s; } .sc-card:is(:hover, :focus-visible) { transform: translateY(var(--_lift)); box-shadow: var(--_sh-on); background: var(--_bg-on, var(--_bg)); border-color: var(--_bd-on, var(--_bd)); } .sc-card:focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 3px; border-radius: var(--_r); } .sc-card__tx { flex: 1 1 auto; min-width: 0; } .sc-card__t { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--sc-brand); } .sc-card__d { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--sc-muted); } .sc-card__tag { display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--sc-accent-text); } .sc-card__go { display: grid; place-items: center; flex: none; color: var(--sc-brand-2); transition: transform .25s var(--sc-ease), background-color .3s, color .3s, box-shadow .3s; } .sc-card__go .sc-ic { width: 22px; height: 22px; } .sc-card:is(:hover, :focus-visible) .sc-card__go { transform: translateX(4px); } /* ── 아이콘 칸: 카드 변형이 --_ic* 를 정하고, sc-icbox--i1~i4 가 붙으면 그 칸 스타일로 덮는다. [class*="sc-icbox--"] 와 [class] 는 icon-styles.css(I2 60px·I3 64px)보다 앞서려고 붙인 것 — 크기는 늘 카드 값 ── */ .sc-card__ic, .sc-card__ic[class*="sc-icbox--"] { display: grid; place-items: center; flex: none; width: var(--_ic, 48px); height: var(--_ic, 48px); border-radius: var(--_ic-r, 12px); background: var(--_ic-bg, var(--sc-tint-2)); color: var(--_ic-c, var(--sc-brand)); box-shadow: var(--_ic-sh, none); transition: background-color .25s, color .25s, box-shadow .25s, transform .25s var(--sc-ease); } .sc-card__ic[class] .sc-ic { width: var(--_ic-svg, 24px); height: var(--_ic-svg, 24px); } .sc-card:is(:hover, :focus-visible) .sc-card__ic[class] { background: var(--_ic-bg-on, var(--sc-brand)); color: var(--_ic-c-on, var(--sc-on-dark)); box-shadow: var(--_ic-sh-on, var(--_ic-sh, none)); } /* 바꿔 끼우기 I1~I4 */ .sc-card__ic.sc-icbox--i1 { --_ic-r: 0; --_ic-bg: transparent; --_ic-bg-on: transparent; --_ic-c: var(--sc-brand-2); --_ic-c-on: var(--sc-accent-text); --_ic-sh: none; --_ic-sh-on: none; --_ic-svg: 32px; } .sc-card__ic.sc-icbox--i2 { --_ic-r: 14px; --_ic-bg: var(--sc-tint); --_ic-c: var(--sc-brand-2); --_ic-bg-on: var(--sc-brand); --_ic-c-on: var(--sc-on-dark); --_ic-sh: none; --_ic-sh-on: none; --_ic-svg: 26px; } .sc-card__ic.sc-icbox--i3 { --_ic-r: 50%; --_ic-bg: var(--sc-tint); --_ic-c: var(--sc-brand-2); --_ic-bg-on: var(--sc-brand); --_ic-c-on: var(--sc-on-dark); --_ic-sh: inset 0 0 0 1px var(--sc-line); --_ic-sh-on: inset 0 0 0 1px var(--sc-brand), 0 8px 18px rgba(var(--sc-shadow-rgb), .22); --_ic-svg: 26px; } .sc-card__ic.sc-icbox--i4 { --_ic-r: 0; --_ic-bg: transparent; --_ic-bg-on: transparent; --_ic-c: var(--sc-brand); --_ic-c-on: var(--sc-brand-2); --_ic-sh: none; --_ic-sh-on: none; --_ic-svg: 36px; --sc-tone: var(--sc-accent); --sc-tone-o: .8; } .sc-card:is(:hover, :focus-visible) .sc-card__ic.sc-icbox--i4 { --sc-tone-o: 1; } /* 틴트 카드(K6·F1) 위의 I2·I3 칸은 흰 칸으로(같은 색에 묻히지 않게) */ :is(.sc-card--k6, .sc-fact) .sc-card__ic:is(.sc-icbox--i2, .sc-icbox--i3) { --_ic-bg: var(--sc-surface); } /* 짙은 카드(K8·K7 큰 칸) 위에서는 강조색 선 */ :is(.sc-card--k8, .sc-card--k7.is-big) .sc-card__ic:is(.sc-icbox--i2, .sc-icbox--i3) { --_ic-bg: var(--_ac13); --_ic-c: var(--sc-accent); --_ic-bg-on: var(--sc-accent); --_ic-c-on: var(--sc-brand-strong); --_ic-sh: none; --_ic-sh-on: none; } :is(.sc-card--k8, .sc-card--k7.is-big) .sc-card__ic:is(.sc-icbox--i1, .sc-icbox--i4) { --_ic-c: var(--sc-accent); --_ic-c-on: var(--sc-on-dark); } /* ── K 세로 쌓기형 공통(K1·K3·K4·K5·K7·K8): 아이콘 칸 → 제목 → 한 줄 → 오른쪽 아래 화살표 ── */ :is(.sc-card--k1, .sc-card--k3, .sc-card--k4, .sc-card--k5, .sc-card--k7, .sc-card--k8) { padding: 26px 24px 22px; } :is(.sc-card--k1, .sc-card--k3, .sc-card--k4, .sc-card--k5, .sc-card--k7, .sc-card--k8) .sc-card__tx { margin-top: 18px; } :is(.sc-card--k1, .sc-card--k3, .sc-card--k4, .sc-card--k5, .sc-card--k7, .sc-card--k8) .sc-card__go { align-self: flex-end; margin-top: 14px; } /* K1 아이콘 칸 기본: 옅은 그림자, 올리면 3px 뜨고 칸이 주색으로 */ .sc-card--k1 { --_sh: var(--_sh1); --_sh-on: var(--_sh2); } /* K2 테두리만: 그림자 없음, 올리면 바탕이 강조색으로 물듦 */ .sc-card--k2 { --_r: 14px; --_lift: -2px; --_bd: var(--sc-line); --_bd-on: var(--sc-accent-line); --_bg-on: var(--_wash); --_ic: 46px; --_ic-bg: transparent; --_ic-sh: inset 0 0 0 1px var(--sc-line); --_ic-bg-on: var(--sc-surface); --_ic-c-on: var(--sc-accent-text); --_ic-sh-on: inset 0 0 0 1px var(--sc-accent-line); display: grid; grid-template-columns: var(--_ic) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 16px; padding: 22px 22px 18px; } .sc-card--k2 .sc-card__ic { grid-row: 1; grid-column: 1; } .sc-card--k2 .sc-card__tx { grid-row: 1; grid-column: 2; padding-top: 9px; } .sc-card--k2 .sc-card__t { font-size: 18px; } .sc-card--k2 .sc-card__go { grid-row: 2; grid-column: 2; justify-self: end; margin-top: 12px; } /* K3 큰 모서리 + 옅은 틴트 그라디언트, 원형 칸·원형 화살표, 제목 위 꼬리표 */ .sc-card--k3 { --_r: 22px; --_lift: -4px; --_sh: var(--_sh1); --_sh-on: var(--_sh3); --_bd: rgba(var(--sc-shadow-rgb), .06); --_bg: linear-gradient(165deg, var(--sc-surface) 0%, var(--_wash) 55%, var(--_soft) 100%); --_ic-r: 50%; --_ic-bg: var(--sc-surface); --_ic-c: var(--sc-accent-text); --_ic-sh: 0 0 0 1px var(--sc-tint-2); padding: 28px 26px 24px; transition-duration: .3s; } .sc-card--k3 .sc-card__tx { margin-top: 20px; } .sc-card--k3 .sc-card__go { width: 40px; height: 40px; margin-top: 16px; border-radius: 50%; color: var(--sc-brand); box-shadow: inset 0 0 0 1px var(--sc-line-strong); } .sc-card--k3 .sc-card__go .sc-ic { width: 18px; height: 18px; } .sc-card--k3:is(:hover, :focus-visible) .sc-card__go { background: var(--sc-brand); color: var(--sc-on-dark); box-shadow: inset 0 0 0 1px var(--sc-brand); } /* K4 위쪽 액센트 선이 왼쪽부터 그어짐(scaleX만) */ .sc-card--k4 { --_sh: var(--_sh1); --_sh-on: var(--_sh2); --_bd: var(--sc-line-soft); --_ic-bg: var(--sc-tint); --_ic-bg-on: var(--sc-tint-2); --_ic-c-on: var(--sc-accent-text); overflow: hidden; } .sc-card--k4::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sc-brand), var(--sc-accent-line)); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--sc-ease); } .sc-card--k4:is(:hover, :focus-visible)::before { transform: scaleX(1); } /* K5 마우스를 따라오는 빛 — 위치는 cards.js가 --sc-mx/--sc-my로만 넘긴다. 터치·움직임 줄이기에서는 빛 없음 */ .sc-card--k5 { --_sh: var(--_sh1); --_sh-on: var(--_sh2); --_bd-on: var(--sc-accent-line); isolation: isolate; overflow: hidden; } .sc-card--k5::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(280px circle at var(--sc-mx, 50%) var(--sc-my, 0%), var(--sc-accent), transparent 70%); opacity: 0; transition: opacity .3s; } .sc-card--k5:is(:hover, :focus-visible)::before { opacity: var(--sc-k5-glow, .4); } @media (hover: none) { .sc-card--k5::before { display: none; } } /* K6 가로 행: 아이콘 왼쪽 · 글 가운데 · 화살표 오른쪽 (카드 8개 이상 목록) */ .sc-card--k6 { --_r: 14px; --_lift: -2px; --_bg: var(--sc-card-tint, var(--sc-tint)); --_bg-on: var(--sc-surface); --_bd-on: var(--sc-line); --_sh-on: var(--_sh2); --_ic-bg: var(--sc-surface); display: grid; grid-template-columns: var(--_ic, 48px) minmax(0, 1fr) 22px; align-items: center; gap: 16px; padding: 18px 20px; } .sc-card--k6 .sc-card__t { font-size: 17.5px; } .sc-card--k6 .sc-card__d { margin-top: 4px; } @media (max-width: 420px) { .sc-card--k6 { --_ic: 44px; grid-template-columns: var(--_ic) minmax(0, 1fr) 20px; gap: 12px; padding: 16px 14px; } } /* K7 벤토: 큰 칸(is-big)은 짙은 그라디언트 + 근거 한 줄(.sc-card__law) */ .sc-card--k7 { --_r: 18px; --_sh: var(--_sh1); --_sh-on: var(--_sh2); padding: 24px 22px 20px; } .sc-card--k7 .sc-card__t { font-size: 18px; } .sc-card--k7.is-big { --_bg: linear-gradient(140deg, var(--sc-brand) 0%, var(--sc-brand-strong) 100%); --_sh-on: var(--_sh3); --_ic-bg: var(--_ac16); --_ic-c: var(--sc-accent); --_ic-bg-on: var(--sc-accent); --_ic-c-on: var(--sc-brand-strong); padding: 30px 28px 24px; } .sc-card--k7.is-big .sc-card__t { font-size: 22px; color: var(--sc-on-dark); } .sc-card--k7.is-big .sc-card__d { font-size: 15.5px; color: var(--sc-on-dark-muted); } .sc-card--k7.is-big .sc-card__go { color: var(--sc-accent); } .sc-card__law { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--_ac28); font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--sc-accent); } .sc-card__law .sc-ic { width: 20px; height: 20px; } /* K8 짙은 섹션용: 한 톤 밝은 주색 카드 + 강조색 선 아이콘 */ .sc-card--k8 { --_bg: var(--sc-brand); --_bd: var(--_ac18); --_bd-on: var(--sc-accent); --_sh-on: 0 0 0 1px var(--_ac45), 0 16px 38px var(--_ac16); --_ic-bg: var(--_ac13); --_ic-c: var(--sc-accent); --_ic-bg-on: var(--sc-accent); --_ic-c-on: var(--sc-brand-strong); } .sc-card--k8 .sc-card__t { color: var(--sc-on-dark); } .sc-card--k8 .sc-card__d { color: var(--sc-on-dark-muted); } .sc-card--k8 .sc-card__go { color: var(--sc-accent); } :is(.sc-card--k8, .sc-card--k7.is-big):focus-visible { outline-color: var(--sc-accent); } /* ── P 사진 카드 ── */ .sc-card__media { display: block; position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--sc-tint); } .sc-card__photo { display: block; width: 100%; height: 100%; object-fit: cover; } .sc-card__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } .sc-card__body .sc-card__t { margin-top: 4px; } .sc-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 700; color: var(--sc-brand-2); } .sc-card__more .sc-ic { width: 18px; height: 18px; transition: transform .25s var(--sc-ease); } .sc-card:is(:hover, :focus-visible) .sc-card__more .sc-ic { transform: translateX(4px); } /* P1 위 사진(1:1) + 아래 흰 판 */ .sc-card--p1 { --_bd: var(--sc-line-soft); --_sh: var(--_sh1); --_sh-on: var(--_sh2); overflow: hidden; } .sc-card--p1 .sc-card__body { padding: 20px 22px 22px; } /* P2 사진이 카드 전체 + 아래쪽 짙은 막 위 흰 글자. 올리면 사진만 확대(카드 크기 그대로) */ .sc-card--p2 { --_bg: var(--sc-brand-strong); --_sh: var(--_sh1); --_sh-on: var(--_sh2); display: block; border: 0; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; transition-duration: .3s; } .sc-card--p2 > .sc-card__photo { position: absolute; inset: 0; z-index: -2; transition: transform .35s var(--sc-ease); } .sc-card--p2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--sc-shadow-deep-rgb), .08) 0%, rgba(var(--sc-shadow-deep-rgb), .3) 38%, rgba(var(--sc-shadow-deep-rgb), .86) 62%, rgba(var(--sc-shadow-deep-rgb), .95) 100%); } .sc-card--p2 .sc-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; } .sc-card--p2 .sc-card__tag { color: var(--sc-accent); text-transform: uppercase; letter-spacing: .14em; } .sc-card--p2 .sc-card__t { font-size: 22px; color: var(--sc-on-dark); } .sc-card--p2 .sc-card__d { color: var(--sc-on-dark-muted); } .sc-card--p2 .sc-card__more { color: var(--sc-on-dark); } .sc-card--p2:is(:hover, :focus-visible) > .sc-card__photo { transform: scale(1.05); } /* P3 사진 왼쪽 · 글 오른쪽 가로 카드(모바일도 가로, 사진 88px) */ .sc-card--p3 { --_lift: -2px; --_bg: var(--sc-card-tint, var(--sc-tint)); --_bg-on: var(--sc-surface); --_bd-on: var(--sc-line); --_sh-on: var(--_sh2); display: grid; grid-template-columns: 120px minmax(0, 1fr) 22px; align-items: center; gap: 20px; padding: 14px 20px 14px 14px; } .sc-card--p3 .sc-card__media { border-radius: 12px; background: var(--sc-line); } .sc-card--p3 .sc-card__t { font-size: 18px; } .sc-card--p3 .sc-card__d { margin-top: 4px; } @media (max-width: 560px) { .sc-card--p3 { grid-template-columns: 88px minmax(0, 1fr) 20px; gap: 14px; padding: 12px 14px 12px 12px; } .sc-card--p3 .sc-card__d { font-size: 14.5px; } } /* P4 사진 아래쪽에 흰 판이 겹쳐 올라앉음. 올리면 판만 3px 더 올라옴 */ .sc-card--p4 { --_lift: 0px; --_bg: transparent; } .sc-card--p4 .sc-card__media { border-radius: 16px; background: var(--sc-line); box-shadow: var(--_sh1); } .sc-card--p4 .sc-card__body { position: relative; margin: -64px 16px 0; padding: 20px 22px 22px; border-radius: 14px; background: var(--sc-surface); box-shadow: var(--_sh2); transition: transform .3s var(--sc-ease), box-shadow .3s var(--sc-ease); } .sc-card--p4 .sc-card__tag { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--_soft); } .sc-card--p4 .sc-card__t { margin-top: 10px; } .sc-card--p4:is(:hover, :focus-visible) .sc-card__body { transform: translateY(-3px); box-shadow: var(--_sh3); } .sc-card--p4:focus-visible { outline-offset: 4px; } /* ── S 절차(링크·hover 없음) ── */ .sc-steps { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; } .sc-step { margin: 0; min-width: 0; } .sc-step__t { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--sc-brand); } .sc-step__d { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--sc-muted); } .sc-step__n { font-variant-numeric: tabular-nums; } /* S1 큰 숫자 + 얇은 카드 */ .sc-steps--s1 { gap: 20px; } @media (min-width: 640px) { .sc-steps--s1 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sc-steps--s1 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sc-steps--s1 .sc-step { padding: 24px 22px 26px; border: 1px solid var(--sc-line-soft); border-radius: 16px; background: var(--sc-surface); } .sc-steps--s1 .sc-step__n { display: block; margin-bottom: 16px; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--sc-accent-text); } /* S2 번호 원을 잇는 연결선(모바일 세로 → 900px부터 가로). 원 둘레 띠 색 = 섹션 바탕(--sc-steps-ring) */ .sc-steps--s2 { position: relative; gap: 18px; } .sc-steps--s2::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--sc-accent-line); } .sc-steps--s2 .sc-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; } .sc-steps--s2 .sc-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sc-brand); color: var(--sc-on-dark); font-size: 18px; font-weight: 800; box-shadow: 0 0 0 6px var(--sc-steps-ring, var(--sc-tint)); } .sc-steps--s2 .sc-step__card { padding: 20px 22px; border-radius: 16px; background: var(--sc-surface); box-shadow: var(--_sh1); } @media (min-width: 900px) { .sc-steps--s2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .sc-steps--s2::before { left: 12.5%; right: 12.5%; top: 27px; bottom: auto; width: auto; height: 2px; } .sc-steps--s2 .sc-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; justify-items: center; gap: 18px; } .sc-steps--s2 .sc-step__n { align-self: start; } .sc-steps--s2 .sc-step__card { width: 100%; text-align: center; } } /* S3 카드 사이 화살표(모바일 아래쪽 → 1024px부터 오른쪽). 마지막 단계(is-last)는 짙은 카드 */ .sc-steps--s3 { gap: 44px; } .sc-steps--s3 .sc-step { position: relative; display: flex; } .sc-steps--s3 .sc-step__card { flex: 1 1 auto; min-width: 0; padding: 24px 22px; border-radius: 16px; background: var(--sc-steps-bg, var(--sc-tint)); } .sc-steps--s3 .sc-step__n { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--sc-accent-text); } .sc-steps--s3 .sc-step.is-last .sc-step__card { background: linear-gradient(140deg, var(--sc-brand), var(--sc-brand-strong)); } .sc-steps--s3 .sc-step.is-last .sc-step__n { color: var(--sc-accent); } .sc-steps--s3 .sc-step.is-last .sc-step__t { color: var(--sc-on-dark); } .sc-steps--s3 .sc-step.is-last .sc-step__d { color: var(--sc-on-dark-muted); } .sc-step__arrow { position: absolute; z-index: 1; left: 50%; bottom: -40px; display: grid; place-items: center; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--sc-accent-line); color: var(--sc-accent-text); transform: rotate(90deg); } .sc-step__arrow .sc-ic { width: 18px; height: 18px; } @media (min-width: 1024px) { .sc-steps--s3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .sc-step__arrow { left: auto; right: -38px; bottom: auto; top: 50%; margin: -18px 0 0; transform: none; } } /* ── A 인물(변호사·원장) ── */ .sc-person { color: var(--sc-ink); } .sc-person__role { font-size: 13px; font-weight: 700; color: var(--sc-accent-text); } .sc-person__name { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--sc-brand); } .sc-person__name small { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--sc-muted); } .sc-person__list { margin: 0; padding: 0; list-style: none; } .sc-person__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.6; color: var(--sc-ink); } .sc-person__list li + li { margin-top: 8px; } .sc-person__list .sc-ic { width: 20px; height: 20px; margin-top: 3px; color: var(--sc-accent-text); } /* A1 누끼 사진이 카드 윗선 위로 튀어나옴 + 뒤 아치. 카드 전체가 소개 페이지 링크 */ .sc-person--a1 { --_r: 24px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 80px; padding: 0 clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 32px); border-radius: var(--_r); background: linear-gradient(135deg, var(--sc-surface) 0%, var(--_wash) 100%); box-shadow: var(--_sh1); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--sc-ease), box-shadow .3s var(--sc-ease); } .sc-person--a1:is(:hover, :focus-visible) { transform: translateY(-3px); box-shadow: var(--_sh2); } .sc-person--a1:focus-visible { outline: 3px solid var(--sc-focus); outline-offset: 3px; border-radius: var(--_r); } .sc-person--a1 .sc-person__photo { position: relative; display: flex; align-items: flex-end; justify-content: center; } .sc-person--a1 .sc-person__photo::before { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 74%; border-radius: 200px 200px 0 0; background: linear-gradient(180deg, var(--sc-tint-2) 0%, var(--sc-accent-hi) 100%); } .sc-person__cut { position: relative; display: block; width: 88%; max-width: 300px; height: auto; margin-top: -80px; } .sc-person--a1 .sc-person__body { align-self: center; min-width: 0; padding: 40px 0; } .sc-person--a1 .sc-person__role { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--_soft); } .sc-person--a1 .sc-person__name { margin-top: 12px; font-size: clamp(30px, 3.4vw, 38px); } .sc-person__lead { margin: 12px 0 20px; font-size: 16px; line-height: 1.6; color: var(--sc-muted); } .sc-person__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--sc-brand-2); } .sc-person__more .sc-ic { width: 18px; height: 18px; transition: transform .25s var(--sc-ease); } .sc-person--a1:is(:hover, :focus-visible) .sc-person__more .sc-ic { transform: translateX(4px); } @media (max-width: 767px) { .sc-person--a1 { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 20px 28px; } .sc-person__cut { width: 70%; max-width: 240px; margin-top: -64px; } .sc-person--a1 .sc-person__photo::before { left: 50%; right: auto; width: 280px; max-width: 100%; transform: translateX(-50%); } .sc-person--a1 .sc-person__body { padding: 24px 0 0; } } /* A2 사진 + (등록 배지) + 이름·약력 + 버튼 두 개(폭 같음). 카드 자체는 링크가 아님 */ .sc-person--a2 { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--sc-card-tint, var(--sc-tint)); } .sc-person--a2 .sc-person__photo { overflow: hidden; border-radius: 16px; aspect-ratio: var(--sc-person-ratio, 639 / 800); background: var(--sc-line); } .sc-person__img { display: block; width: 100%; height: 100%; object-fit: cover; } .sc-person--a2 .sc-person__body { align-self: center; min-width: 0; } .sc-person__badges { display: flex; flex-wrap: wrap; gap: 10px; } .sc-person__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--sc-tint-2); font-size: 14px; line-height: 1.4; color: var(--sc-ink); } .sc-person__badge b { color: var(--sc-brand); } .sc-person__badge .sc-ic { width: 20px; height: 20px; color: var(--sc-accent-text); } .sc-person--a2 .sc-person__role { display: block; margin: 0; font-size: 14px; } .sc-person__badges + .sc-person__role { margin-top: 22px; } .sc-person--a2 .sc-person__name { margin: 4px 0 18px; font-size: clamp(32px, 3.6vw, 40px); } /* 버튼 칸이 글자보다 좁아지면(768~1023px 2단에서 칸 231px) 줄을 바꾼다 — 고정 2칸이면 B5 "대표전화 031-…"가 110px로 눌려 잘렸다(2026-10-21) */ .sc-person__btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), var(--sc-b5-w, 230px))); gap: 12px; margin-top: 26px; } .sc-person__btns .sc-btn { width: 100%; min-height: 56px; } @media (max-width: 767px) { .sc-person--a2 { grid-template-columns: minmax(0, 1fr); } .sc-person--a2 .sc-person__photo { max-width: 420px; } .sc-person__btns { grid-template-columns: minmax(0, 1fr); } } /* ── F1 사실 숫자(업체 사실만 — 실적·추정 숫자 금지). 누르는 카드가 아니라 hover 없음 ── */ .sc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .sc-fact { --_ic: 44px; --_ic-bg: var(--sc-surface); --_ic-c: var(--sc-brand); min-width: 0; margin: 0; padding: 22px 22px 24px; border-radius: 16px; background: var(--sc-card-tint, var(--sc-tint)); } .sc-fact:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 768px) { .sc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-fact:last-child:nth-child(odd) { grid-column: auto; } } @media (min-width: 1100px) { .sc-facts { grid-template-columns: repeat(var(--sc-facts-cols, 5), minmax(0, 1fr)); gap: 18px; } } .sc-fact__num { margin: 18px 0 0; line-height: 1.1; white-space: nowrap; color: var(--sc-brand); } .sc-fact__num b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .sc-fact__num small { margin-left: 3px; font-size: 17px; font-weight: 700; color: var(--sc-accent-text); } .sc-fact__l { margin: 10px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--sc-ink); } .sc-fact__s { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--sc-muted); } @media (max-width: 479px) { .sc-fact { padding: 18px 16px 20px; } .sc-fact__num b { font-size: 28px; } .sc-fact__l { font-size: 14.5px; } } /* ── F2 오시는 길: 아이콘 + 이름 칸(같은 폭) + 값 한 줄씩 ── */ .sc-way { --_ic: 40px; --_ic-r: 10px; --_ic-bg: var(--_soft); --_ic-c: var(--sc-brand); --_ic-svg: 22px; padding: clamp(22px, 4vw, 40px); border-radius: 20px; background: var(--sc-surface); box-shadow: var(--_sh1); } .sc-way__t { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--sc-brand); } .sc-way__sub { margin: 4px 0 0; font-size: 14.5px; font-weight: 600; color: var(--sc-accent-text); } .sc-way__list { margin: 18px 0 0; } .sc-way__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--sc-line-soft); } .sc-way__row dt { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: var(--sc-brand); } .sc-way__row dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--sc-ink); } .sc-way__btn { margin-top: 22px; } @media (max-width: 560px) { .sc-way__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .sc-way__row dd { padding-left: 52px; } .sc-way__btn { width: 100%; } } /* ── F3 상담 시간 · 전화(B5 버튼, 폭 고정). 흰 판 기본 / 짙은 판 .sc-hours--dark ── */ .sc-hours { padding: clamp(24px, 4vw, 36px); border-radius: 20px; background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--sc-line-soft), var(--_sh1); color: var(--sc-brand); } .sc-hours--dark { background: linear-gradient(150deg, var(--sc-brand) 0%, var(--sc-brand-strong) 100%); box-shadow: none; color: var(--sc-on-dark); } .sc-hours__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--sc-accent-text); } .sc-hours__k .sc-ic { width: 20px; height: 20px; } .sc-hours--dark .sc-hours__k { color: var(--sc-accent); } .sc-hours__time { margin: 10px 0 0; font-size: clamp(36px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .sc-hours__day { margin: 8px 0 0; font-size: 15px; color: var(--sc-muted); } .sc-hours--dark .sc-hours__day { color: var(--sc-on-dark-muted); } .sc-hours__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .sc-hours--dark .sc-btn:focus-visible { outline-color: var(--sc-accent); } /* ── 움직임 줄이기: 떠오름·확대·화살표 이동·빛을 끄고 색만 바꾼다 ── */ @media (prefers-reduced-motion: reduce) { .sc-card, .sc-card *, .sc-card::before, .sc-person--a1, .sc-person--a1 * { transition: none !important; } .sc-card:is(:hover, :focus-visible), .sc-card:is(:hover, :focus-visible) *, .sc-person--a1:is(:hover, :focus-visible), .sc-person--a1:is(:hover, :focus-visible) * { transform: none !important; } .sc-card--k5::before { display: none; } } /* ── site-components split/split.css ── */ /* ── 글 + 사진 분할 섹션 SP1·SP2·SP4·SP5·SP6·SP9·SP10·SP11 (site-components) ───── 필요: tokens.css, icons/icon-styles.css, buttons/buttons.css(B1 버튼), heading/numbers.css(SP2 → NU2, SP5 → NU1). JS: split.js — SP6(지금 보이는 사진 이름 진하게, 좁은 화면 넘김 줄 Tab 멈춤)·SP9(탭)만. 나머지는 CSS뿐. 쓰지 않는 안: SP3·SP7·SP8(사용자 제외), SP0(옛 반반 구조). 공통 약속 - 뿌리에 .sc-sp + 안 이름(.sc-sp1 …). 한 페이지에 분할 섹션은 서로 다른 안 2개까지. - 사진 칸(.sc-sp__ph)은 aspect-ratio·격자가 크기를 정하고 사진(img.sc-sp-fill)은 채우기만 → 불러온 뒤 높이 변화 없음. 사진마다 style="object-position: …"으로 얼굴·핵심을 맞춘다. - 버튼은 글 바로 아래 28px(.sc-sp__cta, 버튼은 buttons/의 B1). - 899px 이하는 위에서 아래로 쌓인다(안마다 순서 다름 — README 표). - 흰 작은 원·탭 바탕(--sc-sp-chip)은 틴트 섹션 기준. 흰 섹션에 두면 --sc-sp-chip: var(--sc-tint)로 바꾼다. */ .sc-sp { --sc-sp-chip: var(--sc-surface); --sc-sp-sh-sm: 0 1px 2px rgba(var(--sc-shadow-rgb), .05), 0 6px 16px rgba(var(--sc-shadow-rgb), .06); --sc-sp-sh-md: 0 2px 4px rgba(var(--sc-shadow-rgb), .05), 0 14px 30px rgba(var(--sc-shadow-rgb), .11); --sc-sp-sh-lg: 0 4px 8px rgba(var(--sc-shadow-rgb), .07), 0 22px 46px rgba(var(--sc-shadow-rgb), .16); word-break: keep-all; overflow-wrap: break-word; } .sc-sp figure, .sc-sp p, .sc-sp ul, .sc-sp ol { margin: 0; } /* 사진 칸 공통 */ .sc-sp__ph { position: relative; overflow: hidden; background: var(--sc-tint-2); } .sc-sp-fill { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* 글 칸 공통 — 라벨(짧은 선 + 영어 대문자) · H2 · 문단 */ .sc-label.sc-sp__lbl, .sc-sp__lbl { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent-text); } .sc-sp__lbl::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--sc-accent-line); } .sc-sp__h { margin: 12px 0 0; font-size: clamp(25px, 3vw, 34px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; color: var(--sc-brand); } .sc-sp .sc-sp__p { margin-top: 16px; font-size: 16.5px; line-height: 1.75; color: var(--sc-muted); } .sc-sp .sc-sp__p + .sc-sp__p { margin-top: 10px; } .sc-sp__p a { color: var(--sc-brand-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; } .sc-sp__p a:hover { color: var(--sc-brand); } .sc-sp .sc-sp__cta { margin-top: 28px; } /* 사진 위 이름표: 짙은 막 위 흰 글자라 사진이 밝아도 대비가 남는다 */ .sc-sp .sc-sp__tag { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(var(--sc-shadow-deep-rgb), .8); color: var(--sc-on-dark); font-size: 13.5px; font-weight: 600; line-height: 1.3; } .sc-sp__tag .sc-ic { width: 18px; height: 18px; color: var(--sc-accent); } /* ========== SP1 겹침 카드 — 사진 위에 흰 글 카드가 걸쳐 앉음 ========== */ .sc-sp1 { position: relative; } .sc-sp1__ph { border-radius: 22px; aspect-ratio: 4 / 3; } .sc-sp1__ph .sc-sp__tag { top: 14px; right: 14px; } .sc-sp1__card { position: relative; z-index: 1; margin: -56px 12px 0; padding: 28px 22px 26px; border-radius: 22px; background: var(--sc-surface); box-shadow: var(--sc-sp-sh-lg); } @media (min-width: 900px) { .sc-sp1 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .sc-sp1__ph { grid-column: 5 / -1; grid-row: 1; aspect-ratio: 16 / 11; border-radius: 32px; } .sc-sp1__ph .sc-sp__tag { top: auto; right: 24px; bottom: 24px; } .sc-sp1__card { grid-column: 1 / 7; grid-row: 1; margin: 0; padding: clamp(36px, 4vw, 52px); border-radius: 28px; } } /* ========== SP2 한쪽 풀블리드 — 사진이 화면 오른쪽 끝까지 ========== .wrap 밖(섹션 바로 아래)에 둔다. 100vw를 쓰지 않는다(스크롤바 폭만큼 가로 스크롤이 생김) — 섹션 폭 안에서 바깥 1fr 칸으로 오른쪽 끝에 붙인다. 글 칸 왼쪽 끝은 .wrap 글 칸과 같은 줄. */ .sc-sp2 { display: grid; grid-template-columns: var(--sc-gutter) minmax(0, 1fr); } .sc-sp2__txt { grid-column: 2; padding-right: var(--sc-gutter); } .sc-sp2__ph { grid-column: 2; margin-top: 36px; border-radius: 24px 0 0 24px; aspect-ratio: 4 / 3; } .sc-sp2 { --sc-nu2-line: var(--sc-line-strong); } .sc-sp2__facts { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--sc-nu2-line); } @media (min-width: 900px) { .sc-sp2 { --sc-sp2-cw: calc(min(var(--sc-container), 100%) - 2 * var(--sc-gutter)); grid-template-columns: minmax(0, 1fr) calc(var(--sc-sp2-cw) * 5 / 12) calc(var(--sc-sp2-cw) * 7 / 12) minmax(0, 1fr); align-items: center; } .sc-sp2__txt { grid-column: 2; grid-row: 1; padding-right: clamp(32px, 4vw, 56px); } .sc-sp2__ph { grid-column: 3 / 5; grid-row: 1; margin: 0; aspect-ratio: auto; height: clamp(460px, 44vw, 640px); border-radius: 36px 0 0 36px; } } /* ========== SP4 사진 콜라주 + 아이콘 체크 목록 ========== */ .sc-sp4 { display: grid; gap: 40px; align-items: center; } .sc-sp4__col { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1 / 1; } .sc-sp4__col > .sc-sp__ph { position: absolute; box-shadow: 0 0 0 6px var(--sc-surface), var(--sc-sp-sh-md); } .sc-sp4__a { left: 0; top: 8%; width: 60%; height: 80%; border-radius: 24px; } .sc-sp4__b { right: 0; top: 0; width: 44%; height: 40%; border-radius: 20px; z-index: 1; } .sc-sp4__c { right: 4%; bottom: 0; width: 50%; height: 42%; border-radius: 20px; z-index: 1; } .sc-sp4 .sc-sp4__checks { display: grid; gap: 12px; margin-top: 24px; padding: 0; list-style: none; } .sc-sp4__checks li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--sc-ink); } .sc-sp4__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sc-sp-chip); color: var(--sc-brand); } .sc-sp4__ic .sc-ic { width: 21px; height: 21px; } @media (min-width: 900px) { .sc-sp4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); } .sc-sp4__col { max-width: none; } } /* ========== SP5 벤토 격자 — 글 타일 · 사진 타일 · 사실 타일 4개(NU1) ========== 사실 타일은 heading/numbers.css의 NU1 마크업(ul.sc-nu1 > li.sc-nu1__item)을 그대로 쓰고 여기서 벤토 모양만 덧입힌다. 타일 바탕: --brand(짙은 주색) · 기본(강조 틴트) · --tint · --soft. 흰 섹션에 둔다. */ .sc-sp5 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "p" "f"; } .sc-sp5__txt { grid-area: t; padding: 28px 22px; border-radius: 24px; background: var(--sc-tint); } .sc-sp5__ph { grid-area: p; border-radius: 24px; aspect-ratio: 16 / 10; } .sc-sp5__ph .sc-sp__tag { left: 14px; bottom: 14px; } .sc-sp5 .sc-nu1 { grid-area: f; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sc-sp5 .sc-nu1__item { position: relative; display: flex; flex-direction: column; min-height: 156px; padding: 20px 18px; border-radius: 22px; background: var(--sc-tint-2); } .sc-sp5__t--tint { --sc-sp5-bg: var(--sc-tint); } .sc-sp5__t--soft { --sc-sp5-bg: var(--sc-accent-soft, var(--sc-tint)); } .sc-sp5__t--brand { --sc-sp5-bg: var(--sc-brand); } .sc-sp5 .sc-nu1__item[class*="sc-sp5__t--"] { background: var(--sc-sp5-bg); } .sc-sp5__ico { position: absolute; top: 18px; right: 18px; color: var(--sc-accent-text); } .sc-sp5 .sc-nu1__num { gap: 0; padding-top: 34px; font-size: clamp(30px, 3.4vw, 44px); } .sc-sp5 .sc-nu1__v, .sc-sp5 .sc-nu1__v.is-long { font-size: 1em; line-height: 1.05; letter-spacing: -.02em; } .sc-sp5 .sc-nu1__pre, .sc-sp5 .sc-nu1__u { margin: 0 2px; font-size: .42em; font-weight: 700; color: var(--sc-accent-text); } .sc-sp5 .sc-nu1 .sc-nu1__t { margin-top: 10px; font-size: 15px; line-height: 1.35; color: var(--sc-ink); } .sc-sp5 .sc-nu1 .sc-nu1__d { margin-top: 3px; font-size: 13.5px; line-height: 1.45; } .sc-sp5__t--brand .sc-sp5__ico, .sc-sp5 .sc-sp5__t--brand .sc-nu1__pre, .sc-sp5 .sc-sp5__t--brand .sc-nu1__u { color: var(--sc-accent); } .sc-sp5 .sc-sp5__t--brand .sc-nu1__v, .sc-sp5 .sc-nu1 .sc-sp5__t--brand .sc-nu1__t { color: var(--sc-on-dark); } .sc-sp5 .sc-nu1 .sc-sp5__t--brand .sc-nu1__d { color: var(--sc-on-dark-muted); } @media (min-width: 900px) { /* 원래 5칸 격자(글 2칸 · 사진 3칸, 칸 사이 16px)와 같은 폭 */ .sc-sp5 { gap: 16px; grid-template-columns: calc((100% - 64px) * 2 / 5 + 16px) minmax(0, 1fr); grid-template-areas: "t p" "f p"; } .sc-sp5__txt { padding: clamp(32px, 3.4vw, 44px); border-radius: 28px; } .sc-sp5__ph { aspect-ratio: auto; min-height: 100%; border-radius: 28px; } .sc-sp5__ph .sc-sp__tag { left: 22px; bottom: 22px; } .sc-sp5 .sc-nu1 { gap: 16px; } .sc-sp5 .sc-nu1__item { min-height: 180px; padding: 24px; border-radius: 24px; } .sc-sp5__ico { top: 22px; right: 22px; } } /* ========== SP6 스티키 글 + 스크롤로 지나가는 사진 ========== 900px 이상: 왼쪽 글이 제자리(sticky)에 머물고 오른쪽 사진이 캡션과 함께 지나간다. 화면 가운데 사진 이름이 목록에서 진해진다(색·투명도만). 899px 이하: sticky·목록을 끄고 사진은 옆으로 넘기는 줄(스냅) — 섹션이 세로로 길어지지 않는다. sticky 위치 --sc-sp6-top(기본: 고정 헤더 높이 + 24px). */ .sc-sp6 { display: grid; gap: 32px; } .sc-sp6 .sc-sp6__list { display: none; } .sc-sp6__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; margin: 0 calc(-1 * var(--sc-gutter)); padding: 0 var(--sc-gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--sc-gutter); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .sc-sp6__fig { scroll-snap-align: start; } .sc-sp6__ph { border-radius: 20px; aspect-ratio: 4 / 3; } .sc-sp6__fig figcaption { display: flex; gap: 10px; margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--sc-muted); } .sc-sp6__fig figcaption b { flex: none; font-weight: 800; color: var(--sc-accent-text); font-variant-numeric: tabular-nums; } .sc-sp6__fig figcaption strong { color: var(--sc-brand); } @media (min-width: 900px) { .sc-sp6 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); align-items: start; } .sc-sp6__stick { position: -webkit-sticky; position: sticky; top: var(--sc-sp6-top, calc(var(--sc-header-h) + 24px)); } .sc-sp6 .sc-sp6__list { display: grid; gap: 2px; margin-top: 40px; padding: 24px 0 0; border-top: 1px solid var(--sc-line); list-style: none; } .sc-sp6__list li { display: flex; align-items: center; gap: 14px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--sc-muted); opacity: .62; transition: opacity .3s, color .3s; } .sc-sp6__list li b { font-size: 13px; font-weight: 800; color: var(--sc-accent-text); font-variant-numeric: tabular-nums; } .sc-sp6__list li::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--sc-accent-line); transform: scale(0); transition: transform .3s var(--sc-ease); } .sc-sp6__list li.is-on { opacity: 1; color: var(--sc-brand); } .sc-sp6__list li.is-on::after { transform: scale(1); } .sc-sp6__rail { grid-auto-flow: row; grid-auto-columns: auto; gap: clamp(40px, 5vw, 64px); margin: 0; padding: 0; overflow: visible; } .sc-sp6__ph { border-radius: 28px; } } /* ========== SP9 탭으로 사진 바꾸기 ========== 사진 칸은 높이 고정(aspect-ratio), 사진은 한 칸에 겹쳐 투명도만 바뀐다 → 탭을 바꿔도 아래가 밀리지 않는다. JS가 없으면 첫 사진만 보이고 탭 줄은 숨는다. 틴트 섹션에 둔다(탭 바탕이 반투명 흰색). */ .sc-sp9 { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "stage" "tabs" "btn"; } .sc-sp9__txt { grid-area: txt; } .sc-sp9__stage { grid-area: stage; position: relative; margin-top: 28px; border-radius: 22px; aspect-ratio: 4 / 3; } .sc-sp9__pn { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--sc-ease); } .sc-sp9__pn.is-on { opacity: 1; } .sc-sp9__pn .sc-sp__tag { left: 14px; bottom: 14px; } .sc-sp9__tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(var(--sc-sp9-n, 3), minmax(0, 1fr)); gap: 8px; margin-top: 14px; } html:not(.sc-js) .sc-sp9__tabs { display: none; } .sc-sp9__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 6px; border: 0; border-radius: 16px; background: var(--sc-sp9-tab-bg, rgba(255, 255, 255, .55)); color: var(--sc-muted); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; } .sc-sp9__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sc-tint-2); color: var(--sc-brand); transition: background-color .25s, color .25s; } .sc-sp9__ic .sc-ic { width: 20px; height: 20px; } .sc-sp9__tab small { display: none; } .sc-sp9__tab:hover { background: var(--sc-surface); color: var(--sc-brand); } .sc-sp9__tab[aria-selected="true"] { background: var(--sc-surface); color: var(--sc-brand); box-shadow: var(--sc-sp-sh-sm); } .sc-sp9__tab[aria-selected="true"] .sc-sp9__ic { background: var(--sc-brand); color: var(--sc-on-dark); } .sc-sp9 .sc-sp9__btn { grid-area: btn; justify-self: start; } @media (min-width: 900px) { /* 사진 칸이 왼쪽 글보다 높아도 늘어난 높이는 위아래 1fr 줄이 받는다 — 글·탭·버튼 사이가 벌어지지 않는다 */ .sc-sp9 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". stage" "txt stage" "tabs stage" "btn stage" ". stage"; column-gap: clamp(48px, 6vw, 88px); } .sc-sp9__stage { margin: 0; border-radius: 32px; } .sc-sp9__pn .sc-sp__tag { left: 22px; bottom: 22px; } .sc-sp9__tabs { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 28px; } .sc-sp9__tab { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 64px; padding: 10px 16px 10px 12px; background: transparent; font-size: 16px; text-align: left; } .sc-sp9__ic { width: 42px; height: 42px; } .sc-sp9__tab > span:last-child { display: flex; flex-direction: column; } .sc-sp9__tab small { display: block; font-size: 13px; font-weight: 500; color: var(--sc-muted); } .sc-sp9__tab:hover { background: rgba(255, 255, 255, .6); } .sc-sp9__tab[aria-selected="true"] { background: var(--sc-surface); } } /* ========== SP10 사진 마스크 형태 — 위가 둥근 아치 + 한 모서리만 크게 깎은 사진 ========== */ .sc-sp10 { display: grid; gap: 40px; align-items: center; } .sc-sp10__media { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1 / 1.08; } .sc-sp10__shape { position: absolute; right: 0; top: 6%; width: 62%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--sc-tint-2); } .sc-sp10__line { position: absolute; left: 12%; top: 0; width: 62%; height: 86%; border: 1.5px solid var(--sc-accent-line); border-radius: 999px 999px 32px 32px; } .sc-sp10__media > .sc-sp__ph { position: absolute; } .sc-sp10__main { left: 4%; top: 4%; width: 62%; height: 86%; border-radius: 999px 999px 32px 32px; box-shadow: var(--sc-sp-sh-md); } .sc-sp10__sub { right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1; border-radius: 24px 24px 24px 104px; box-shadow: 0 0 0 6px var(--sc-surface), var(--sc-sp-sh-lg); } .sc-sp .sc-sp10__addr { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--sc-tint); font-size: 14.5px; line-height: 1.5; color: var(--sc-ink); } .sc-sp10__addr .sc-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--sc-accent-text); } @media (min-width: 900px) { .sc-sp10 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); } .sc-sp10__media { max-width: none; } .sc-sp10__sub { border-radius: 28px 28px 28px 140px; } } @media (prefers-reduced-motion: reduce) { .sc-sp__p a, .sc-sp6__list li, .sc-sp6__list li::after, .sc-sp9__pn, .sc-sp9__tab, .sc-sp9__ic { transition: none !important; } } /* ── SP11 글 + 번호 순서 카드 + 작은 세로 사진 (2026-10-21) ───── 글만 길게 놓이는 섹션에 쓴다. 카드 = 번호 원 + 이름 한 줄 + 설명 한 문장, 3~4개(업체 사실로만). 사진은 세로 인물 사진도 그대로(4:5, 최대 300px) — 글 칸 높이와 비슷해 위아래 빈 공간이 생기지 않는다. 틴트 섹션이면 카드는 흰색(기본), 흰 섹션이면 .sc-sp11 { --sc-sp11-card: var(--sc-tint) }. */ .sc-sp11 { --sc-sp11-card: var(--sc-surface); display: grid; gap: 28px; } .sc-sp11__steps { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 24px !important; counter-reset: none; } .sc-sp11__steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--sc-sp11-card); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sc-sp-sh-sm); } .sc-sp11__no { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sc-brand); color: #fff; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .sc-sp11__t { display: block; color: var(--sc-brand); font-weight: 700; line-height: 1.4; } .sc-sp11__d { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.6; color: var(--sc-text-2, inherit); } .sc-sp11__ph { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; } .sc-sp11__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 900px) { .sc-sp11 { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 5vw, 64px); align-items: start; } } /* ── site-components cta-band/cta-band.css ── */ /* ── 상담 안내 띠 L3 (site-components) ──────────────────────────────────── 필요: tokens.css, icons/icon-styles.css. JS 없음. 원본: 2026-10-20 승전 예시 카탈로그 cta-footer.html #l3. 겉모습 그대로, 색만 변수로. - 사무실·원내 실사 1장을 띠 전체 배경으로(히어로 첫 장과 다른 사진). 왼쪽이 더 짙은 막 위에 글. - 767px 이하는 막 전체를 고르게 짙게(글이 폭 전체로 퍼지므로). - 사진은 absolute 층 + object-fit — 사진을 불러오기 전후로 띠 높이가 변하지 않는다(높이는 글이 정함). - 버튼 글자가 바뀌지 않는 링크라 폭은 글자대로, 559px 이하는 꽉 채움. */ .sc-l3 { position: relative; overflow: hidden; background: var(--sc-brand-strong); color: var(--sc-on-dark); } .sc-l3 :focus-visible { outline-color: var(--sc-accent); } .sc-l3__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--sc-l3-pos, center 60%); } .sc-l3::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--sc-overlay-rgb, var(--sc-shadow-deep-rgb)), .93) 0%, rgba(var(--sc-overlay-rgb, var(--sc-shadow-deep-rgb)), .86) 48%, rgba(var(--sc-overlay-rgb, var(--sc-shadow-deep-rgb)), .5) 100%); } .sc-l3__in { position: relative; z-index: 1; width: 100%; max-width: var(--sc-container); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--sc-gutter); } .sc-l3__in > * { max-width: 620px; } :where(.sc-l3) :where(h2, h3, p, ul) { margin: 0; } :where(.sc-l3) ul { padding: 0; list-style: none; } .sc-l3__lbl { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-accent); } .sc-l3__h { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; } .sc-l3__p { margin: 14px 0 20px; font-size: 16.5px; line-height: 1.7; color: var(--sc-on-dark-muted); } .sc-l3__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; font-weight: 600; } .sc-l3__meta li { display: inline-flex; align-items: center; gap: 8px; } .sc-l3__meta .sc-ic { width: 19px; height: 19px; color: var(--sc-accent); } .sc-l3__tnum, .sc-l3 b { font-variant-numeric: tabular-nums; } .sc-l3__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; max-width: none; } /* 버튼(원본 .btn·.btn-lav·.btn-glass) */ .sc-l3__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: transform .25s var(--sc-ease), box-shadow .25s var(--sc-ease), background-color .25s, border-color .25s, color .25s; } .sc-l3__btn b { font-weight: 800; margin-left: 2px; } .sc-l3__btn .sc-ic { width: 20px; height: 20px; } .sc-l3__btn:hover, .sc-l3__btn:focus-visible { transform: translateY(-1px); } .sc-l3__btn--accent { background: var(--sc-accent); color: var(--sc-brand-strong); } .sc-l3__btn--accent:hover, .sc-l3__btn--accent:focus-visible { background: var(--sc-accent-hi); box-shadow: 0 10px 24px rgba(var(--sc-overlay-rgb, var(--sc-shadow-deep-rgb)), .28); } .sc-l3__btn--glass { border-color: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .4); color: var(--sc-on-dark); background: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sc-l3__btn--glass:hover, .sc-l3__btn--glass:focus-visible { background: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .18); border-color: var(--sc-on-dark); } @media (max-width: 767px) { .sc-l3::after { background: rgba(var(--sc-overlay-rgb, var(--sc-shadow-deep-rgb)), .86); } } @media (max-width: 559px) { .sc-l3__btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .sc-l3__btn { transition: none; } .sc-l3__btn:hover, .sc-l3__btn:focus-visible { transform: none; } } /* ── site-components footer/footer.css ── */ /* ── 푸터 FT1 (site-components) ───────────────────────────────────────── 필요: tokens.css, icons/icon-styles.css. JS 없음. 원본: 2026-10-20 승전 예시 카탈로그 cta-footer.html #ft1. 겉모습 그대로, 색만 변수로. - 짙은 주색 4열: 사무소 정보 · 분야 목록 · 바로가기와 채널 · 연락처. 640px부터 2열, 1080px부터 4열, 그 아래 1열. - 아래 띠: 법정 표기(업종별 필수) · 면책 · 저작권. 업종별 필수 표기는 example.html 주석 참고. 변호사: 변호사 성명(또는 법인명) + 소속 지방변호사회 + 광고책임변호사 / 한의원: 의료기관 명칭 + 종별. - 링크 누르는 높이 44px. 외부 링크는 새 창 + rel="noopener" + 읽기용 "(새 창)". - 퀵바 모바일 하단 줄이 있으면 body의 padding-bottom이 푸터 아래 끝을 가리지 않게 한다(quickbar/README). */ .sc-ft1 { background: var(--sc-brand-strong); color: var(--sc-on-dark-muted); padding: clamp(56px, 7vw, 80px) 0 32px; } .sc-ft1 :focus-visible { outline-color: var(--sc-accent); } :where(.sc-ft1) :where(h2, h3, p, ul) { margin: 0; } :where(.sc-ft1) ul { padding: 0; list-style: none; } :where(.sc-ft1) a { color: inherit; text-decoration: none; } .sc-ft1__wrap { width: 100%; max-width: var(--sc-container); margin: 0 auto; padding-inline: var(--sc-gutter); } .sc-ft1__grid { display: grid; gap: 40px 32px; grid-template-columns: 1fr; } @media (min-width: 640px) { .sc-ft1__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .sc-ft1__grid { grid-template-columns: 1.25fr 1.55fr .9fr 1.2fr; } } .sc-ft1 .sc-ic { width: 18px; height: 18px; flex: none; } .sc-ft1__tnum { font-variant-numeric: tabular-nums; } /* 1열 사무소 정보 */ .sc-ft1__logo { display: inline-flex; min-height: 44px; align-items: center; } .sc-ft1__logo img { width: var(--sc-ft1-logo-w, 176px); height: auto; } .sc-ft1__tag { margin-top: 18px; font-size: 14.5px; line-height: 1.7; color: var(--sc-on-dark); font-weight: 600; } .sc-ft1__addr { display: flex; gap: 8px; margin-top: 16px; font-size: 14.5px; line-height: 1.65; } .sc-ft1__addr .sc-ic { margin-top: 3px; color: var(--sc-accent); } .sc-ft1__addr small { font-size: 13.5px; color: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .66); } /* 열 제목·링크 */ .sc-ft1__h { margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--sc-accent); } .sc-ft1__h2 { margin-top: 22px; } .sc-ft1__areas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } .sc-ft1__a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 14.5px; color: var(--sc-on-dark-muted); transition: color .2s; } .sc-ft1__a:hover, .sc-ft1__a:focus-visible { color: var(--sc-on-dark); text-decoration: underline; text-underline-offset: 4px; } .sc-ft1 .sc-ft1__ext { width: 14px; height: 14px; margin-left: 4px; opacity: .8; } /* 4열 연락처 */ .sc-ft1__contact li { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 14.5px; } .sc-ft1__contact .sc-ic { width: 17px; height: 17px; color: var(--sc-accent); } .sc-ft1__k { min-width: 56px; color: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .66); font-size: 13.5px; } .sc-ft1__contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sc-on-dark); font-weight: 600; } .sc-ft1__contact a:hover, .sc-ft1__contact a:focus-visible { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 4px; } /* 아래 띠 — 법정 표기 · 면책 · 저작권 */ .sc-ft1__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(var(--sc-accent-rgb, 169, 166, 234), .2); color: rgba(var(--sc-on-dark-rgb, 255, 255, 255), .66); } .sc-ft1__legal { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; line-height: 1.7; } .sc-ft1__legal > span:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 11px; margin: 0 12px; background: currentColor; opacity: .35; vertical-align: -1px; } .sc-ft1__disc { margin-top: 8px; font-size: 13.5px; line-height: 1.7; } .sc-ft1__copy { margin-top: 6px; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .sc-ft1__a { transition: none; } } /* 화면에는 숨기고 읽기 프로그램에는 읽히는 글자 — nav/nav.css와 같은 규칙 */ .sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── site-components quickbar/quickbar.css ── */ /* ── 퀵바 QB2·QB3 (site-components) ───────────────────────────────────── 필요: tokens.css, icons/icon-styles.css. JS 없음("맨 위로"는 href="#top"). 원본: 2026-10-20 승전 예시 카탈로그 quickbars.html #qb2·#qb3(예시 상자 안 absolute → 실제 페이지용 fixed). 마크업 하나로 두 모양: 900px 이상 = 오른쪽 가운데 세로 타일 / 899px 이하 = 화면 아래 고정 줄 + 그 위 오른쪽 "맨 위로" 원. - 항목은 li 하나씩 바꿔 끼운다. 모양은 a의 data-qb로: data-qb="call"(채움) · "top"(맨 위로) · 그 밖(map·hours·blog·mag …)은 보통 칸. - 모바일 줄 칸 수는 항목 수대로 자동(맨 위로는 줄 밖 원). 5칸 기준, 360px에서 6칸까지. - 본문이 가려지지 않게 899px 이하에서 body(또는 마지막 요소)에 아래 여백을 잡는다 — .sc-qb-space--qb2 / --qb3 (README). - 퀵바는 헤더(z 50)보다 아래(z 40): 모바일 메뉴(D5)가 열리면 퀵바 위를 덮는다. */ .sc-qb { position: fixed; z-index: 40; right: 20px; top: 50%; transform: translateY(-50%); } .sc-qb__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .sc-qb__t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--sc-brand); text-decoration: none; -webkit-tap-highlight-color: transparent; } .sc-qb__t .sc-ic { width: 23px; height: 23px; } .sc-qb__lb { display: block; white-space: nowrap; } .sc-qb :focus-visible { outline-offset: 3px; } /* ================= QB2 흰 유리 타일 — 전화만 주색 채움 ================= */ .sc-qb--qb2 .sc-qb__list { gap: 10px; } .sc-qb--qb2 .sc-qb__t { width: 70px; height: 62px; border-radius: 16px; background: rgba(var(--sc-surface-rgb, 255, 255, 255), .78); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(var(--sc-surface-rgb, 255, 255, 255), .75); box-shadow: inset 0 1px 0 rgba(var(--sc-surface-rgb, 255, 255, 255), .7), 0 8px 22px rgba(var(--sc-shadow-rgb), .16); transition: transform .25s var(--sc-ease), background-color .25s, box-shadow .25s; } .sc-qb--qb2 .sc-qb__t[data-qb="call"] { background: var(--sc-brand); color: var(--sc-on-dark); border-color: var(--sc-brand); } .sc-qb--qb2 .sc-qb__t[data-qb="top"] { height: 44px; margin-top: 4px; } .sc-qb--qb2 .sc-qb__t:hover, .sc-qb--qb2 .sc-qb__t:focus-visible { transform: translateY(-2px); background: rgba(var(--sc-surface-rgb, 255, 255, 255), .95); box-shadow: inset 0 1px 0 rgba(var(--sc-surface-rgb, 255, 255, 255), .7), 0 12px 28px rgba(var(--sc-shadow-rgb), .22); } .sc-qb--qb2 .sc-qb__t[data-qb="call"]:hover, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:focus-visible { background: var(--sc-brand-hi); } /* ================= QB3 흰 바탕 선 테두리 타일 — hover 때 채움, 전화는 처음부터 채움 ================= */ .sc-qb--qb3 .sc-qb__list { gap: 8px; } .sc-qb--qb3 .sc-qb__t { width: 68px; height: 62px; border-radius: 14px; background: var(--sc-surface); border: 1.5px solid var(--sc-brand); transition: transform .25s var(--sc-ease), background-color .25s, color .25s, box-shadow .25s; } .sc-qb--qb3 .sc-qb__t[data-qb="call"] { background: var(--sc-brand); color: var(--sc-on-dark); } .sc-qb--qb3 .sc-qb__t[data-qb="top"] { height: 44px; margin-top: 8px; border-color: var(--sc-line-strong); color: var(--sc-muted); } .sc-qb--qb3 .sc-qb__t:hover, .sc-qb--qb3 .sc-qb__t:focus-visible { transform: translateY(-2px); background: var(--sc-brand); color: var(--sc-on-dark); border-color: var(--sc-brand); box-shadow: 0 2px 4px rgba(var(--sc-shadow-rgb), .05), 0 14px 30px rgba(var(--sc-shadow-rgb), .11); } .sc-qb--qb3 .sc-qb__t[data-qb="call"]:hover, .sc-qb--qb3 .sc-qb__t[data-qb="call"]:focus-visible { background: var(--sc-brand-hi); } /* ================= 899px 이하: 아래 고정 줄 ================= */ @media (max-width: 899px) { .sc-qb { left: 0; right: 0; top: auto; bottom: 0; transform: none; } .sc-qb__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .sc-qb__t { gap: 3px; min-width: 0; font-size: 12px; } .sc-qb__t .sc-ic { width: 21px; height: 21px; } .sc-qb :focus-visible { outline-offset: -3px; } /* 맨 위로: 줄 밖, 줄 위 오른쪽 12px 떨어진 원(44px) */ .sc-qb__top { position: absolute; right: 12px; bottom: calc(100% + 12px); } .sc-qb .sc-qb__t[data-qb="top"] { width: 44px; height: 44px; margin: 0; border-radius: 50%; background: var(--sc-surface); color: var(--sc-brand); border: 1px solid var(--sc-line-strong); box-shadow: 0 2px 4px rgba(var(--sc-shadow-rgb), .05), 0 14px 30px rgba(var(--sc-shadow-rgb), .11); transition: transform .25s var(--sc-ease), background-color .25s, color .25s; } .sc-qb .sc-qb__t[data-qb="top"] .sc-ic { width: 20px; height: 20px; } .sc-qb .sc-qb__t[data-qb="top"]:hover, .sc-qb .sc-qb__t[data-qb="top"]:focus-visible { transform: translateY(-2px); background: var(--sc-brand); color: var(--sc-on-dark); border-color: var(--sc-brand); } .sc-qb .sc-qb__t[data-qb="top"]:focus-visible { outline-offset: 3px; } /* QB2 모바일: 유리 띠(64px) 안 칸, 전화 칸만 주색 둥근 칸 */ .sc-qb--qb2 { height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(var(--sc-surface-rgb, 255, 255, 255), .78); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-top: 1px solid rgba(var(--sc-surface-rgb, 255, 255, 255), .8); box-shadow: 0 -8px 22px rgba(var(--sc-shadow-rgb), .12); } .sc-qb--qb2 .sc-qb__list { height: 100%; gap: 0; } .sc-qb--qb2 .sc-qb__t { width: auto; height: 100%; border: 0; border-radius: 14px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .2s, color .2s; } .sc-qb--qb2 .sc-qb__t[data-qb="call"] { background: var(--sc-brand); } .sc-qb--qb2 .sc-qb__t:hover, .sc-qb--qb2 .sc-qb__t:focus-visible { transform: none; background: rgba(var(--sc-surface-rgb, 255, 255, 255), .9); box-shadow: none; } .sc-qb--qb2 .sc-qb__t[data-qb="call"]:hover, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:focus-visible { background: var(--sc-brand-hi); } .sc-qb--qb2 .sc-qb__t[data-qb="top"] { background: rgba(var(--sc-surface-rgb, 255, 255, 255), .78); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: rgba(var(--sc-surface-rgb, 255, 255, 255), .7); } /* QB3 모바일: 흰 바탕 띠 위 따로 떨어진 선 타일(58px) */ .sc-qb--qb3 { padding: 18px 8px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--sc-surface) 72%, rgba(var(--sc-surface-rgb, 255, 255, 255), 0)); } .sc-qb--qb3 .sc-qb__list { gap: 6px; } .sc-qb--qb3 .sc-qb__t { width: auto; height: 58px; border-radius: 12px; transition: background-color .2s, color .2s; } .sc-qb--qb3 .sc-qb__t:hover, .sc-qb--qb3 .sc-qb__t:focus-visible { transform: none; box-shadow: none; } .sc-qb--qb3 .sc-qb__t[data-qb="top"] { border: 1.5px solid var(--sc-brand); box-shadow: none; } /* 본문 아래 여백 — 마지막 줄이 퀵바에 가려지지 않게(body 또는 마지막 요소에) */ .sc-qb-space--qb2 { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } .sc-qb-space--qb3 { padding-bottom: calc(86px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .sc-qb__t { transition: none !important; } .sc-qb__t:hover, .sc-qb__t:focus-visible, .sc-qb .sc-qb__t[data-qb="top"]:hover, .sc-qb .sc-qb__t[data-qb="top"]:focus-visible { transform: none !important; } } /* 화면에는 숨기고 읽기 프로그램에는 읽히는 글자 — nav/nav.css와 같은 규칙 */ .sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ── site-components guide/guide.css ── */ /* ── 하단 "안내 콘텐츠" 섹션 GC0 · GC4 (site-components) ──────────────────── 원본: 2026-10-20 승전 예시 카탈로그 _preview/guide-thumbs.html #gc0 · #gc4. 정본 규칙: references/build/guide-cards.md. 필요: tokens.css, icons/icon-styles.css. GC4만 JS(guide/guide.js) — 없으면 가로 스크롤(scroll-snap)로 밀기만. 섹션에는 꼭 class="guide-cards"를 단다(build-lint 1-g가 이 클래스로 켜진다). 카드 = 다른 페이지 하나: 하나 안에 썸네일 (1:1, width·height·alt·lazy) + 제목 + 한 줄 + "자세히 보기". 섹션 안의 는 모두 카드로 센다 — 카드 말고 다른 링크를 섹션 안에 두지 않는다. 숨는 카드 없음(ItemList와 1:1). 모바일(899px 이하) 가로 밀기는 컨테이너 좌우 여백만큼 바깥으로 뺀다: 여백이 --sc-gutter와 다르면 --sc-gc-bleed를 준다. */ /* ── 공통 ── */ .sc-gc__head { margin-bottom: 24px; } .sc-gc__label { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--sc-accent-text); } .sc-gc__h { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; color: var(--sc-brand); } .sc-gc__list { margin: 0; padding: 0; list-style: none; } .sc-gc__list > li { display: flex; min-width: 0; } .sc-gc__card { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; } /* 썸네일 칸은 1:1로 자리를 미리 잡는다 */ .sc-gc__img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sc-line); } .sc-gc__img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; } .sc-gc__body { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 20px; } .sc-gc__t { font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; color: var(--sc-brand); } /* 한 줄 소개는 두 줄 높이로 고정 — 카드 높이가 모두 같다 */ .sc-gc__d { height: calc(1.6em * 2); overflow: hidden; font-size: 15px; line-height: 1.6; color: var(--sc-muted); overflow-wrap: anywhere; /* 좁은 카드(320px)에서 "공사대금·소유권이전등기" 같은 긴 묶음이 옆으로 잘리지 않게 (2026-10-21) */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .sc-gc__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 14.5px; font-weight: 700; color: var(--sc-brand-2); } .sc-gc__more .sc-ic { width: 18px; height: 18px; transition: transform .25s var(--sc-ease); } .sc-gc__card:hover .sc-gc__more .sc-ic, .sc-gc__card:focus-visible .sc-gc__more .sc-ic { transform: translateX(4px); } /* ── GC0 3열 + 썸네일 아래 연한 판(기본). 흰 섹션엔 틴트 판, 틴트 섹션엔 .sc-gc--on-tint(흰 판) ── */ .sc-gc--0 .sc-gc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; } .sc-gc--0 .sc-gc__card { border: 1px solid var(--sc-line); border-radius: 14px; overflow: hidden; background: var(--sc-gc-card, var(--sc-tint)); transition: transform .25s var(--sc-ease), box-shadow .25s var(--sc-ease), border-color .25s; } .sc-gc--0.sc-gc--on-tint { --sc-gc-card: var(--sc-surface); } .sc-gc--0 .sc-gc__body { gap: 8px; } .sc-gc--0 .sc-gc__card:hover, .sc-gc--0 .sc-gc__card:focus-visible { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(var(--sc-shadow-rgb), .06), 0 14px 32px rgba(var(--sc-shadow-rgb), .12); border-color: var(--sc-accent-line); } .sc-gc--0 .sc-gc__card:focus-visible { border-radius: 14px; } /* ── GC4 캐러셀 3장 보기, 화살표는 제목 오른쪽, 자동 넘김 없음, 끝에서 버튼 흐려짐 ── */ .sc-gc--4 .sc-gc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .sc-gc__nav { display: flex; gap: 8px; flex: none; } html:not(.sc-js) .sc-gc__nav { display: none; } .sc-gc__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(var(--sc-shadow-rgb), .18); border-radius: 50%; background: var(--sc-surface); color: var(--sc-brand); cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--sc-ease), opacity .25s; } .sc-gc__btn .sc-ic { width: 22px; height: 22px; } .sc-gc__btn:hover { background: var(--sc-brand); color: var(--sc-on-dark); transform: translateY(-1px); } .sc-gc__btn[aria-disabled="true"] { opacity: .38; cursor: default; } .sc-gc__btn[aria-disabled="true"]:hover { background: var(--sc-surface); color: var(--sc-brand); transform: none; } .sc-gc--4 .sc-gc__list { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* 카드 그림자가 잘리지 않게 아래로 넉넉히, 그만큼 바깥 간격은 되돌린다 */ padding-block: 6px 28px; margin-bottom: -22px; } .sc-gc--4 .sc-gc__list::-webkit-scrollbar { display: none; } .sc-gc--4 .sc-gc__list.is-drag { scroll-snap-type: none; cursor: grabbing; -webkit-user-select: none; user-select: none; } .sc-gc--4 .sc-gc__list:focus-visible { outline-offset: 4px; border-radius: 18px; } .sc-gc--4 .sc-gc__list > li { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; } .sc-gc--4 .sc-gc__card { border-radius: 18px; overflow: hidden; background: var(--sc-gc-card, var(--sc-surface)); box-shadow: 0 1px 2px rgba(var(--sc-shadow-rgb), .05), 0 6px 16px rgba(var(--sc-shadow-rgb), .06); transition: transform .3s var(--sc-ease), box-shadow .3s var(--sc-ease); } .sc-gc--4 .sc-gc__body { gap: 6px; } .sc-gc--4 .sc-gc__card:hover, .sc-gc--4 .sc-gc__card:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(var(--sc-shadow-rgb), .06), 0 14px 32px rgba(var(--sc-shadow-rgb), .12); } .sc-gc--4 .sc-gc__card:focus-visible { outline-offset: -3px; border-radius: 18px; } /* ── 폭에 따라 ── */ @media (min-width: 900px) and (max-width: 1099px) { .sc-gc--0 .sc-gc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-gc--4 .sc-gc__list > li { flex-basis: calc((100% - 20px) / 2); } } /* 899px 이하: 둘 다 줄 안에서만 가로로 밀린다(페이지는 가로로 안 밀림). 다음 카드가 조금 보이게 */ @media (max-width: 899px) { .sc-gc--0 .sc-gc__list, .sc-gc--4 .sc-gc__list { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--sc-gc-bleed, var(--sc-gutter)) * -1); padding-inline: var(--sc-gc-bleed, var(--sc-gutter)); scroll-padding-inline: var(--sc-gc-bleed, var(--sc-gutter)); } .sc-gc--0 .sc-gc__list { padding-bottom: 12px; } .sc-gc--0 .sc-gc__list > li { flex: 0 0 min(76%, 300px); scroll-snap-align: start; } .sc-gc--4 .sc-gc__list > li { flex: 0 0 min(44%, 320px); } } @media (max-width: 640px) { .sc-gc--4 .sc-gc__list > li { flex: 0 0 80%; } .sc-gc__btn { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .sc-gc__card, .sc-gc__more .sc-ic, .sc-gc__btn { transition: none; } .sc-gc__card:hover, .sc-gc__card:focus-visible, .sc-gc__btn:hover, .sc-gc__card:hover .sc-gc__more .sc-ic, .sc-gc__card:focus-visible .sc-gc__more .sc-ic { transform: none; } } /* ── 승전 사이트 맞춤 sc-theme.css ── */ /* 승전 사이트 맞춤 — 공용 디자인 부품(site-components, 2026-10-20 modern-design.md 2-1)을 이 사이트 색·여백에 맞춘다. 빌드가 부품 CSS 뒤에 이어 붙인다(public/assets/css/sc.css 맨 끝) — 부품 파일 자체는 고치지 않는다. 새 색 없음: 모두 style.css의 기존 색 변수(네이비 --brown-*, 라벤더 --gold-*, 섹션 --ivory·--sand)를 --sc-* 토큰으로 옮긴 것. 부품(성격: 차분·신뢰형) 1차: 메뉴 N2 · 드롭다운 D4 + 모바일 D5 · 아이콘 칸 I2 · 버튼 B1 + 전화 B5 · 형광펜 E1b · FAQ E3a · 탭 E8 (E5 등장은 site.js 정본 코드) */ :root { --sc-brand: var(--brown-800); /* #001555 로고 네이비 */ --sc-brand-strong: var(--brown-950); /* #000c33 */ --sc-brand-hover: var(--brown-900); /* #000f40 */ --sc-brand-hi: var(--brown-700); /* #0a2470 */ --sc-brand-2: var(--brown-500); /* #233f8e 링크·아이콘 선 */ --sc-accent: var(--gold-400); /* #a9a6ea 라벤더 */ --sc-accent-hi: var(--gold-300); /* #cfcdf6 */ --sc-accent-line: var(--gold-500); /* #9c98dc */ --sc-accent-text: var(--gold-700); /* #5b55b8 흰·틴트 위 라벤더 글자 */ --sc-tint: var(--ivory); /* #eceff6 섹션 틴트 */ --sc-tint-2: var(--sand); /* #dddcf2 FAQ·강조 틴트 */ --sc-ink: var(--ink); --sc-muted: var(--muted); --sc-line: var(--line); --sc-focus: var(--brown-500); /* 밝은 바탕 초점 테두리 — style.css :focus-visible과 같은 색(흰 6.3:1) */ --sc-header-h: var(--header-h); /* 72px, 899px 이하 60px(style.css) */ --sc-gutter: var(--gutter); /* 좌우 여백 clamp — 헤더·본문·푸터 같은 칸(responsive-gutter.md 5) */ --sc-container: calc(var(--wrap) + 2 * var(--gutter)); /* .wrap과 같은 최대 폭 */ --sc-d4-cols: 3; } /* ── 헤더 N2 ── 바탕은 .sc-hd__bg 층에만. 헤더 요소 자체에는 흐림·transform을 걸지 않는다(D5 fixed 메뉴 기준이 바뀜, mobile-menu.css) */ .site-header.sc-hd { background: transparent; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } @media (min-width: 900px) { /* 옛 "헤더 A"(반투명 흰 바탕 + 흐림)를 바탕 층으로 옮김 — 높이 그대로 */ .sc-hd__bg { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } } .sc-hd__bg { border-bottom-color: var(--line); transition: box-shadow .25s var(--ease); } .site-header.is-scrolled .sc-hd__bg { box-shadow: 0 1px 0 rgba(0, 21, 85, .06), var(--shadow-sm); } /* site.js가 클래스만 붙인다 */ /* 로고 — 높이는 style.css의 --lh(로고 속 글자와 "부동산센터" 한 줄 맞춤, 사용자 2026-10-16). 부품의 고정 폭(150·124px)은 쓰지 않는다 */ .site-header .sc-hd__logo img { width: auto; } /* 대표전화 알약 — 작은 이름 위·번호 아래 두 줄(폭이 바뀌지 않게 min-width 고정, 숫자 고정폭) */ .site-header .sc-hd__tel { min-width: 176px; gap: 10px; padding: 0 18px; line-height: 1.15; } .sc-hd__tel > span { display: flex; flex-direction: column; font-size: 16px; } .sc-hd__tel small { font-size: 12.5px; font-weight: 500; color: var(--gold-300); } .sc-hd__tel:hover, .sc-hd__tel:focus-visible { color: #fff; } /* 900~1199px: 부품 기본(1099px 이하 전화 숨김) 대신 계속 보인다 — 이 구간은 퀵바가 없다. 900~1059px는 한 줄 여유 24px을 위해 둥근 아이콘 단추만(이름·번호는 aria-label) */ @media (min-width: 900px) and (max-width: 1199.98px) { .site-header .sc-hd__tel { display: inline-flex; } .sc-hd__in { gap: 14px; } .sc-m, .sc-dd__btn { padding: 0 9px; font-size: 15px; } .sc-nav--n2 .sc-m::after { left: 9px; right: 9px; } } @media (min-width: 900px) and (max-width: 1059.98px) { .site-header .sc-hd__tel { min-width: 0; width: 44px; padding: 0; } .site-header .sc-hd__tel > span { display: none; } } @media (min-width: 900px) and (max-width: 1009.98px) { .sc-hd__in { gap: 10px; } .sc-m, .sc-dd__btn { padding: 0 6px; font-size: 14.5px; } .sc-nav--n2 .sc-m::after { left: 6px; right: 6px; } } .sc-dd__chev { width: 16px; height: 16px; } /* ── 드롭다운 D4 ── 미리보기 그림(300px 변환본)은 처음 열 때까지 받지 않는다(site.js가 .sc-pv-ready). 그림 칸 150px 고정이라 글자 자리는 그대로 */ html.sc-js .sc-dd--d4:not(.sc-pv-ready) .sc-dd4__card img { display: none; } /* display:none인 lazy 그림은 브라우저가 받지 않는다 */ .sc-dd4__card > div { grid-column: 2; grid-row: 1; } /* 그림이 아직 없어도 글자는 둘째 칸 그대로 */ .sc-dd4__card img { grid-column: 1; grid-row: 1; background: var(--sand); } .sc-dd4__d { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── 모바일 메뉴 D5 ── 하단 퀵바(z 60, 62px)에 메뉴 끝이 깔리지 않게 판 아래 끝을 퀵바 위로 */ .sc-mm { bottom: var(--quick-h); } .sc-mm__call a:hover, .sc-mm__call a:focus-visible { color: #fff; } .sc-mm__list > li { margin: 0; } .sc-mm__sub li + li { margin: 0; } /* ── 아이콘 칸 I2 ── 분야·관련 카드의 아이콘 칸(.card-icon). 카드가 연회색(흰 섹션 위)이면 라벤더 틴트, 흰 카드면 연회색 틴트 — 칸이 카드에 묻히지 않게 */ .icon-cards .card-icon.sc-icbox--i2 { width: 60px; height: 60px; border-radius: 16px; background: var(--sc-tint); color: var(--sc-brand-2); margin-bottom: 18px; } .bg-white .icon-cards .card-icon.sc-icbox--i2 { background: var(--sc-tint-2); } .icon-cards .card-icon.sc-icbox--i2 .sc-ic { width: 30px; height: 30px; } .icon-cards > li.card:hover .card-icon.sc-icbox--i2, .icon-cards > li.card:focus-within .card-icon.sc-icbox--i2 { background: var(--sc-brand); color: #fff; } /* 1-1: hover 때 칸이 브랜드색으로 차고 선이 흰색 */ @media (max-width: 599px) { .icon-cards .card-icon.sc-icbox--i2 { width: 48px; height: 48px; border-radius: 14px; margin: 0; } .icon-cards .card-icon.sc-icbox--i2 .sc-ic { width: 26px; height: 26px; } } /* ── 버튼 B1 + 전화 B5 ── 폭은 고정(layout-stability): B1 최소 168px, B5 230px(긴 번호 기준) */ .cta-row .sc-btn, .band-actions .sc-btn { white-space: nowrap; } .sc-b1 { min-width: 168px; } .sc-b1, .sc-b1:hover, .sc-b1:focus-visible { color: #fff; } .sc-b1--light, .sc-b1--light:hover, .sc-b1--light:focus-visible { color: var(--brown-800); } /* 짙은 바탕(히어로·하위 머리·문의 띠) 위 보조 버튼 — B1과 같은 움직임(화살표 4px), 흰 테두리판 */ .sc-b1--ghost { background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(238, 240, 248, .55); } .sc-b1--ghost:hover, .sc-b1--ghost:focus-visible { color: #fff; box-shadow: inset 0 0 0 1.5px #fff, 0 8px 18px rgba(0, 0, 0, .25); } .sc-b5, .sc-b5:hover, .sc-b5:focus-visible { color: var(--brown-800); } .sc-b5 .sc-b5__tx small { color: var(--muted); } /* 짙은 바탕 위 초점 테두리는 밝은 라벤더(style.css와 같은 규칙) */ .hero .sc-btn:focus-visible, .page-head .sc-btn:focus-visible, .band .sc-btn:focus-visible { outline-color: var(--gold-400); } @media (max-width: 899.98px) { .hero .cta-row .sc-btn { flex: 1 1 100%; } .band-actions .sc-btn { width: 100%; } } @media (min-width: 600px) and (max-width: 899.98px) { .hero .cta-row .sc-btn { flex: 0 1 auto; min-width: 230px; } } @media (max-width: 599px) { .hero .cta-row { flex-wrap: wrap; } .hero .cta-row .sc-btn { flex: 1 1 100%; } } @media (max-width: 420px) { .cta-row .sc-btn { min-width: 0; width: 100%; } } /* ── 형광펜 E1b ── 라벤더 강조색 띠(흰·연회색 바탕 위 네이비 글자 대비 그대로) */ .sc-hl { --sc-hl-color: var(--gold-400); } /* ── FAQ E3a ── 흰 항목 + 테두리, 열린 항목은 라벤더 테두리. 답 글자는 본문 크기 */ .sc-faq--a .sc-faq__item { margin: 0; } .sc-faq__btn { font-size: 1.05rem; padding: 14px 20px; color: var(--brown-800); } .sc-faq__in > * { padding: 0 20px; font-size: 16px; line-height: 1.75; color: var(--ink); } .sc-faq__in > :last-child { padding-bottom: 20px; } .sc-faq__in a { color: var(--brown-500); } /* ── 묶음 탭 E8 ── (오시는 길 교통편) 패널 안 소제목 칸은 섹션과 반대 톤 카드 */ .sc-tabs { margin-top: 24px; } .sc-tabs__tab { color: var(--muted); } .sc-tabs__panel .sub { padding: 22px 24px; border-radius: var(--radius); } .bg-white .sc-tabs__panel .sub { background: var(--ivory); } .bg-ivory .sc-tabs__panel .sub, .bg-sand .sc-tabs__panel .sub { background: #fff; } .sc-tabs__panel .sub h3 { font-size: 1.1rem; margin-bottom: 8px; } .sc-tabs__panel .sub p:last-child { margin-bottom: 0; } @media (max-width: 420px) { .sc-tabs__tab { font-size: 14.5px; padding: 0 4px; } } /* ══ 2차 부품(2026-10-20) — 띠 TB1 · 머리 T7 · 절차 S2 · 인물 A2 · 분할 SP2 · 상담 띠 L3 · 푸터 FT1 · 퀵바 QB3 · 안내 콘텐츠 GC0 ══ */ :root { --sc-accent-rgb: 169, 166, 234; /* = --sc-accent(#a9a6ea) — 배지 테두리·푸터 선 알파 */ --sc-accent-soft: #ecebf8; /* 공용 토큰 기본값(승전 견본과 같은 값) */ --sc-accent-wash: #f4f3fc; } li + li:where(.sc-hd__menu > li, .sc-mm__list > li, .sc-tb1__r li, .sc-ft1 li, .sc-qb__list li, .sc-person__list li, .sc-l3__meta li, .sc-steps li, .sc-gc__list li) { margin-top: 0; } /* style.css li + li 간격이 부품 목록에 끼지 않게 */ .sc-tb1__r, .sc-ft1 ul, .sc-qb__list, .sc-person__list, .sc-l3__meta, .sc-gc__list, .sc-steps { padding-left: 0; } /* ── 섹션 머리 T7 ── 옛 라벨 앞 짧은 선(style.css .sec-label::before)은 T7 세로 선과 겹치므로 끈다. H2 크기는 style.css .sec h2 그대로 */ .sc-head--t7, .sc-head--g { margin-bottom: 24px; } .sc-head--t7 .sec-label { padding-left: 0; margin: 0 0 8px; background: none; } .sc-head--t7 .sec-label::before { content: none; display: none; } .sc-head--t7 .sc-head__h { margin: 0; } .sc-gc__head .sc-head--t7, .greeting-card .sc-head--t7, .sc-gc__head .sc-head--g, .greeting-card .sc-head--g { margin-bottom: 0; } /* ── 절차 S2 ── 5단계 이상은 모든 폭에서 세로(가로 4칸에 넘쳐 둘째 줄이 선 없이 떨어지지 않게). 원 둘레 띠 = 섹션 바탕 */ .bg-white .sc-steps--s2 { --sc-steps-ring: #fff; } .bg-ivory .sc-steps--s2 { --sc-steps-ring: var(--ivory); } .bg-white .sc-steps--s2 .sc-step__card { background: var(--ivory); box-shadow: none; } .sc-steps { margin: 28px 0 0; } .sc-step__t { margin: 0 0 4px; font-weight: 700; color: var(--brown-800); } .sc-step__d { margin: 0; } @media (min-width: 900px) { .sc-steps--s2.is-long { grid-template-columns: minmax(0, 1fr); gap: 18px; } .sc-steps--s2.is-long::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; } .sc-steps--s2.is-long .sc-step { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: none; justify-items: stretch; gap: 16px; align-items: start; } .sc-steps--s2.is-long .sc-step__card { text-align: left; } } /* ── 인물 A2 ── 흰 섹션 위 연회색 판, 사진 비율은 프로필 사진 실제 비율 */ .sc-person--a2 { margin-top: 32px; } .sc-person__name { font-weight: 800; } .sc-person__list { margin: 0; } /* ── 분할 SP2 ── 글 칸 문단 간격·링크는 본문과 같게(부품 .sc-sp p { margin: 0 } 위에) */ .sec-sp2 .sc-sp2__txt p, .sec-sp2 .sc-sp2__txt ul { margin: 0 0 1em; } .sec-sp2 .sc-sp2__txt li + li { margin-top: .35em; } .sec-sp2 .sc-sp2__ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; border-radius: 0; outline: 0; } .sec-sp2 > .wrap:empty { display: none; } /* ── 상담 띠 L3 ── 제목은 p(페이지마다 같은 H2 반복 피함) — H2와 같은 크기 */ .sc-l3__h { font-weight: 800; } .sc-l3 a:not(.sc-l3__btn--accent), .sc-l3 a:not(.sc-l3__btn--accent):hover { color: inherit; } /* 주력 버튼은 라벤더 바탕 위 네이비 글자(7.5:1) — 흰 글자면 2.25:1(design-lint 14) */ /* ── 푸터 FT1 ── 로고 옆 "부동산센터"는 로고 속 글자와 한 줄(style.css .footer-logo, 사용자 2026-10-16) */ .sc-ft1__logo { width: auto; } .sc-ft1__logo img { width: auto; } .sc-ft1 p { margin: 0; } .sc-ft1__contact a { overflow-wrap: anywhere; } /* ── 퀵바 QB3 ── 900~1359px는 헤더 전화가 같은 일을 하고 세로 타일이 본문 오른쪽을 덮어 숨긴다(옛 퀵메뉴와 같은 구간, 디자인 검수 2026-10-08). 899px 이하 아래 고정 줄 여백은 body.sc-qb-space--qb3가 잡으므로 옛 --quick-h 여백은 0 */ /* (900~1359px 숨김은 뺐다 — 사용자 2026-10-22 "900px 위에선 우측에 보여야해") */ @media (max-width: 899.98px) { :root { --quick-h: 0px; } } .sc-qb__t:hover, .sc-qb__t:focus-visible { text-decoration: none; } /* ── 안내 콘텐츠 GC0 ── */ .sc-gc .sc-gc__list { margin: 32px 0 0; } .sc-gc__more .sc-ic { width: 16px; height: 16px; } .sp2-head .sc-head--t7, .sp2-head .sc-head--g { margin-bottom: 28px; } /* L3: 899px 이하는 글 칸 폭 제한(620px)을 풀어 컨테이너를 채운다(static/CLAUDE.md 12번 — 본문 꽉 채움). 글이 사진 오른쪽까지 오므로 막도 고르게 짙게(.86, 부품의 767px 이하 값과 같음) */ /* 2026-10-20: 1440px에서도 620px에 묶여 design-lint 17(하위 머리 사진 배경 적용 뒤 /privacy/ 등) → 글 칸 폭 제한은 모든 폭에서 푼다 */ .sc-l3__in > * { max-width: none; } @media (max-width: 1199.98px) { /* 1024px에서도 620px에 묶여 design-lint 17 — 글 칸 최대 폭을 푸는 기준(1199px, style.css 822)과 맞춤 2026-10-20 */ .sc-l3::after { background: rgba(var(--sc-shadow-deep-rgb), .86); } } /* S-17(2026-10-20): 드롭다운 미리보기·상담 띠 배경은 대신 CSS 배경 — 처음 열기 전에는 받지 않는다 */ .sc-dd4__pic { display: block; grid-column: 1; grid-row: 1; background: var(--sand) center / cover no-repeat; } html.sc-js .sc-dd--d4:not(.sc-pv-ready) .sc-dd4__pic { background-image: none !important; } .sc-l3__bg--css { background-size: cover; background-repeat: no-repeat; background-position: var(--sc-l3-pos, center 60%); } /* D4 미리보기: 메뉴를 오갈 때 위아래로 움직이지 않고 바로 바뀌게(사용자 지정 2026-10-20) — 나가는 카드는 즉시 숨고, 들어오는 카드만 짧게 페이드 */ .sc-dd4__card { transform: none; transition: none; } .sc-dd4__card.is-on { transition: opacity .14s ease-out; } @media (prefers-reduced-motion: reduce) { .sc-dd4__card.is-on { transition: none; } } /* SP2 축소(사용자 지정 2026-10-20 "이미지 너무 커. 구조 바꿔") — 사진을 화면 끝까지 붙인 큰 칸(7/12·높이 460~640px) 대신 글 7 : 사진 5로 .wrap 글 칸 안에 두고 4:3·둥근 모서리. 글 칸 왼쪽 끝은 헤더와 같다(design-lint 17) */ @media (min-width: 900px) { .sec-sp2 .sc-sp2 { grid-template-columns: minmax(0, 1fr) calc(var(--sc-sp2-cw) * 7 / 12) calc(var(--sc-sp2-cw) * 5 / 12) minmax(0, 1fr); align-items: center; } .sec-sp2 .sc-sp2__ph { grid-column: 3; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; } } @media (max-width: 899.98px) { .sec-sp2 .sc-sp2__ph { margin-right: var(--sc-gutter); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; } } /* 메인 업무분야 카드 12장(2026-10-20 사용자 지시 "카드 왜 안써") — 599px 이하도 2열 세로 카드로(한 줄씩 12장이면 1,800px이 넘음). 화살표는 그리드 칸이 아니라 카드 오른쪽 아래에 고정(grid-column이 붙으면 절대 위치 기준이 그 칸이 되어 카드마다 어긋났다) */ .icon-cards .card-body > .plain-arrow { grid-column: auto; grid-row: auto; } @media (max-width: 599px) { .t-home .card-grid.icon-cards.n-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .t-home .icon-cards.n-12 .card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 16px 14px 40px; } .t-home .icon-cards.n-12 .card-icon { width: 40px; height: 40px; margin: 0 0 10px; } .t-home .icon-cards.n-12 .card-icon svg { width: 22px; height: 22px; } .t-home .icon-cards.n-12 .card-title { font-size: 1rem; line-height: 1.35; margin: 0; word-break: keep-all; } .t-home .icon-cards.n-12 .card-body > p:not(.card-title) { margin: 6px 0 0; font-size: .875rem; line-height: 1.55; } .t-home .icon-cards.n-12 .plain-arrow { position: absolute; top: auto; bottom: 12px; right: 12px; margin: 0; padding: 0; } .t-home .icon-cards.n-12 .plain-arrow svg { width: 20px; height: 20px; } } /* 359px 이하(320 등): 2열 칸 폭이 127px라 제목·설명이 4~5줄로 쪼개지고 긴 제목이 잘렸다 → 1열 가로 카드(아이콘 왼쪽, 제목·설명 오른쪽). 사용자 2026-10-21 */ @media (max-width: 359.98px) { .t-home .card-grid.icon-cards.n-12 { grid-template-columns: minmax(0, 1fr); } .t-home .icon-cards.n-12 .card-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 40px 14px 14px; } .t-home .icon-cards.n-12 .card-icon { grid-row: 1 / span 2; margin: 0; } .t-home .icon-cards.n-12 .card-body > :not(.card-icon):not(.plain-arrow) { grid-column: 2; } .t-home .card-grid.icon-cards.n-12 .card-body > .plain-arrow { top: 50%; bottom: auto; transform: translateY(-50%); } } .card-title, .icon-cards .card-title a { overflow-wrap: break-word; } @media (max-width: 420px) { .icon-cards .card-body > .plain-arrow { top: 50%; transform: translateY(-50%); } .t-home .icon-cards.n-12 .card-body > .plain-arrow { top: auto; transform: none; } } /* SP2 세로 인물 사진: 공통 4:3 칸에서 머리·몸이 잘린다 → 사진 비율 그대로 세로 칸(render.mjs가 --ph-ar를 넣음, 2026-10-20 사용자 지시 — 소개 인사말·오시는 길 상담) */ .sec-sp2 .sc-sp2__ph.sc-sp2__ph--tall { aspect-ratio: var(--ph-ar, 4 / 5); } @media (max-width: 899.98px) { .sec-sp2 .sc-sp2__ph.sc-sp2__ph--tall { max-width: 420px; } } /* 교통편 탭 아이콘(2026-10-20) — 아이콘 + 글자 한 줄, 탭 높이(52px) 그대로라 탭 줄이 밀리지 않는다 */ .sc-tabs__tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .sc-tabs__ic { width: 22px; height: 22px; flex: none; } @media (max-width: 420px) { .sc-tabs__tab { gap: 5px; } .sc-tabs__ic { width: 18px; height: 18px; } } /* D4 닫힌 패널이 마우스를 받던 문제(2026-10-20 사용자 "썸네일 영역에만 갖다대도 드롭다운 열리는거"): 공용 dropdown.css의 .sc-dd4__card.is-on { visibility: visible }이 숨은 패널(visibility: hidden) 안에서 다시 보이게 되어, 투명한 미리보기 카드 자리에 마우스가 닿으면 li pointerenter로 열렸다. 닫혀 있을 때는 패널 전체가 마우스를 받지 않는다 */ html.sc-js .sc-dd:not(.is-open) .sc-dd__panel, html.sc-js .sc-dd:not(.is-open) .sc-dd__panel * { pointer-events: none !important; } html.sc-js .sc-dd:not(.is-open) .sc-dd4__card.is-on { visibility: inherit; } /* ── 작은 폰(320~359px) 글자 잘림·낱말 꺾임 (2026-10-21 사용자 "반응형 제대로", design-lint 19·4) ── 빌드가 "A·B" 묶음을 .nw(줄바꿈 금지)로 감싸는데, 좁은 카드 설명에서는 그 묶음이 칸보다 길어 옆으로 잘렸다 → 카드 설명 안에서는 묶음을 푼다. 2열 표 첫 칸(7em)이 320px에서 둘째 칸을 좁혀 "서울동부지방법원"이 중간에서 꺾였다 → 첫 칸을 줄인다. */ .sc-gc__d .nw, .card .card-body > p:not(.card-title) .nw, .sc-sp11__d .nw { white-space: normal; } @media (max-width: 359.98px) { .table-2col thead th:first-child, .table-2col tbody th { width: 5.5em !important; } } /* ── 매거진(WordPress /wp/) 머리 배경 — 테마 .page-head.mag-hero 안 _shell/hero-bg.html(메인 히어로와 같은 사무실 사진 + 같은 덮개). 높이는 테마 magazine.css(340 / 260px). 2026-10-21 */ .mag-hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--brown-900, #000c33); } .mag-hero-bg .hero-slides { z-index: 0; } .mag-hero-bg .hero-shade { z-index: 1; } /* ── 섹션 제목 글자 위계 (2026-10-21 사용자 지정 — 밑줄 형광펜 대신 색으로 구분) ── 기본은 본문 검정(#1f232b), "남양주 ○○" 키워드 묶음은 테마 남색(#233f8e), 마지막 낱말은 라벤더 강조색(흰·연회색·FAQ 라벤더 바탕 모두 4.5:1 이상). 빌드 data/eyebrows.mjs가 span을 붙인다 */ /* 검정과 로고 네이비(#001555)는 화면에서 거의 같아 보여(2026-10-21 캡처) 키워드는 한 단계 밝은 테마 남색 #233f8e로 */ .sc-head__h { color: var(--sc-ink, #1f232b); font-weight: 700; } .sc-head__h .sc-ht--brand { color: var(--sc-brand-2, #233f8e); font-weight: 800; } .sc-head__h .sc-ht--accent { color: var(--sc-brand-2, #233f8e); font-weight: 800; } /* 두 색만(2026-10-21 사용자 "색이 3개나 나눠지니까 이상하다") — 강조는 모두 테마 남색, 나머지는 검정 */ /* ── 섹션 머리 G (2026-10-21 사용자 지정, modern-design 1-2) — 영어 라벨을 아주 크고 옅게(6%) 제목 뒤에. 라벨 글자는 그대로 p, 화면 읽기에서는 숨김(aria-hidden) ── 큰 글자는 칸 밖으로 나가지 않게 잘라 둔다(가로 스크롤 0). 제목은 그 위(z-index) */ .sc-head--g { position: relative; padding-top: clamp(22px, 3.4vw, 48px); } .sc-head--g .sc-head__ghost { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 0; background: none; z-index: 0; overflow: hidden; white-space: nowrap; pointer-events: none; font-size: clamp(30px, 5.6vw, 80px); font-weight: 900; line-height: .9; letter-spacing: -.03em; text-transform: uppercase; color: var(--sc-brand, #001555); opacity: .07; } .sc-head--g .sc-head__ghost::before { content: none; display: none; } .sc-head--g .sc-head__h { position: relative; z-index: 1; margin: 0; } /* 긴 제목의 앞 구절 — 작은 회색 윗줄(C처럼 크기 차이). 아랫줄(키워드·꼬리)이 제목 크기 */ .sc-head__h .sc-ht-pre { display: block; margin-bottom: .3em; font-size: .52em; font-weight: 600; letter-spacing: -.01em; color: var(--sc-muted, #4f5561); } /* ── 혜명 화면 (2026-10-22, 레퍼런스 hm-law.kr) ─────────────────────────────── */ :root { --sc-shadow-rgb: 19, 29, 54; --sc-shadow-deep-rgb: 11, 14, 21; --sc-scrim: rgba(11, 14, 21, .5); --sc-accent-soft: #f4efe5; } /* 헤더 — 흰 바탕, 글자 메뉴(레퍼런스) */ .site-header.sc-hd .sc-hd__bg { background: #fff; border-bottom: 1px solid #eceef2; } .sc-hd .logo-img { height: 40px; width: auto; } .sc-hd .sc-m, .sc-hd .sc-dd__btn { font-weight: 500; color: #171717; } .sc-hd__tel { background: var(--brown-800); color: #fff; border-radius: 999px; } .sc-hd__tel:hover { background: var(--brown-700); color: #fff; } /* 기존 WordPress 묶음(판례 분석·법률정보) — 목록형 드롭다운 */ .hm-dd-list .sc-dd__panel { width: auto; min-width: 220px; padding: 10px; left: 50%; transform: translateX(-50%); } .hm-dd-list__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .hm-dd-list__ul li { margin: 0; } .hm-dd-list__ul a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; font-size: 15px; } .hm-dd-list__ul a:hover, .hm-dd-list__ul a:focus-visible { background: var(--ivory); color: var(--brown-500); } /* 메인 히어로 — 둥근 상자 + 대리석 벽 + 인물 컷아웃 */ .hm-hero { padding: clamp(16px, 2.4vw, 36px) clamp(12px, 4vw, 64px) 0; background: #fff; } .hm-hero__box { position: relative; max-width: 1360px; margin: 0 auto; border-radius: clamp(18px, 2vw, 28px); overflow: hidden; min-height: clamp(560px, 46vw, 640px); background: #2a2622; isolation: isolate; } .hm-hero__media { position: absolute; inset: 0; z-index: -1; } .hm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hm-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 14, 21, .82) 0%, rgba(11, 14, 21, .6) 48%, rgba(11, 14, 21, .25) 100%); } .hm-hero__in { position: relative; display: flex; align-items: center; min-height: inherit; padding: clamp(40px, 6vw, 88px) clamp(24px, 6.5vw, 92px); } .hm-hero__text { position: relative; z-index: 2; max-width: 620px; color: #fff; } .hm-hero__badge { display: inline-block; margin: 0 0 26px; padding: 10px 24px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, .06); } .hm-hero h1 { color: #fff; font-size: clamp(32px, 3.9vw, 54px); font-weight: 700; line-height: 1.28; letter-spacing: -0.02em; margin: 0 0 22px; } .hm-hero__lead { font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; line-height: 1.65; color: rgba(255, 255, 255, .94); margin: 0 0 6px; } .hm-hero__tags { margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); display: flex; flex-wrap: wrap; gap: 4px 6px; } .hm-hero__dot { opacity: .6; } .hm-hero .cta-row { margin-top: 30px; } .hm-hero__person { position: absolute; right: clamp(24px, 6vw, 110px); bottom: 0; margin: 0; width: clamp(300px, 30vw, 440px); z-index: 1; pointer-events: none; } .hm-hero__person img { width: 100%; height: auto; aspect-ratio: 1024 / 1536; object-fit: contain; object-position: bottom; } @media (max-width: 899px) { .hm-hero__box { min-height: 0; } .hm-hero__in { flex-direction: column; align-items: stretch; padding: 40px 22px 0; } .hm-hero__shade { background: linear-gradient(180deg, rgba(11, 14, 21, .78) 0%, rgba(11, 14, 21, .55) 60%, rgba(11, 14, 21, .35) 100%); } .hm-hero__person { position: relative; right: auto; align-self: center; width: min(72vw, 340px); margin-top: 20px; } .hm-hero__badge { font-size: 14px; padding: 8px 18px; margin-bottom: 18px; } } /* 버튼 — 금색 채움 / 흰 테두리 */ .btn-gold { background: var(--gold-400); color: var(--brown-950); border-color: var(--gold-400); } .btn-gold:hover { background: var(--gold-300); color: var(--brown-950); } /* 섹션 영어 라벨 — 금색 대문자·자간(레퍼런스는 세리프지만 Pretendard만 쓴다 — static/CLAUDE.md 8) + 아래 짧은 금색 선 */ .sec-label { display: block; text-align: center; color: var(--gold-700); font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; margin: 0 0 12px; } .sec-label::after { content: ""; display: block; width: 28px; height: 1px; background: var(--gold-500); margin: 14px auto 0; } .sec h2 { text-align: center; font-size: clamp(28px, 3vw, 44px); font-weight: 800; color: #171717; } .bg-dark .sec-label, .sec.is-dark .sec-label { color: var(--gold-400); } /* 푸터 — 검정 바탕(레퍼런스) */ .hm-ft { background: #000; color: #b9bdc6; font-size: 14px; line-height: 1.8; padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); } .hm-ft a { color: #e2e4ea; text-decoration: none; } .hm-ft a:hover, .hm-ft a:focus-visible { color: var(--gold-300); } .hm-ft__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid #23262d; } .hm-ft__logo img { height: 48px; width: auto; } .hm-ft__info { display: flex; flex-direction: column; margin-top: 20px; } .hm-ft__h { color: #fff; font-weight: 700; margin: 0 0 6px; } .hm-ft__addr { margin: 0 0 16px; } .hm-ft__addr small { color: #9aa0ab; } .hm-ft__ch, .hm-ft__nav ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .hm-ft__ch li, .hm-ft__nav li { margin: 0; } .hm-ft__nav ul { font-size: 13px; } .hm-ft__bottom { padding-top: 22px; } .hm-ft__disc { font-size: 12.5px; color: #8b909b; margin: 0 0 6px; } .hm-ft__copy { font-size: 12.5px; color: #8b909b; margin: 0; } @media (max-width: 899px) { .hm-ft__grid { grid-template-columns: 1fr; gap: 24px; } } /* 퀵바 — 900px 이상은 둥근 전화상담 버튼(레퍼런스), 899px 이하는 QB3 하단 줄 */ .hm-call { display: none; } @media (min-width: 900px) { .sc-qb--qb3 .sc-qb__t:not([data-qb="top"]) { display: none; } .sc-qb--qb3 { right: 26px; bottom: 170px; top: auto; transform: none; } .sc-qb--qb3 .sc-qb__t[data-qb="top"] { width: 44px; height: 44px; border-radius: 50%; background: #fff; } .hm-call { position: fixed; right: 18px; bottom: 30px; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 124px; height: 124px; border-radius: 50%; background: var(--brown-800); color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(11, 14, 21, .3); font-size: 14px; transition: background-color .2s; } .hm-call b { font-size: 16px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .hm-call:hover, .hm-call:focus-visible { background: var(--brown-700); color: #fff; } } /* 옛 라벨 앞 짧은 선(style.css .sec-label::before)·왼쪽 여백을 끈다 — 혜명은 가운데 라벨 + 아래 선(::after) */ .sec-label { padding-left: 0; background: none; } .sec-label::before { content: none; display: none; } /* ── 혜명 메인 섹션 (레퍼런스 hm-law.kr 배치) ── */ /* 원칙: 장식 사진은 숨기고 소제목 3개를 번호 카드로(01·02·03), 아래 남색 숫자 띠 */ .t-home #values { padding-bottom: 0; } .t-home #values .sc-sp2__media, .t-home #values figure { display: none; } .t-home #values .sc-sp2 { display: block; } .t-home #values .subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: hmv; margin-top: 8px; } .t-home #values .sub { background: #fff; border-radius: 16px; padding: 34px 30px 30px; box-shadow: 0 1px 4px rgba(11, 14, 21, .06); counter-increment: hmv; } .t-home #values .sub h3 { font-size: 19px; font-weight: 800; margin: 0 0 12px; } .t-home #values .sub h3::before { content: "0" counter(hmv); display: block; color: var(--gold-500); font-size: 30px; font-weight: 300; letter-spacing: .02em; margin-bottom: 12px; } .t-home #values .sub h3::after { content: ""; display: block; width: 24px; height: 1px; background: var(--gold-500); margin-top: 14px; } .t-home #values .sub p { font-size: 15px; color: var(--muted); line-height: 1.7; } .hm-stats { background: var(--brown-800); margin-top: clamp(56px, 7vw, 96px); padding: clamp(40px, 5vw, 64px) 0; } .hm-stats ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 auto; text-align: center; } .hm-stats li { margin: 0; display: flex; flex-direction: column; gap: 10px; color: #c9cdd8; font-size: 14px; } .hm-stats b { color: var(--gold-400); font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } @media (max-width: 899px) { .t-home #values .subs { grid-template-columns: 1fr; } .hm-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } } /* 걸어온 길: 연도 표를 세로 타임라인 모양으로(표 구조·글자는 그대로 — AI 인용용) */ .t-home #history .table-box { border: 0; background: none; max-width: 760px; margin: 0 auto; } .t-home #history .table-cap, .t-home #history thead { display: none; } .t-home #history table { border-collapse: separate; border-spacing: 0; width: 100%; } .t-home #history tbody tr { position: relative; } .t-home #history tbody th, .t-home #history tbody td { border: 0; background: none; padding: 18px 0 18px 0; vertical-align: top; } .t-home #history tbody th { width: 120px; padding-left: 34px; color: var(--brown-800); font-size: 22px; font-weight: 600; position: relative; } .t-home #history tbody th::before { content: ""; position: absolute; left: 6px; top: 28px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px #f4ecdc; } .t-home #history tbody th::after { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: #e3e1dc; z-index: -1; } .t-home #history tbody td { font-size: 16px; font-weight: 600; color: #222; padding-top: 22px; } /* 업무 분야: 어두운 사진 바탕(레퍼런스 services) + 흰 썸네일 카드 6장 */ .sec.hm-dark { position: relative; background: #10141d; color: #d9dce4; isolation: isolate; } .sec.hm-dark::before { content: ""; position: absolute; inset: 0; background: rgba(11, 14, 21, .84); z-index: -1; } .sec.hm-dark h2 { color: #fff; } .sec.hm-dark .sec-label { color: var(--gold-400); } .sec.hm-dark .prose { text-align: center; max-width: 760px; margin: 0 auto 28px; } .sec.hm-dark .prose p { color: #d9dce4; } .sec.hm-dark .prose a { color: var(--gold-300); } .hm-practice-cards { padding: 0; background: none; } .hm-practice-cards .sc-gc__list { margin-top: 8px; } /* 업무 분야 소개 — 피해자 안내 문장(약 780px)이 데스크톱에서 한 줄에 들어가게 */ @media (min-width: 900px) { .t-home #practice .prose { max-width: 820px; } } /* 판례 분석 링크 6개: 알약 버튼 */ .t-home #cases .prose { text-align: center; } .t-home #cases ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .t-home #cases li { margin: 0; } .t-home #cases li a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 1px solid #d9dce4; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; } .t-home #cases li a:hover, .t-home #cases li a:focus-visible { border-color: var(--brown-800); color: var(--brown-800); } /* 방송 출연: 카드 3장 */ .t-home #media .subs, .t-media .subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .t-home #media .sub-media, .t-media .sub-media { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(11, 14, 21, .08); } .t-home #media .card-media img, .t-media .card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .t-home #media .card-body { padding: 18px 20px 20px; } .t-home #media .prose { text-align: center; } @media (max-width: 899px) { .t-home #media .subs, .t-media .subs { grid-template-columns: 1fr; } } /* 메인 상담 예약 가운데 정렬 */ .t-home #consult .prose, .t-home #consult .cta-row { text-align: center; justify-content: center; } /* 히어로 상자는 부모(.hero)가 flex여도 폭을 꽉 채운다 */ .hero.hm-hero { display: block; min-height: 0; color: inherit; background: #fff; } .hm-hero__box { width: 100%; } /* 원칙 카드는 글 칸(.wrap) 폭 안에 */ .t-home #values .sc-sp2 { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); } /* 방송 카드: 위 사진(16:9) · 아래 글 */ .t-home #media .sub-media, .t-media .sub-media { display: flex; flex-direction: column; grid-template-columns: none; padding: 0; gap: 0; } .t-home #media .sub-media .card-media, .t-media .sub-media .card-media { width: 100%; max-width: none; flex: none; margin: 0; } .t-media .sub-media .card-body { padding: 18px 20px 20px; } .hm-hero__op { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .72); } /* ── 도구 검사 보정 (2026-10-22) ── */ /* 상담 띠는 남색 — 검정 푸터와 구분(1.12:1 이상) */ .sc-l3 { background-color: var(--brown-800); } /* 검정 푸터 위 초점 표시는 금색 */ .hm-ft :focus-visible { outline-color: var(--gold-400); } /* 히어로 상자 좌우를 헤더·본문 글 칸(.wrap)과 같은 선에 맞춘다(responsive-gutter 5) */ .hm-hero { padding: clamp(16px, 2.4vw, 36px) var(--gutter) 0; } .hm-hero__box { max-width: var(--wrap); } /* 사진 위 보조 버튼은 흰 글자 */ .hm-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(11, 14, 21, .35); } .hm-hero .btn-ghost:hover, .hm-hero .btn-ghost:focus-visible { background: #fff; color: var(--brown-950); } /* 글 옆 사진 칸은 글 칸 높이에 맞춰 늘린다(빈 여백 없게) */ @media (min-width: 900px) { .sc-sp2 { align-items: stretch; } .sc-sp2 .sc-sp2__ph { height: auto; align-self: stretch; } .sc-sp2 .sc-sp2__ph img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 18%; } } /* 방송·미디어 페이지(type: collection) 카드도 위 사진·아래 글 */ .t-collection .subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .t-collection .sub-media { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(11, 14, 21, .08); padding: 0; } .t-collection .sub-media .card-media { width: 100%; max-width: none; margin: 0; } .t-collection .sub-media .card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .t-collection .sub-media .card-body { padding: 18px 20px 20px; } @media (max-width: 899px) { .t-collection .subs { grid-template-columns: 1fr; } } /* 메인 업무 분야 카드는 등장 효과 없이 바로 보인다 */ .hm-practice-cards .rv, .hm-practice-cards li { opacity: 1 !important; transform: none !important; } /* 절차 카드 수가 3장이면 3열 — 글 칸을 다 채운다 */ @media (min-width: 900px) { ol.sc-steps--s2:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 늘린 사진 칸이 비율(aspect-ratio) 때문에 옆으로 넓어지지 않게 */ @media (min-width: 900px) { .sc-sp2 .sc-sp2__ph { aspect-ratio: auto; min-width: 0; overflow: hidden; } } /* 히어로 보조 버튼(공용 B1 ghost) — 사진 위 흰 글자 */ .hm-hero .sc-b1--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(11, 14, 21, .45); } .hm-hero .sc-b1--ghost:hover, .hm-hero .sc-b1--ghost:focus-visible { background: #fff; color: var(--brown-950); border-color: #fff; } /* 사진 칸 늘리기 보정: 사진의 고정 비율(aspect-ratio)을 끄고 칸 폭 안에서 위아래로만 채운다 */ /* 900px 이상(나란한 칸)에서만 — 한 줄로 쌓이는 좁은 화면은 사진 고유 비율로 자리를 잡는다(불러오기 전후 높이 같게) */ @media (min-width: 900px) { .sc-sp2 .sc-sp2__ph { aspect-ratio: auto !important; width: 100% !important; max-width: 100%; } .sc-sp2 .sc-sp2__ph img { aspect-ratio: auto !important; width: 100% !important; height: 100% !important; min-height: 320px; position: absolute; inset: 0; } .sc-sp2 .sc-sp2__ph { position: relative; min-height: 320px; } } /* 메인 소개: 약력·경력·수상 목록 3개를 글 칸 안에서 나란히 — 글 칸 높이를 사진과 비슷하게 */ @media (min-width: 900px) { .t-home #attorney .subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .t-home #attorney .subs .sub { margin: 0; } .t-home #attorney .subs li { font-size: 14px; } } /* 히어로 구역도 글 칸과 같은 폭(responsive-gutter 5) · 전화 버튼은 사진 위에서도 흰 바탕 그대로 */ .hm-hero { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; } .hm-hero .sc-b5 { background: #fff; color: var(--brown-950); } /* 히어로 보조 버튼 글자색은 부품 기본보다 앞선다 */ .hm-hero a.sc-btn.sc-b1--ghost, .hm-hero a.sc-btn.sc-b1--ghost span { color: #fff !important; } .hm-hero a.sc-btn.sc-b1--ghost:hover, .hm-hero a.sc-btn.sc-b1--ghost:hover span, .hm-hero a.sc-btn.sc-b1--ghost:focus-visible span { color: var(--brown-950) !important; } /* 좁은 화면: 글 옆 사진은 고유 비율대로(height:auto) — 불러오기 전에도 자리가 같다 */ @media (max-width: 899px) { .sc-sp2 .sc-sp2__ph img { height: auto !important; width: 100%; } } /* ── 하위 페이지 — 레퍼런스(hm-law.kr 하위 페이지) 모양 (사용자 2026-10-22 "디자인은 레퍼런스 최대한") ── */ .page-head.hm-ph { background: #fff; padding: clamp(16px, 2.4vw, 32px) 0 0; color: inherit; min-height: 0; } .hm-ph__box { border-radius: clamp(18px, 2vw, 24px); background: linear-gradient(180deg, #1c2540 0%, #0b0e15 100%); color: #fff; text-align: center; padding: clamp(40px, 5.5vw, 76px) clamp(20px, 5vw, 64px); } .hm-ph .crumbs { margin: 0 0 18px; } .hm-ph .crumbs ol { justify-content: center; } .hm-ph .crumbs, .hm-ph .crumbs a, .hm-ph .crumbs li { color: rgba(255, 255, 255, .62); font-size: 13px; } .hm-ph__label { color: var(--gold-400); font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; margin: 0 0 14px; } .hm-ph__label::after { content: ""; display: block; width: 28px; height: 1px; background: var(--gold-500); margin: 14px auto 0; } .hm-ph h1 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.3; margin: 0 0 16px; } .hm-ph .lead { color: rgba(255, 255, 255, .82); font-size: clamp(15px, 1.3vw, 17px); max-width: 760px; margin: 0 auto 8px; } .hm-ph .lead a { color: var(--gold-300); } .hm-ph .byline { color: rgba(255, 255, 255, .6); font-size: 13px; margin-top: 14px; } .hm-ph .byline a { color: var(--gold-300); } .hm-ph .cta-row { justify-content: center; margin-top: 24px; } .hm-ph .sc-b1--ghost, .hm-ph .btn-ghost { color: #fff !important; border-color: rgba(255, 255, 255, .55); background: transparent; } .hm-ph .sc-b1--ghost span { color: #fff !important; } /* 하위 히어로 사진 위 보조 버튼 호버 — 메인 히어로와 같게 바탕·글자색은 그대로, 테두리만 또렷하게 + 화살표 이동 (옛 규칙은 span에도 흰 바탕을 줘 전환 중 글자 뒤에 흰 네모가 떴다 — 사용자 2026-10-26 "호버했을 때 이상해") */ .hm-ph__in .sc-b1--ghost:hover, .hm-ph__in .sc-b1--ghost:focus-visible { background: transparent; box-shadow: inset 0 0 0 1.5px #fff, 0 10px 22px rgba(0, 0, 0, .3); } .hm-ph__in .sc-b1--ghost:hover span, .hm-ph__in .sc-b1--ghost:focus-visible span { background: none; color: #fff !important; } /* 상담직통(soft) 아이콘 칸 호버 — 금색 대신 옆 대표전화와 같은 남색 계열로 */ .sc-b5--soft:hover .sc-b5__ic, .sc-b5--soft:focus-visible .sc-b5__ic { background: var(--sc-brand-2); color: var(--sc-on-dark); } /* 하위 페이지 본문 섹션 제목 — 레퍼런스 상세 글처럼 왼쪽 금색 막대 */ body:not(.t-home) .sec .sec-label { text-align: left; } body:not(.t-home) .sec .sec-label::after { margin: 10px 0 0; } body:not(.t-home) .sec h2 { text-align: left; font-size: clamp(24px, 2.4vw, 32px); border-left: 4px solid var(--gold-500); padding-left: 14px; } body:not(.t-home) #guide-contents h2, body:not(.t-home) #faq h2 { border-left: 0; padding-left: 0; text-align: center; } body:not(.t-home) #guide-contents .sec-label, body:not(.t-home) #faq .sec-label { text-align: center; } body:not(.t-home) #guide-contents .sec-label::after, body:not(.t-home) #faq .sec-label::after { margin: 14px auto 0; } /* 본문 목록 — 금색 체크(레퍼런스 "주요 쟁점") */ main .prose ul:not([class]) { list-style: none; padding-left: 0; } main .prose ul:not([class]) > li { position: relative; padding-left: 26px; } main .prose ul:not([class]) > li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2px solid var(--gold-500); border-bottom: 2px solid var(--gold-500); transform: rotate(-45deg); } .page-head.hm-ph { border: 0; box-shadow: none; } .page-head.hm-ph::before, .page-head.hm-ph::after { content: none; display: none; } /* 메인 방송 카드 3장 높이 맞춤(글 칸이 남는 높이를 채움) */ .t-home #media .subs { align-items: stretch; } .t-home #media .sub-media .card-body { flex: 1; } .t-home #media .card-media img { height: auto; } /* 업무 분야 어두운 사진은 ::before 한 층에(섹션 자체 바탕은 단색 — 카드 글자 대비 판정이 카드의 흰 바탕을 보게) */ .sec.hm-dark { background: #10141d; } .sec.hm-dark::before { background: radial-gradient(60% 50% at 50% 0%, rgba(201, 167, 100, .16), transparent 70%); } /* 사진 대신 거의 검정 + 제목 위 금빛 번짐 — 카드가 사진 얼굴을 가려 의미 없던 것(사용자 2026-10-23 A-2안) */ .t-home #media .subs > .sub-media { align-self: stretch; height: auto; } .t-home #media .card-media img, .t-collection .sub-media .card-media img { aspect-ratio: 16 / 9 !important; height: auto; object-fit: cover; } .sec.hm-dark :focus-visible { outline-color: var(--gold-400); } /* ════ 레퍼런스(hm-law.kr) 위치·크기 맞춤 — 1920px 실측값 (사용자 2026-10-22 "navbar, hero, 컨텐츠 위치와 크기를 레퍼런스와 동일하게") ════ */ /* 헤더: 높이 85, 로고 161×54, 메뉴 16px 500, 전화 버튼 없음 */ @media (min-width: 900px) { .site-header.sc-hd .sc-hd__in { min-height: 85px; height: 85px; } .sc-hd .logo-img { height: 54px; width: auto; } .sc-hd .sc-m, .sc-hd .sc-dd__btn { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: #171717; } .sc-hd__menu { gap: 22px; } .sc-hd__tel { display: none; } } /* 히어로: 위 24px · 상자 최대 1600×695 · 모서리 28 · 글 왼쪽 112 · 제목 54/1.35 · 배지 20px · 리드 21/1.7 · 인물 639px(오른쪽 24, 위 56, 아래로 잘림) */ .hero.hm-hero { max-width: none; padding: 24px clamp(12px, 3vw, 152px) 0; } .hm-hero__box { max-width: 1600px; min-height: clamp(560px, 36.2vw, 695px); border-radius: 28px; } .hm-hero__in { padding: clamp(48px, 6vw, 112px) clamp(24px, 5.8vw, 112px); align-items: center; } .hm-hero__text { max-width: 640px; } .hm-hero__badge { font-size: 20px; padding: 12px 30px; border-color: rgba(255, 255, 255, .7); margin-bottom: 36px; font-weight: 600; } .hm-hero h1 { font-size: clamp(34px, 2.8vw, 54px); line-height: 1.35; letter-spacing: -0.002em; margin-bottom: 26px; } .hm-hero__lead { font-size: clamp(16px, 1.1vw, 21px); line-height: 1.7; } .hm-hero__person { right: 24px; top: 56px; bottom: auto; width: clamp(320px, 33.3vw, 639px); } @media (max-width: 899px) { .hero.hm-hero { padding: 12px 12px 0; } .hm-hero__box { border-radius: 20px; } .hm-hero__person { top: auto; right: auto; width: min(72vw, 340px); } .hm-hero__badge { font-size: 14px; padding: 8px 18px; margin-bottom: 18px; } } /* 섹션: 위 110 · 아래 120 · 라벨 20px 자간 6px · 제목 46px 800 */ @media (min-width: 900px) { main .sec { padding-top: 110px; padding-bottom: 120px; } } .sec-label { font-size: 20px; letter-spacing: 6px; font-weight: 600; margin-bottom: 14px; color: #8a6a35; } .t-home .sec h2 { font-size: clamp(30px, 2.4vw, 46px); line-height: 1.3; font-weight: 800; margin-bottom: 60px; } /* 메인 소개: 사진 420×525(원본 4:5)(모서리 16) 왼쪽 · 글 오른쪽 · 약력 상자 3개는 아래 줄(2칸 + 전체 폭, 흰 상자 모서리 20, 안쪽 44/40) */ @media (min-width: 900px) { .t-home #attorney .sc-sp2 { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 60px; row-gap: 48px; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); align-items: start; } .t-home #attorney .sc-sp2__txt { display: contents; } .t-home #attorney .sc-sp2__ph { grid-column: 1; grid-row: 1; width: 420px !important; height: 525px; min-height: 0; border-radius: 16px; overflow: hidden; position: relative; } .t-home #attorney .sc-sp2__ph img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 0; object-position: 50% 50%; } .t-home #attorney .sc-sp2__txt > p { grid-column: 2; grid-row: 1; align-self: center; font-size: 18px; line-height: 1.7; color: #444; margin: 0; } .t-home #attorney .sc-sp2__txt > p + p { grid-row: 1; margin-top: 0; } .t-home #attorney .subs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .t-home #attorney .subs .sub:last-child { grid-column: 1 / -1; } .t-home #attorney .subs .sub { background: #fff; border-radius: 20px; padding: 44px 40px; box-shadow: 2px 2px 40px rgba(0, 0, 0, .06); margin: 0; } .t-home #attorney .subs h3 { font-size: 22px; font-weight: 700; margin: 0 0 18px; } .t-home #attorney .subs li { font-size: 16px; } .t-home #attorney { background: #f4f5f7; } } /* 두 문단이 한 칸에 겹치지 않게 — 글 묶음 */ @media (min-width: 900px) { .t-home #attorney .sc-sp2__txt > p:first-child { align-self: end; } .t-home #attorney .sc-sp2__txt > p:nth-child(2) { align-self: start; margin-top: 18px; } } /* 원칙 카드 435×368 · 모서리 20 · 안쪽 50/40 · 번호 44px · 제목 24px · 글 16px #666 */ .t-home #values .subs { gap: 23px; } .t-home #values .sub { border-radius: 20px; padding: 50px 40px 40px; box-shadow: 2px 2px 40px rgba(0, 0, 0, .06); min-height: 368px; } .t-home #values .sub h3 { font-size: 24px; font-weight: 700; } .t-home #values .sub h3::before { font-size: 44px; font-weight: 600; color: #b3925c; } .t-home #values .sub p { font-size: 16px; color: #666; } /* 숫자 띠 높이 287 · 숫자 38px */ .hm-stats { margin-top: 120px; padding: 0; min-height: 287px; display: flex; align-items: center; } .t-home #values { padding-bottom: 0; } .hm-stats b { font-size: 38px; color: #c8ab77; } .hm-stats li { font-size: 15px; } /* 걸어온 길: 820px 가운데, 연도 32px 남색, 내용 20px 700 */ .t-home #history .table-box { max-width: 820px; } .t-home #history tbody th { width: 150px; font-size: 32px; color: #1e2c4f; padding-top: 22px; padding-bottom: 22px; } .t-home #history tbody th::before { top: 38px; } .t-home #history tbody td { font-size: 20px; font-weight: 700; padding-top: 30px; } /* 업무 분야: 3칸 — 카드 모양은 파일 끝 "업무 분야 카드" 한 곳 */ @media (min-width: 900px) { .hm-practice-cards .sc-gc__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } .sec.hm-dark .prose { margin-bottom: 50px; } /* 판례 분석: 3칸 카드(레퍼런스 성공사례 자리 435폭) */ .t-home #cases ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; justify-content: stretch; margin-top: 40px; } .t-home #cases li a { display: flex; align-items: center; justify-content: space-between; min-height: 120px; border-radius: 18px; padding: 0 32px; font-size: 18px; font-weight: 700; box-shadow: 2px 2px 40px rgba(0, 0, 0, .06); border: 0; } .t-home #cases li a::after { content: "→"; color: #b3925c; font-size: 20px; } @media (max-width: 899px) { .t-home #cases ul { grid-template-columns: 1fr; } } /* 방송: 카드 435×353 · 모서리 18 · 바탕 #e9ebee */ .t-home #media { background: #e9ebee; } .t-home #media .subs { gap: 23px; } .t-home #media .sub-media { border-radius: 18px; min-height: 353px; } .t-home #media .sub-media h3 { font-size: 15.5px; font-weight: 600; } /* FAQ 폭 960 가운데 · 바탕 #e9ebee */ .t-home #faq { background: #e9ebee; } #faq .sc-faq, #faq .faq-list { max-width: 960px; margin-left: auto; margin-right: auto; } /* 메인은 상담 섹션이 레퍼런스 Contact 자리라 아래 상담 띠를 두지 않는다 */ .t-home .sc-l3 { display: none; } /* 메인 상담: 레퍼런스 Contact처럼 어두운 바탕 */ .t-home #consult { background: #0b0e15 url("/home/assets/img/office-wall.webp") center / cover no-repeat; position: relative; isolation: isolate; color: #d9dce4; } .t-home #consult::before { content: ""; position: absolute; inset: 0; background: rgba(11, 14, 21, .78); z-index: -1; } .t-home #consult h2 { color: #fff; } .t-home #consult .sec-label { color: var(--gold-400); } .t-home #consult .prose p { color: #d9dce4; } .t-home #consult .prose a { color: var(--gold-300); } .t-home #consult :focus-visible { outline-color: var(--gold-400); } /* 푸터 위 70 · 아래 60 */ .hm-ft { padding-top: 70px; } /* 2차 맞춤(실측 비교): 메뉴 글자 폭만큼·간격 38px · 히어로 위 43px·상자 695 고정 · 원칙 카드 3칸 꽉 */ @media (min-width: 900px) { .sc-hd__menu { gap: 38px; } .sc-hd .sc-m, .sc-hd .sc-dd__btn { padding-left: 0; padding-right: 0; } .hero.hm-hero { padding-top: 43px; } .hm-hero__box { height: clamp(560px, 36.2vw, 695px); min-height: 0; } .hm-hero__in { padding-top: 40px; padding-bottom: 40px; height: 100%; } .t-home #values .sc-sp2__txt { width: 100%; max-width: none; grid-column: 1 / -1; } .t-home #values .subs { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } } .sec-label::after { margin-top: 18px; margin-bottom: 4px; } @media (min-width: 900px) { .t-home #values .subs { gap: 23px !important; } } /* 메인 소개 3차 — 레퍼런스 Attorney: 사진 420 정사각 왼쪽 · 오른쪽 글 묶음 · 아래 약력 상자 */ .t-home #attorney { background: #fff; } .hm-att__name { font-size: clamp(32px, 2.6vw, 44px); font-weight: 600; color: #171717; margin: 0; line-height: 1.3; } .hm-att__name span { font-size: 20px; font-weight: 500; color: #555; margin-left: 8px; } .hm-att__en { font-size: 20px; font-weight: 500; color: #999; letter-spacing: .12em; margin: 4px 0 26px; } .hm-att__contact { display: flex; flex-wrap: wrap; gap: 10px 36px; background: #f5f6f8; border-radius: 12px; padding: 20px 26px; margin: 26px 0 0; font-size: 17px; } .hm-att__contact b { color: #1e2c4f; font-weight: 600; margin-right: 6px; } .hm-att__contact a { color: #171717; text-decoration: none; } .hm-att__career { margin-top: 60px; } @media (min-width: 900px) { .t-home #attorney .sc-sp2 { display: grid !important; grid-template-columns: 420px minmax(0, 1fr); column-gap: 60px; row-gap: 0; align-items: center; } .t-home #attorney .sc-sp2__txt { display: block; grid-column: 2; grid-row: 1; } .t-home #attorney .sc-sp2__txt > p { font-size: 18px; line-height: 1.7; color: #444; margin: 0 0 6px; align-self: auto; } .t-home #attorney .sc-sp2__txt > p.hm-att__name { font-size: 44px; color: #171717; } .t-home #attorney .sc-sp2__txt > p.hm-att__name, .t-home #attorney .sc-sp2__txt > p.hm-att__en { align-self: auto; } .t-home #attorney .sc-sp2__txt > p.hm-att__en { margin-top: 4px; } .t-home #attorney .sc-sp2__ph { grid-column: 1; grid-row: 1; } .hm-att__career .subs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .hm-att__career .subs .sub:last-child { grid-column: 1 / -1; } } .hm-att__career { background: none; } .hm-att__career .sub { background: #fff; border-radius: 20px; padding: 44px 40px; box-shadow: 2px 2px 40px rgba(0, 0, 0, .06); margin: 0 0 20px; } .hm-att__career h3 { font-size: 22px; font-weight: 700; margin: 0 0 18px; } /* 판례 카드에는 체크 표시 없음 */ .t-home #cases ul > li { padding-left: 0; } .t-home #cases ul > li::before { content: none; display: none; } /* 메인 상담 — 넓은 지도 + 두 칸(레퍼런스 Contact) */ .hm-contact { margin-top: 56px; } .hm-contact__map { display: block; border-radius: 16px; overflow: hidden; background: #fff; } .hm-contact__map img { width: 100%; height: auto; aspect-ratio: 1098 / 438; object-fit: cover; } .hm-contact__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; text-align: left; } .hm-contact__h { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 16px; } .hm-contact dl { margin: 0; } .hm-contact dl > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 15px; } .hm-contact dt { color: var(--gold-400); font-weight: 600; } .hm-contact dd { margin: 0; color: #d9dce4; } .hm-contact a { color: #fff; } @media (max-width: 899px) { .hm-contact__cols { grid-template-columns: 1fr; gap: 28px; } } /* 메인 사건 절차 4단계 — 원칙 카드와 같은 모양(번호 금색) */ .t-home #process .prose { text-align: center; } .t-home #process .prose > p { max-width: 860px; margin-left: auto; margin-right: auto; } .t-home #process .prose ol { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; counter-reset: hmp; text-align: left; } .t-home #process .prose ol > li { margin: 0; background: #fff; border-radius: 20px; padding: 40px 32px 34px; box-shadow: 2px 2px 40px rgba(0, 0, 0, .06); counter-increment: hmp; font-size: 15px; color: #666; line-height: 1.7; } .t-home #process .prose ol > li::before { content: "0" counter(hmp); display: block; color: #b3925c; font-size: 34px; font-weight: 600; margin-bottom: 14px; } .t-home #process .prose ol > li strong { display: block; font-size: 19px; font-weight: 800; color: #171717; margin-bottom: 10px; } .t-home #process .cta-row { justify-content: center; margin-top: 40px; } @media (max-width: 899px) { .t-home #process .prose ol { grid-template-columns: 1fr; } } /* FAQ — 레퍼런스: 흰 상자 모서리 16 · 질문 앞 금색 "Q." 19px */ #faq .sc-faq__item { border-radius: 16px; background: #fff; border: 0; box-shadow: none; } #faq .sc-faq__t::before { content: "Q."; color: #b3925c; font-weight: 700; font-size: 19px; margin-right: 12px; } #faq .sc-faq__t { font-size: 17px; font-weight: 600; } /* 도구 보정(레퍼런스 맞춤 뒤) */ .t-home #process { background: #f4f5f7; } .t-home #cases { background: #fff; } .sec-label, .t-home .sec-label { color: #6f5323; } .sec.hm-dark .sec-label, .t-home #consult .sec-label { color: var(--gold-400); } .hm-att__en { color: #6b6b6b; } .hero.hm-hero { padding-left: max(var(--gutter), calc((100% - 1600px) / 2)); padding-right: max(var(--gutter), calc((100% - 1600px) / 2)); } @media (min-width: 900px) { .t-home #attorney .sc-sp2__txt { min-height: 525px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } } @media (max-width: 599px) { } .t-home #process { background: var(--ivory); } /* 히어로 상자 좌우: 1648px 미만은 헤더 글 칸과 같은 선(1440px에서 레퍼런스와 25px 차이), 1648px 이상은 레퍼런스 그대로 최대 1600px */ .hero.hm-hero { padding-left: max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter))); } @media (min-width: 1648px) { .hero.hm-hero { padding-left: calc((100% - 1600px) / 2); padding-right: calc((100% - 1600px) / 2); } } /* ════ 헤더 메뉴·드롭다운·호버 — 레퍼런스(hm-law.kr .hm-header) CSS 값 그대로 (사용자 2026-10-22 "navbar 디자인을 레퍼런스와 동일하게. 드롭다운·호버도") ════ 메뉴: 16px 500 #171717, 위아래 10px, 간격 38px, 밑줄 없이 호버 때 금색 #b3925c(0.2s). 묶음 메뉴 옆 6px 꺾쇠(투명도 .6). 드롭다운: 280px 흰 상자, 테두리 #e5e6ec, 모서리 16, 그림자 0 14 40 .12, 메뉴 아래 12px, 10px 올라오며 0.2s 나타남. 항목: 11px 22px, 14.5px 500(레퍼런스의 금색 번호는 사용자 지정으로 뺌), 호버 바탕 #faf7f2·글자 남색 #1e2c4f. 다른 점: 호버·지금 페이지 글자는 같은 색조의 짙은 금색 #8c7248(흰 바탕 대비 4.55 — 레퍼런스 #b3925c는 2.9라 호버 글자 대비 규칙 R-19에 걸림). */ @media (min-width: 900px) { .site-header.sc-hd .sc-hd__bg, .site-header.sc-hd.is-scrolled .sc-hd__bg { background: #fff; border-bottom: 1px solid #eee; box-shadow: none; } .sc-hd .sc-hd__menu { gap: 52px; } /* 레퍼런스 38px → 사용자 2026-10-22 "메뉴간 간격 조금만 늘리자"(메뉴가 6개에서 4개로 줄어 여유가 있음) */ .sc-hd .sc-m, .sc-hd .sc-dd__btn { height: auto; padding: 10px 0; gap: 0; border-radius: 0; background: transparent; font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: -0.01em; color: #171717; transition: color .2s, background-color .2s; } .sc-hd .sc-m::after { display: none; } .sc-hd .sc-m:hover, .sc-hd .sc-m:focus-visible, .sc-hd .sc-dd__btn:hover, .sc-hd .sc-dd.is-open .sc-dd__btn { color: #8c7248; background: transparent; } .sc-hd .sc-m[aria-current="page"], .sc-hd .sc-dd__btn[aria-current] { color: #8c7248; font-weight: 500; } .sc-hd .hm-dd .sc-dd__btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 2px 3px 7px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); opacity: .6; } /* 오른쪽 2px: 45도 돌린 모서리가 칸 밖으로 넘치지 않게(design-lint 17) */ .sc-hd .hm-dd { position: relative; } .sc-hd .hm-dd .sc-dd__panel { display: block; top: calc(100% + 12px); left: 50%; right: auto; width: max-content; min-width: 280px; padding: 10px 0; margin: 0; background: #fff; border: 1px solid #e5e6ec; border-radius: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, .12); transform: translate(-50%, 10px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 110; } .sc-hd .hm-dd.is-open .sc-dd__panel, html:not(.sc-js) .sc-hd .hm-dd:is(:hover, :focus-within) .sc-dd__panel { transform: translate(-50%, 0); } .sc-hd .hm-dd .sc-dd__panel::before { top: -22px; height: 22px; } .hm-dd__ul { list-style: none; margin: 0; padding: 0; } .hm-dd__ul li { margin: 0; padding: 0; } .sc-hd .hm-dd__ul a { display: flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: 14.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; color: #171717; text-decoration: none; transition: color .2s, background-color .2s; } .sc-hd .hm-dd__ul a:hover, .sc-hd .hm-dd__ul a:focus-visible, .sc-hd .hm-dd__ul a[aria-current="page"] { background: #faf7f2; color: #1e2c4f; } } @media (min-width: 900px) and (prefers-reduced-motion: reduce) { .sc-hd .hm-dd .sc-dd__panel { transition: none; } } /* 레퍼런스는 안쪽 84px + 아래 테두리 1px = 85 — 메뉴 세로 중심을 42px에 맞춘다 */ @media (min-width: 900px) { .site-header.sc-hd .sc-hd__in { height: 84px; min-height: 84px; } .site-header.sc-hd { min-height: 85px; } } /* 좁은 데스크톱 — 레퍼런스처럼 1080px 이하 메뉴 간격 24px, 메뉴 칸은 줄어들지 않게(글자 잘림 방지) */ @media (min-width: 900px) { .sc-hd .sc-hd__menu > li { flex: none; } } @media (min-width: 900px) and (max-width: 1080px) { .sc-hd .sc-hd__menu { gap: 36px; } } /* 허브 주소가 있는 드롭다운은 메뉴 글자가 링크(a.sc-dd__btn) — 밑줄 없이 버튼과 같은 모양 */ .sc-hd a.sc-dd__btn { text-decoration: none; } /* ════ 하위 페이지 머리 = 메인 히어로 상자와 같은 자리·크기 (사용자 2026-10-22 "매거진을 제외한 페이지 hero 영역은 메인페이지 hero영역과 동일하게") ════ 위 여백(모바일 12 · 900px 이상 43), 좌우(1648px 미만은 헤더 글 칸 선, 이상은 1600px 상자), 모서리(모바일 20 · 28), 높이(900px 이상 560~695)를 메인 .hero.hm-hero·.hm-hero__box와 같게. 상자 안 글(빵부스러기·라벨·제목·리드)은 세로 가운데. 모바일은 메인처럼 인물 사진이 없어 높이는 글 길이대로 */ .page-head.hm-ph { padding: 12px max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter))) 0; } .page-head.hm-ph > .wrap { max-width: none; padding: 0; } .hm-ph__box { border-radius: 20px; } @media (min-width: 900px) { .page-head.hm-ph { padding-top: 43px; } .hm-ph__box { border-radius: 28px; height: clamp(560px, 36.2vw, 695px); display: flex; flex-direction: column; justify-content: center; align-items: center; } .hm-ph__box > * { width: 100%; } } @media (min-width: 1648px) { .page-head.hm-ph { padding-left: calc((100% - 1600px) / 2); padding-right: calc((100% - 1600px) / 2); } } /* ════ 납품 직전 디자인 검수 반영 (2026-10-22, docs/review/findings.json D-…-003·004·005·007·008·009) ════ */ /* D-007 히어로 정보 줄: 가운뎃점이 줄 끝에 매달리던 것 — 점 없이 간격으로만 나눈다 */ .hm-hero__tags { gap: 6px 18px; } /* D-003 소개 페이지 회의 사진: 비율대로 잘라 채우고(늘어남 방지) 데스크톱에서 너무 커지지 않게 */ .single-photo img { object-fit: cover; height: auto; } @media (min-width: 900px) { .single-photo { max-width: 720px; margin-left: auto; margin-right: auto; } } /* 원본 640px — 크게 늘리면 흐려진다 */ /* D-005 모바일 하위 머리: 긴 리드가 가운데 정렬이라 읽기 어렵던 것 — 767px 이하는 상자 전체 왼쪽 정렬 */ @media (max-width: 767px) { .hm-ph__box { text-align: left; } .hm-ph .crumbs ol, .hm-ph .cta-row { justify-content: flex-start; } .hm-ph__label::after { margin-left: 0; } .hm-ph .lead { margin-left: 0; } } /* D-008 맨 위로 버튼: 한 화면 이상 내린 뒤에만(site.js가 html.sc-past). 투명도·visibility만 바꿔 자리는 그대로. JS가 없으면 늘 보임 */ html.sc-js:not(.sc-past) .sc-qb__t[data-qb="top"] { opacity: 0; visibility: hidden; pointer-events: none; } .sc-qb__t[data-qb="top"] { transition: opacity .2s, visibility .2s; } /* D-009 푸터 보조 글자 13px 이상, 링크 누름 영역 위아래 여유 */ .hm-ft__addr small, .hm-ft__disc, .hm-ft__copy { font-size: 13px; } .hm-ft__nav a { display: inline-block; padding: 6px 0; } /* ════ 메인 히어로 높이 = 레퍼런스 실측(hm-law.kr .hm-visual_banner, 2026-10-22): 768px 이상 760px, 767px 이하 700px ════ 사용자 2026-10-22 "메인페이지 hero height를 레퍼런스와 동일하게". 하위 페이지 머리 상자도 같은 높이(P16). 767px 이하는 레퍼런스 모바일처럼 배지·제목·리드만 두고 인물 사진이 아래에서 잘린다 — 정보 줄·광고 표시·버튼은 숨김 (전화는 화면 아래 고정 퀵바, 광고책임 표시는 푸터, 정보 줄 사실은 숫자 띠·오시는 길에도 있다. HTML에는 그대로 남는다) */ @media (min-width: 768px) { .hm-hero__box { height: 760px !important; min-height: 0; } .hm-ph__box { height: 760px; } } @media (min-width: 768px) and (max-width: 899px) { .hm-ph__box { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 28px; } .hm-ph__box > * { width: 100%; } } @media (max-width: 767px) { .hm-hero__box { height: 700px; min-height: 0; overflow: hidden; } .hm-hero .hm-hero__tags, .hm-hero .hm-hero__op, .hm-hero .cta-row { display: none; } } /* 히어로 정보 줄을 H1 위로(사용자 2026-10-22 "서초 성범죄 전문 변호사 오선희 위에 두는게 나을듯") — 배지 아래·제목 위, 모바일에서도 보인다 */ .hm-hero .hm-hero__tags { margin: 0 0 18px; } @media (max-width: 767px) { .hm-hero .hm-hero__tags { display: flex; margin-bottom: 14px; } } /* ════ 메인 히어로 — 레퍼런스(hm-law.kr .hm-visual_banner) 동작 그대로 (사용자 2026-10-22) ════ 배경: 대리석 벽 2장, 어두운 바탕(#0c0c0e) 위 투명도 .6, 6초마다 1.4초 페이드(site.js). JS가 없거나 움직임 줄이기면 첫 장만. 높이: 화면 높이 - 160px(최소 520·최대 760), 767px 이하는 화면 높이 70%(최소 480) — P17을 고침(고정 760/700은 큰 화면에서 잰 값이었다) */ .hm-hero__box { background: #0c0c0e; } .hm-hero .hm-hero__bg { opacity: 0; transition: opacity 1.4s ease; } .hm-hero .hm-hero__bg.is-on { opacity: .6; } .hm-hero__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 55%, rgba(40, 30, 20, .25) 100%); } @media (prefers-reduced-motion: reduce) { .hm-hero .hm-hero__bg { transition: none; } } @media (min-width: 768px) { .hm-hero__box { height: clamp(520px, calc(100vh - 160px), 760px) !important; } @supports (height: 100dvh) { .hm-hero__box { height: clamp(520px, calc(100dvh - 160px), 760px) !important; } } .hm-ph__box { height: auto; min-height: clamp(520px, calc(100vh - 160px), 760px); } @supports (height: 100dvh) { .hm-ph__box { min-height: clamp(520px, calc(100dvh - 160px), 760px); } } } @media (max-width: 767px) { .hm-hero__box { height: max(480px, 70vh); } @supports (height: 100dvh) { .hm-hero__box { height: max(480px, 70dvh); } } } /* 정보 줄 → 뱃지(레퍼런스 칩과 같은 흰 테두리 알약), 글자 키움 — 사용자 2026-10-22 "텍스트 좀 키워서 뱃지 형식으로" */ .hm-hero .hm-hero__tags { gap: 10px; margin: 0 0 28px; font-size: 16px; color: #fff; } .hm-hero .hm-hero__tags > span { display: inline-flex; align-items: center; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 100px; background: rgba(0, 0, 0, .18); font-weight: 500; line-height: 1.3; white-space: nowrap; } @media (max-width: 767px) { .hm-hero .hm-hero__tags { gap: 6px; margin-bottom: 18px; font-size: 13px; } .hm-hero .hm-hero__tags > span { padding: 6px 12px; } } /* 히어로 다듬기 (사용자 2026-10-22): 배경 조금 더 어둡게 · 뱃지 글자 덜 굵게 · 데스크톱에서 뱃지 한 줄·제목 한 줄 · 리드 끝 "…수 있습니다." 안 끊기게(빌드가 span.nw) */ .hm-hero .hm-hero__bg.is-on { opacity: .48; } .hm-hero .hm-hero__tags > span { display: inline-block; font-weight: 400; } .hm-hero .hm-hero__tags > span .nw { display: inline; } .hm-hero .hm-hero__lead .nw { white-space: nowrap; } @media (min-width: 900px) { .hm-hero__text { max-width: none; } .hm-hero h1 { white-space: nowrap; } .hm-hero .hm-hero__lead { max-width: 640px; } .hm-hero .hm-hero__tags { flex-wrap: nowrap; gap: 8px; font-size: clamp(13px, calc(.62vw + 4px), 15px); position: relative; z-index: 2; } .hm-hero .hm-hero__tags > span { padding: .5em 1em; background: rgba(12, 12, 14, .45); } } @media (min-width: 1648px) { .hm-hero .hm-hero__lead { max-width: 760px; } } /* ════ 히어로 인물 = 레퍼런스(hm-law.kr .hm-visual_person) CSS 그대로 — 768px 이상 모든 폭 (사용자 2026-10-22 "데스크탑 모든 해상도에서 레퍼런스와 동일하게 몸이 보여야") ════ 칸: 오른쪽 8%, 폭 clamp(300px, 30vw, 430px), 높이 100%, 그림자. 사진: 칸 높이의 138%, 아래로 46% 내려 잘림, 가운데. 950px 이하: 오른쪽 0, 폭 240px, 높이 70%, 투명도 .6(레퍼런스와 같음). 앞서 쓴 폭 639px·top 56px 값은 잘못 잰 값이라 덮는다 */ @media (min-width: 768px) { .hm-hero .hm-hero__in { position: static; } .hm-hero .hm-hero__box { position: relative; } .hm-hero .hm-hero__person { position: absolute; top: auto; left: auto; right: 8%; bottom: 0; width: clamp(300px, 30vw, 430px); height: 100%; margin: 0; z-index: 1; align-self: auto; transform: none; filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .5)); pointer-events: none; } .hm-hero .hm-hero__person img { position: absolute; bottom: -46%; left: 50%; transform: translateX(-50%); height: 138%; width: auto; max-width: none; aspect-ratio: auto; object-fit: initial; } .hm-hero .hm-hero__text { position: relative; z-index: 2; } } @media (min-width: 768px) and (max-width: 950px) { .hm-hero .hm-hero__person { right: 0; width: 240px; height: 70%; opacity: .6; } } @media (min-width: 768px) and (max-width: 899px) { .hm-hero .hm-hero__in { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 34% 0 6%; } } /* 1400px 미만 데스크톱: 레퍼런스처럼 글 칸을 상자 왼쪽 절반 안에 — 한 줄 뱃지가 인물 얼굴을 가리거나(1100px) 상자 밖으로 잘려서(900px) 이 폭에서만 두 줄 */ @media (min-width: 900px) and (max-width: 1399px) { .hm-hero .hm-hero__tags { flex-wrap: wrap; max-width: 50vw; } .hm-hero .hm-hero__lead { max-width: min(640px, 50vw); } } /* ════ 퀵바 = 사내 표준 QB3 (사용자 2026-10-22 "퀵바 디자인도 바꿔. 우리 쓰는 디자인있잖아") ════ 레퍼런스 둥근 "전화상담" 원은 뺐다(디자인 검수 D-001·002: 900~1599px에서 본문을 가리고 헤더 전화와 겹침). 900px 이상: 오른쪽 가운데 세로 타일 — 본문 글 칸(1352px) 옆 여백에 타일(68px)+여백이 들어가는 1528px 이상에서만 보인다(그 아래는 본문을 덮어 숨김). 테두리 없이 그림자만(modern-design.md 2026-10-21). 채널(플레이스·블로그·유튜브·네이버TV)은 각 아이콘. 899px 이하: 하단 줄 6칸(오시는 길은 숨김 — 메뉴·플레이스가 맡는다) */ @media (min-width: 900px) { .sc-qb--qb3 { right: 20px; top: 50%; bottom: auto; transform: translateY(-50%); } .sc-qb--qb3 .sc-qb__t:not([data-qb="top"]) { display: flex; } .sc-qb--qb3 .sc-qb__t[data-qb="top"] { width: 68px; height: 44px; border-radius: 14px; } } @media (max-width: 899.98px) { .sc-qb .sc-qb__desk { display: none; } } .hm-call { display: none !important; } /* 푸터 채널 — 아이콘 + 이름 */ .hm-ft__ch a { display: inline-flex; align-items: center; gap: 6px; } .hm-ft__ch .sc-ic { width: 18px; height: 18px; flex: none; } /* (2026-10-23 걷어냄) 방송 흰 바탕 덮어쓰기 — 섹션 순서를 바꿔 걸어온 길(흰색) 다음이 되어 오히려 같은 색이 됐다. 배경은 번갈아 규칙대로 */ /* 메인 아래쪽 번갈아: 절차(회) → 걸어온 길(흰) → 방송(회 #e9ebee) → FAQ(흰) → 상담(남색). FAQ sand가 방송과 같은 #e9ebee라 메인만 흰색(design-lint 5) */ .t-home #faq { background: #fff; } /* ════ 하위 페이지 머리 높이 = 메인 히어로의 절반쯤 (사용자 2026-10-22 "메인페이지 hero 제외하고 다른페이지들은 hero height 절반정도로") ════ 메인 760px → 하위 380px 안팎. 글 길이가 더 길면 그만큼 늘어난다(min-height). 위아래 안쪽 여백도 줄인다 */ @media (min-width: 768px) { .hm-ph__box { min-height: clamp(260px, calc((100vh - 160px) / 2), 380px); padding-top: 44px; padding-bottom: 44px; } @supports (height: 100dvh) { .hm-ph__box { min-height: clamp(260px, calc((100dvh - 160px) / 2), 380px); } } } /* 하위 머리 상자 아래 — 둘째 리드·작성/감수·버튼(흰 바탕, 본문 글 칸 폭) */ .hm-ph__after { max-width: 860px; margin: 28px auto 0; text-align: center; } .hm-ph__after:empty { display: none; } .hm-ph__after .lead { color: var(--ink, #1b1f27); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; margin: 0 0 10px; } .hm-ph__after .byline { color: var(--muted, #5b6270); font-size: 13px; margin-top: 10px; } .hm-ph__after .cta-row { justify-content: center; margin-top: 18px; } .hm-ph__after .sc-b1--ghost, .hm-ph__after .btn-ghost { color: var(--brown-800) !important; border-color: var(--brown-800); } .hm-ph__after .sc-b1--ghost span { color: var(--brown-800) !important; } @media (max-width: 767px) { .hm-ph__after { text-align: left; } .hm-ph__after .cta-row { justify-content: flex-start; } } /* 상자 아래(흰 바탕)로 옮긴 글 — 어두운 상자용 연한 금색 링크·포커스 대신 흰 바탕용(대비 4.5·3 이상, design-lint 11·14) */ .page-head.hm-ph .hm-ph__after a:not(.btn):not(.sc-btn) { color: #8c7248; } /* style.css .page-head a:not(.btn):not(.sc-btn)보다 우선 */ .hm-ph .hm-ph__after :focus-visible { outline-color: var(--brown-800, #131d36); } /* 채널 아이콘은 브랜드 색 그대로 — 퀵바 hover(남색 채움) 때도 바꾸지 않고, 조금 크게 */ .sc-qb .sc-qb__t .sc-ic--brand { width: 25px; height: 25px; } @media (max-width: 899px) { .sc-qb .sc-qb__t .sc-ic--brand { width: 22px; height: 22px; } } .hm-ft__ch .sc-ic--brand { width: 20px; height: 20px; } /* 900~1527px: 작은 타일(56px)로 화면 오른쪽 끝에 — 사용자 2026-10-22 "1528px 아래에선 없나? 어느정도까진 있어야" (본문 오른쪽 끝을 최대 40px쯤 덮을 수 있다) */ @media (min-width: 900px) and (max-width: 1527.98px) { .sc-qb--qb3 { right: 8px; } .sc-qb--qb3 .sc-qb__list { gap: 6px; } .sc-qb--qb3 .sc-qb__t { width: 56px; height: 52px; border-radius: 12px; gap: 3px; font-size: 10.5px; } .sc-qb--qb3 .sc-qb__t .sc-ic { width: 20px; height: 20px; } .sc-qb--qb3 .sc-qb__t[data-qb="top"] { width: 56px; height: 40px; } } /* ════ 메인 히어로 꽉 채움 (사용자 2026-10-22 "메인 hero는 꽉차게하자") — 좌우 여백·둥근 모서리 없이 화면 폭 끝까지, 헤더 바로 아래. 높이는 그대로(P18) ════ */ .hero.hm-hero { padding: 0 !important; max-width: none; } .hm-hero .hm-hero__box { max-width: none; width: 100%; border-radius: 0; } @media (min-width: 1648px) { .hero.hm-hero { padding: 0 !important; } } /* 글은 헤더 글 칸 왼쪽 선에 맞춘다(상자가 넓어져도 글이 화면 끝에 붙지 않게) */ @media (min-width: 900px) { .hm-hero .hm-hero__in { padding-left: max(var(--gutter), calc((100% - 1352px) / 2)); padding-right: max(var(--gutter), calc((100% - 1352px) / 2)); } } /* 꽉 찬 히어로의 글 칸 좌우 = 헤더 글 칸(--gutter) — 모바일·태블릿(design-lint 17 ③). 768~899px는 글 폭만 62%로(인물 자리) */ @media (max-width: 899.98px) { .hm-hero .hm-hero__in { padding-left: var(--gutter); padding-right: var(--gutter); } } @media (min-width: 768px) and (max-width: 899.98px) { .hm-hero .hm-hero__text { max-width: 62%; } } /* 모바일 하단 퀵바 칸 테두리(사용자 2026-10-22 "모바일 퀵바 테두리가 있어야될듯") — 데스크톱 타일은 그림자만 그대로 */ @media (max-width: 899.98px) { } /* ════ 퀵바 = 사내 표준 QB2 흰 유리 타일 그대로 (사용자 2026-10-22 "localhost:8751 퀵바디자인을 이거랑 동일하게") ════ 공용 quickbar.css의 QB2 모양을 그대로 쓴다(70×62 타일·모서리 16·흰 유리·전화만 채움 / 모바일 흰 유리 띠·칸 테두리 없음·맨 위로 원). 위의 QB3용 덧씌우기(작은 타일·칸 테두리)는 .sc-qb--qb3에만 걸려 더 쓰이지 않는다. 900px 이상은 폭과 관계없이 오른쪽(사용자 지정) */ /* 오른쪽 퀵바(900px 이상) — 사용자 2026-10-22: 모든 버튼 흰 바탕(대표전화도), 테두리 없이 그림자만, 호버 때 살짝 떠오름, 대표전화·직통·오시는 길 아이콘에 색. 글자는 짙은 남색(흰 바탕 대비 충분). 모바일 하단 띠는 QB2 그대로 */ @media (min-width: 900px) { .sc-qb--qb2 .sc-qb__t, .sc-qb--qb2 .sc-qb__t[data-qb="call"] { background: #fff; color: #1e2c4f; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 6px rgba(19, 29, 54, .06), 0 10px 24px rgba(19, 29, 54, .12); transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s; } .sc-qb--qb2 .sc-qb__t .sc-ic { transition: transform .28s cubic-bezier(.2, .7, .3, 1); } .sc-qb--qb2 .sc-qb__t:hover, .sc-qb--qb2 .sc-qb__t:focus-visible, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:hover, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:focus-visible { background: #fff; color: #1e2c4f; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(19, 29, 54, .08), 0 16px 32px rgba(19, 29, 54, .18); } .sc-qb--qb2 .sc-qb__t:hover .sc-ic, .sc-qb--qb2 .sc-qb__t:focus-visible .sc-ic { transform: scale(1.1); } .sc-qb--qb2 .sc-qb__t[data-qb="call"] .sc-ic { color: #2563eb; } .sc-qb--qb2 .sc-qb__t[data-qb="mobile"] .sc-ic { color: #0d9488; } .sc-qb--qb2 .sc-qb__t[data-qb="map"] .sc-ic { color: #ea580c; } } @media (min-width: 900px) and (prefers-reduced-motion: reduce) { .sc-qb--qb2 .sc-qb__t, .sc-qb--qb2 .sc-qb__t .sc-ic { transition: none; } .sc-qb--qb2 .sc-qb__t:hover, .sc-qb--qb2 .sc-qb__t:hover .sc-ic { transform: none; } } /* 사용자 2026-10-22 "퀵바 너무 하얀데 조금어둡게" — 아주 옅은 회청색 바탕 + 그림자 조금 진하게 */ @media (min-width: 900px) { .sc-qb--qb2 .sc-qb__t, .sc-qb--qb2 .sc-qb__t[data-qb="call"], .sc-qb--qb2 .sc-qb__t:hover, .sc-qb--qb2 .sc-qb__t:focus-visible, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:hover, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:focus-visible { background: #eef1f6; } .sc-qb--qb2 .sc-qb__t, .sc-qb--qb2 .sc-qb__t[data-qb="call"] { box-shadow: 0 2px 6px rgba(19, 29, 54, .08), 0 10px 24px rgba(19, 29, 54, .16); } } /* 히어로 뱃지 테두리 더 얇게 보이게(사용자 2026-10-22) — 1px 그대로 두고 투명도를 낮춘다(1px 미만은 일반 화면에서 1px로 그려진다) */ .hm-hero .hm-hero__tags > span { border-color: rgba(255, 255, 255, .42); } /* 사용자 2026-10-22 "우측 퀵바 조금더 어둡게" — #eef1f6 → #e2e7ef */ @media (min-width: 900px) { .sc-qb--qb2 .sc-qb__t, .sc-qb--qb2 .sc-qb__t[data-qb="call"], .sc-qb--qb2 .sc-qb__t:hover, .sc-qb--qb2 .sc-qb__t:focus-visible, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:hover, .sc-qb--qb2 .sc-qb__t[data-qb="call"]:focus-visible { background: #e8ecf2; } } /* 메인 히어로 "오시는 길" 버튼 호버 — 배경·글자색은 그대로(사용자 2026-10-22 "호버이벤트 별로야. 배경색은 안변하게"), 테두리만 또렷하게 + 살짝 떠오름 + 화살표가 오른쪽으로 */ .hm-hero a.sc-btn.sc-b1--ghost { transition: transform .25s cubic-bezier(.2, .7, .3, 1), border-color .25s, box-shadow .25s; } .hm-hero a.sc-btn.sc-b1--ghost:hover, .hm-hero a.sc-btn.sc-b1--ghost:focus-visible { background: rgba(11, 14, 21, .45); border-color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px #fff, 0 10px 22px rgba(0, 0, 0, .3); } .hm-hero a.sc-btn.sc-b1--ghost:hover, .hm-hero a.sc-btn.sc-b1--ghost:hover span, .hm-hero a.sc-btn.sc-b1--ghost:focus-visible span { color: #fff !important; } .hm-hero a.sc-btn.sc-b1--ghost .sc-ic { transition: transform .25s cubic-bezier(.2, .7, .3, 1); } .hm-hero a.sc-btn.sc-b1--ghost:hover .sc-ic, .hm-hero a.sc-btn.sc-b1--ghost:focus-visible .sc-ic { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .hm-hero a.sc-btn.sc-b1--ghost:hover, .hm-hero a.sc-btn.sc-b1--ghost:hover .sc-ic { transform: none; } } /* ════ 메인 숫자 띠 · 걸어온 길 — 모던 보강 (사용자 2026-10-22 "두 섹션 디자인이 너무 허접해. 모던하게") ════ */ /* 숫자 띠: 은은한 빛의 남색 그라데이션 + 반투명 유리 카드 4장, 금색 그라데이션 큰 숫자·작은 단위, 카드 위 짧은 금색 선 */ .hm-stats { position: relative; overflow: hidden; min-height: 0; padding: clamp(64px, 7vw, 96px) 0; background: radial-gradient(60% 120% at 12% 0%, rgba(201, 168, 110, .16) 0%, rgba(201, 168, 110, 0) 60%), radial-gradient(50% 100% at 92% 100%, rgba(80, 112, 190, .22) 0%, rgba(80, 112, 190, 0) 60%), linear-gradient(135deg, #0f1730 0%, #18233f 55%, #0c1226 100%); } .hm-stats::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 0%, transparent 100%); mask-image: radial-gradient(70% 90% at 50% 50%, #000 0%, transparent 100%); pointer-events: none; } .hm-stats ul { position: relative; gap: clamp(12px, 1.6vw, 24px); text-align: left; } .hm-stats li { position: relative; gap: 14px; padding: clamp(26px, 2.6vw, 40px) clamp(22px, 2.2vw, 34px) clamp(24px, 2.4vw, 34px); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 100%); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); color: #c9cfdc; font-size: 15px; font-weight: 500; letter-spacing: -.01em; transition: transform .3s cubic-bezier(.2, .7, .3, 1), border-color .3s, background-color .3s; } .hm-stats li::before { content: ""; position: absolute; left: clamp(22px, 2.2vw, 34px); top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #e2c58d, #b3925c); } .hm-stats li:hover { transform: translateY(-4px); border-color: rgba(226, 197, 141, .35); } .hm-stats b { display: flex; align-items: baseline; gap: 4px; line-height: 1; font-size: inherit; color: #e2c58d; } .hm-stats__n { font-size: clamp(44px, 4.4vw, 64px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #f3dfb4 0%, #c9a86e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hm-stats__u { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; color: #d9bd86; } @media (max-width: 899px) { .hm-stats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .hm-stats li { font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { .hm-stats li, .hm-stats li:hover { transition: none; transform: none; } } /* 걸어온 길: 한쪽 세로 타임라인(사용자 2026-10-23 "지그재그 별로야. 좀더 모던한 타임라인") — 왼쪽 연도(Cormorant 기울임, P22 확장) · 가는 금색 세로선과 점 · 오른쪽 이력, 줄 사이 가는 선. 최신 연도 점만 채움. 표(table) 마크업은 그대로(읽는 순서 = 연도 → 이력) */ .t-home #history .table-box { max-width: 880px; } .t-home #history table, .t-home #history tbody { display: block; width: 100%; min-width: 0; } .t-home #history tbody { position: relative; } .t-home #history tbody::before { content: ""; position: absolute; top: var(--hy-dot); bottom: 40px; left: calc(var(--hy-w) + var(--hy-gap) / 2); width: 1px; background: linear-gradient(180deg, #c9a86e, rgba(201, 168, 110, .25)); } .t-home #history tbody { --hy-w: 110px; --hy-gap: 64px; --hy-pad: 24px; --hy-dot: 41px; } .t-home #history tbody tr { position: relative; display: grid; grid-template-columns: var(--hy-w) minmax(0, 1fr); column-gap: var(--hy-gap); align-items: start; } .t-home #history tbody tr:last-child td { border-bottom: 0; } .t-home #history tbody tr::after { content: ""; position: absolute; top: var(--hy-dot); left: calc(var(--hy-w) + var(--hy-gap) / 2); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; border: 1px solid #c9a86e; } .t-home #history tbody tr:first-child::after { background: #c9a86e; box-shadow: 0 0 0 5px rgba(201, 168, 110, .18); } .t-home #history tbody th, .t-home #history tbody td { display: block; width: auto; padding: 0; border: 0; background: none; box-shadow: none; position: static; } .t-home #history tbody th::before, .t-home #history tbody th::after { content: none; display: none; } .t-home #history tbody th { text-align: right; font: italic 500 34px/1 "HM Label", "Cormorant Garamond", Georgia, serif; letter-spacing: 0; color: #977640; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; grid-row: 1 / span 2; padding-top: calc(var(--hy-pad) + 2px); } .t-home #history tbody td { grid-column: 2; } .t-home #history tbody td:nth-of-type(1) { padding: var(--hy-pad) 0 6px; font-size: 18px; font-weight: 700; line-height: 1.5; color: #1f2633; } .t-home #history tbody td:nth-of-type(2) { padding: 0 0 var(--hy-pad); font-size: 15.5px; font-weight: 400; line-height: 1.7; color: #666; border-bottom: 1px solid #eceae5; } @media (max-width: 899px) { .t-home #history tbody { --hy-w: 56px; --hy-gap: 32px; --hy-pad: 20px; --hy-dot: 34px; } .t-home #history tbody th { font-size: 26px; } .t-home #history tbody td:nth-of-type(1) { font-size: 16px; } .t-home #history tbody td:nth-of-type(2) { font-size: 14.5px; } } /* ── 영어 라벨 글씨체 (사용자 2026-10-23 "Cormorant Garamond 기울임이 좋다", decisions P22) ── 한글과 같은 Pretendard라 어색하다는 지적 → 영어 라벨만 세리프 기울임. 대문자·넓은 자간을 풀고(필기체처럼) 크기를 키운다. 글꼴이 늦게 와도 줄 높이를 고정해 아래 H2가 밀리지 않는다(layout-stability) */ .sec-label, .hm-ph__label, .hm-att__en { font-family: "HM Label", Georgia, serif; font-style: italic; font-weight: 500; text-transform: none; } .sec-label { font-size: clamp(22px, 1.2vw + 16px, 26px); line-height: 32px; letter-spacing: .04em; } .hm-ph__label { font-size: 21px; line-height: 28px; letter-spacing: .04em; } .hm-att__en { font-size: 24px; line-height: 30px; letter-spacing: .03em; } /* ════ 하위 페이지 히어로: 업체 촬영 실사 배경 + 리드·작성/감수·버튼까지 상자 안 (사용자 2026-10-23) ════ 상자 높이는 고정(760)에서 최소 높이로 — 글이 늘어나도 넘치지 않는다. 사진은 absolute 층이라 불러오기 전후 높이가 같다(layout-stability) */ .hm-ph__box { position: relative; overflow: hidden; isolation: isolate; } .hm-ph__bg { position: absolute; inset: 0; z-index: -1; background: #0b0e15; } .hm-ph__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } /* 글이 가운데라 가운데를 더 어둡게 — 흰 글자 대비 4.5:1 이상 */ .hm-ph__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(8, 11, 19, .82), rgba(8, 11, 19, .62)); } .hm-ph__in { position: relative; width: 100%; max-width: 900px; margin: 0 auto; } .hm-ph__box.has-bg .lead { color: rgba(255, 255, 255, .88); } .hm-ph__box .lead + .lead { margin-top: 4px; } .hm-ph__box .byline { color: rgba(255, 255, 255, .72); } .hm-ph__box .byline a { color: var(--gold-300); } @media (min-width: 768px) { .hm-ph__box { height: auto; min-height: 560px; padding-top: 72px; padding-bottom: 72px; } } @media (min-width: 900px) { .hm-ph__box { min-height: clamp(560px, 36.2vw, 695px); } } @media (max-width: 767px) { .hm-ph__in { max-width: none; } } /* 섹션 제목 아래 소개(원고 sub, 2026-10-23) — H2 아래 여백 안쪽으로 붙인다 */ .sec .sec-sub { max-width: 720px; margin: -36px auto 56px; text-align: center; color: var(--muted, #5b6270); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.75; } body:not(.t-home) .sec .sec-sub { margin: -8px 0 28px; text-align: left; } @media (max-width: 767px) { .sec .sec-sub { margin: -24px auto 36px; } } /* ════ 업무 분야 카드 (사용자 2026-10-23 "레이아웃 이상, hover 파란색·자세히 보기 파란색 이상") ════ 썸네일 위·글 아래 세로 카드. 크기·썸네일 1:1은 하위 페이지 안내 콘텐츠 카드와 같게(사용자 2026-10-23 "오시는길 페이지 썸네일 카드 크기로 모두 맞춰"). hover는 색을 바꾸지 않고 살짝 떠오름 + 사진 확대만. 링크색(파랑) 대신 라벨과 같은 금색 계열 */ .hm-practice-cards .sc-gc__card { display: flex; flex-direction: column; background: #fff; border: 0; border-radius: 14px; overflow: hidden; padding: 0; min-height: 0; } .hm-practice-cards .sc-gc__img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; background: #1b1f27; } .hm-practice-cards .sc-gc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sc-ease); } .hm-practice-cards .sc-gc__body { padding: 18px 20px 20px; gap: 8px; background: #fff; } .hm-practice-cards .sc-gc__t { font-size: 18px; line-height: 1.35; font-weight: 700; color: #171717; } .hm-practice-cards .sc-gc__d { font-size: 15px; color: #666; } .hm-practice-cards .sc-gc__more { color: #6f5323; font-size: 14.5px; font-weight: 600; padding-top: 10px; } .hm-practice-cards .sc-gc__card:hover, .hm-practice-cards .sc-gc__card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); border-color: transparent; } .hm-practice-cards .sc-gc__card:hover .sc-gc__t, .hm-practice-cards .sc-gc__card:focus-visible .sc-gc__t { color: #171717; } .hm-practice-cards .sc-gc__card:hover .sc-gc__more, .hm-practice-cards .sc-gc__card:focus-visible .sc-gc__more { color: #6f5323; } .hm-practice-cards .sc-gc__card:hover .sc-gc__img img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .hm-practice-cards .sc-gc__img img, .hm-practice-cards .sc-gc__card { transition: none; } .hm-practice-cards .sc-gc__card:hover .sc-gc__img img { transform: none; } } /* 안내 콘텐츠·메인 업무 분야 카드 — PC에서 카드가 커 보여 목록 폭을 줄이고 간격을 넓힘(사용자 2026-10-23 "카드가 너무 큰거같다. 카드 사이 여백") */ @media (min-width: 900px) { .sc-gc--0 .sc-gc__list, .hm-practice-cards .sc-gc__list { max-width: 1120px; margin-left: auto; margin-right: auto; gap: 36px 32px; } } /* 메인 변호사 소개 — 흰 섹션 위 약력 상자·연락처 상자 테두리가 흐릿해(사용자 2026-10-23 "카드 테두리가 애매") 얇은 선 + 조금 짙은 그림자 */ .t-home #attorney .subs .sub { background: #fff; border: 1px solid #e3e6eb; box-shadow: 0 8px 28px rgba(15, 23, 42, .08); } .hm-att__contact { border: 1px solid #e3e6eb; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); } /* 업무 분야 카드 — 따뜻한 아이보리(사용자 2026-10-23 비교 2안: 흰색보다 한 톤 누그러뜨림, 금색 라벨과 어울림) */ .hm-practice-cards .sc-gc__card, .hm-practice-cards .sc-gc__body { background: #f6f1e7; } .hm-practice-cards .sc-gc__card { box-shadow: 0 14px 36px rgba(0, 0, 0, .35); } .hm-practice-cards .sc-gc__t, .hm-practice-cards .sc-gc__card:hover .sc-gc__t, .hm-practice-cards .sc-gc__card:focus-visible .sc-gc__t { color: #1d1a14; } .hm-practice-cards .sc-gc__d { color: #5e5546; } .t-home #values h3 { text-wrap: balance; } /* 320px에서 원칙 제목 끝 낱말 하나만 다음 줄로 내려가던 것(design-lint 15) */ /* 대응 원칙 번호 01·02·03 — 밋밋해 영어 라벨과 같은 Cormorant 기울임으로 크게(사용자 2026-10-23, P22 라벨 글꼴을 숫자에도) */ .t-home #values .sub h3::before { font: italic 500 64px/1 "HM Label", "Cormorant Garamond", Georgia, serif; letter-spacing: 0; color: #b3925c; margin-bottom: 18px; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } @media (max-width: 899px) { .t-home #values .sub h3::before { font-size: 52px; } } /* 메인 사건 대응 절차 번호 01~04도 대응 원칙과 같은 Cormorant 기울임(사용자 2026-10-23 "금색 01 02 03 04 이런애들 다 같은 기울임체로") */ .t-home #process .prose ol > li::before { font: italic 500 56px/1 "HM Label", "Cormorant Garamond", Georgia, serif; letter-spacing: 0; color: #b3925c; margin-bottom: 18px; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } @media (max-width: 899px) { .t-home #process .prose ol > li::before { font-size: 48px; } } @media (min-width: 900px) { .t-home #process .prose > p { max-width: 980px; } } /* 절차 소개 한 문장(약 950px)이 데스크톱에서 한 줄에(사용자 2026-10-23) */ /* ════ 숫자 띠 다시 (사용자 2026-10-23 "디자인 좀 바꾸자, 배경도 업무 분야 섹션 배경으로") ════ 배경 = 업무 분야(A-2 거의 검정 + 위 가운데 금빛 번짐). 유리 카드를 걷고 가는 금색 세로선으로 4칸, 숫자는 대응 원칙 01·02·03과 같은 Cormorant 기울임(P22 확장), 단위·설명은 Pretendard */ .hm-stats { background: #10141d; } .hm-stats::before { background: radial-gradient(60% 80% at 50% 0%, rgba(201, 167, 100, .16), transparent 70%); background-size: auto; -webkit-mask-image: none; mask-image: none; } .hm-stats ul { gap: 0; text-align: center; } .hm-stats li { padding: 8px 16px; gap: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #b9c0cd; font-size: 15px; align-items: center; } .hm-stats li + li { border-left: 1px solid rgba(201, 167, 100, .28); } .hm-stats li::before { display: none; } .hm-stats li:hover { transform: none; } .hm-stats b { justify-content: center; gap: 6px; } .hm-stats__n { font: italic 500 clamp(64px, 6vw, 88px)/1 "HM Label", "Cormorant Garamond", Georgia, serif; letter-spacing: 0; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #d8bd84; } .hm-stats__u { font-size: 18px; font-weight: 500; color: #c9a764; } @media (max-width: 899px) { .hm-stats ul { row-gap: 36px; } .hm-stats li:nth-child(odd) { border-left: 0; } .hm-stats__n { font-size: 56px; } } /* 금색 번호(대응 원칙·절차·걸어온 길) — 밝은 바탕 위 대비 3:1 넘게 한 톤 진하게(design-lint 14: #b3925c 2.92:1) */ .t-home #values .sub h3::before, .t-home #process .prose ol > li::before { color: #977640; } /* 메인 방송 출연 캐러셀 — 방송 화면은 16:9 그대로(정사각으로 자르지 않음). 자동 넘김은 site.js .carousel(사용자 2026-10-23) */ .t-home #media .carousel-slide, .t-about #broadcast .carousel-slide { aspect-ratio: 16 / 9; background: #10141d; } .t-home #media .carousel-slide img, .t-about #broadcast .carousel-slide img { object-fit: cover; } /* 방송 캐러셀: PC 한 화면 3장, 「1 / 5」 번호 표시 없음(사용자 2026-10-23) */ @media (min-width: 900px) { .t-home #media .carousel-slide, .t-about #broadcast .carousel-slide { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; } } .t-home #media .carousel-count, .t-home #media .carousel.js .carousel-count, .t-about #broadcast .carousel-count, .t-about #broadcast .carousel.js .carousel-count { display: none; } /* 메인 상담 예약 배경 = 업무 분야와 같게(거의 검정 + 위 가운데 금빛 번짐, 사진 없음 — 사용자 2026-10-23) */ .t-home #consult { background: #10141d; } .t-home #consult::before { background: radial-gradient(60% 50% at 50% 0%, rgba(201, 167, 100, .16), transparent 70%); } /* 푸터 글자·로고 키움(사용자 2026-10-23 "푸터 텍스트가 전체적으로 너무 작다. 로고도 너무 작아") */ .hm-ft { font-size: 16px; line-height: 1.85; } .hm-ft__h { font-size: 17px; } .hm-ft__nav ul { font-size: 15px; } .hm-ft__addr small, .hm-ft__disc, .hm-ft__copy { font-size: 14px; } .hm-ft__ch { font-size: 15.5px; } .hm-ft__logo img, .hm-ft .logo-img { height: 68px; width: auto; max-width: none; } @media (max-width: 899px) { .hm-ft { font-size: 15px; } .hm-ft__logo img, .hm-ft .logo-img { height: 56px; } } /* 메인 상담 섹션 오시는 길·상담 문의 표 글자 조금 키움(사용자 2026-10-23) */ .hm-contact__h { font-size: 24px; } .hm-contact dl > div { font-size: 16.5px; grid-template-columns: 84px minmax(0, 1fr); padding: 8px 0; } @media (max-width: 899px) { .hm-contact__h { font-size: 21px; } .hm-contact dl > div { font-size: 15.5px; grid-template-columns: 76px minmax(0, 1fr); } } /* ════ 메인 디자인 검수 반영 (2026-10-23, 사용자 "너가 말한대로 메인페이지 다 수정해") ════ */ /* 1. 768~899px 히어로 글이 가운데로 떠 인물과 겹치던 것 — 헤더 글 칸 왼쪽 선에 붙이고 인물(오른쪽 240px) 앞에서 끝냄 */ @media (min-width: 768px) and (max-width: 899.98px) { .hm-hero .hm-hero__in { align-items: flex-start; } .hm-hero .hm-hero__text { max-width: calc(100% - 250px); } } /* 2. 389px 이하 히어로 인물이 머리만 잘려 보이던 것 — 숨김(글이 상자 위쪽을 다 차지하는 폭) */ @media (max-width: 389.98px) { .hm-hero .hm-hero__person { display: none; } } /* 3. 방송 캐러셀 이전·다음 버튼이 화면 속 얼굴을 덮던 것 — 사진 아래 가운데로(자리는 처음부터 잡아 둠) */ .t-home #media .carousel, .t-about #broadcast .carousel { padding-bottom: 60px; } .t-home #media .carousel-btn, .t-about #broadcast .carousel-btn { top: auto; bottom: 0; transform: none; } .t-home #media .carousel-btn.prev, .t-about #broadcast .carousel-btn.prev { left: calc(50% - 52px); right: auto; } .t-home #media .carousel-btn.next, .t-about #broadcast .carousel-btn.next { left: calc(50% + 8px); right: auto; } /* 가운데 — 오른쪽 끝은 PC 퀵바가 덮는다 */ /* 4. 대응 원칙 카드 묶음 오른쪽 여백이 두 번 들어가 짧던 것 */ .t-home #values .sc-sp2__txt { padding-right: 0; } /* 5. 768~899px 변호사 사진 가운데 */ @media (max-width: 899.98px) { .t-home #attorney .sc-sp2__ph { margin-left: auto; margin-right: auto; } } /* 6. 수상·활동 상자(전체 폭) 목록을 두 단으로 */ @media (min-width: 900px) { .t-home #attorney .subs .sub:last-child ul { columns: 2; column-gap: 48px; } .t-home #attorney .subs .sub:last-child li { break-inside: avoid; } } /* 7. 한 줄 배치일 때 대응 원칙 카드 아래 빈 자리 — 고정 최소 높이 해제 */ @media (max-width: 899.98px) { .t-home #values .sub { min-height: 0; } } /* 8. 상담 섹션 전화 버튼 — 라벨과 번호를 같은 왼쪽 축으로 */ .t-home #consult .sc-b5__tx { text-align: left; } /* 9. 모바일 지도 — 가로로 너무 길어 글자가 안 읽히던 것, 4:3으로(핀이 가운데) */ @media (max-width: 767.98px) { .hm-contact__map img { aspect-ratio: 4 / 3; object-position: 50% 50%; } } /* 10. 푸터 배경은 순수 검정 그대로 — #0c0f16으로 바꾸면 위 상담 섹션(#10141d)과 대비 1.04:1로 design-lint 5(1.12:1) 오류(2026-10-23 되돌림) */ /* 11. 변호사 사진 둥근 모서리에 사진 바탕 회색이 비치던 것 — 흰 배경 사진이라 모서리 없이 */ .t-home #attorney .sc-sp2__ph { border-radius: 0; background: transparent; } #public-service td { word-break: keep-all; } /* /about/ 공공 활동 표: 360·390px에서 "한국사이버성폭력대응센터"가 낱말 중간에서 꺾이던 것(design-lint 4) */ @media (max-width: 599.98px) { #public-service .table-box { --th-w: 5.5em !important; } #public-service thead th:first-child, #public-service tbody th[scope=row] { width: 84px !important; min-width: 0 !important; padding-left: 12px; padding-right: 8px; } } /* 연도 칸(2019.05)을 좁혀 이력 칸에 긴 기관 이름이 한 줄로 들어가게 */ /* 원고 {br} 줄바꿈(메인 히어로 리드) — PC에서만, 좁은 화면은 자연스럽게 흐르게(사용자 2026-10-23 "교대역 웅진타워 이거 밑으로 내려") */ @media (max-width: 899.98px) { br.br-d { display: none; } } /* 메인 약력·주요 경력·수상·활동 제목 오른쪽 금색 영어 라벨(사용자 2026-10-26, P22 라벨 글꼴) — 대응 원칙 번호처럼 CSS 생성 글자라 H3 글자(검색·스크린리더가 읽는 제목)에는 영어가 섞이지 않는다. "/ ''"는 대체 텍스트를 비워 스크린리더가 읽지 않게. 줄 높이 고정(layout-stability) */ .hm-att__career .subs h3 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 0; } /* 320px에서 Awards & Activities가 넘쳐 가로 스크롤 — 좁으면 다음 줄로 */ .hm-att__career .subs h3::after { font: italic 500 22px/28px "HM Label", "Cormorant Garamond", Georgia, serif; letter-spacing: .03em; color: #b3925c; white-space: nowrap; } .hm-att__career .subs .sub:nth-child(1) h3::after { content: "Profile"; content: "Profile" / ""; } .hm-att__career .subs .sub:nth-child(2) h3::after { content: "Career"; content: "Career" / ""; } .hm-att__career .subs .sub:nth-child(3) h3::after { content: "Awards & Activities"; content: "Awards & Activities" / ""; } /* 메인 히어로 둘째 문단(인사말, 사용자 2026-10-26) — 첫 리드보다 한 단계 가볍게, 사이를 띄워 소개 문장과 구분 */ .hm-hero .hm-hero__lead + .hm-hero__lead { margin-top: 14px; font-size: clamp(15px, 1vw, 18px); font-weight: 400; color: rgba(255, 255, 255, .8); text-wrap: balance; } /* 소개 인사말 첫 줄 왼쪽 금색 막대 제거(사용자 2026-10-26) — style.css .greeting-body::before(모든 폭) */ .greeting-body::before { content: none; display: none; } /* 좁은 화면 글 옆 사진 칸도 사진 고유 비율로 — 칸만 4:3에 묶여 3:2 사진(소개 약력 집무실) 아래에 회색 빈 줄이 남던 것(사용자 2026-10-26). img에 width·height가 있어 불러오기 전후 높이는 같다(layout-stability) */ @media (max-width: 899.98px) { .sc-sp2 .sc-sp2__ph { aspect-ratio: auto; } .sc-sp2 .sc-sp2__ph img { aspect-ratio: var(--ar, auto) !important; } /* 위 .sec-sp2 img의 auto !important가 비율을 지워 불러오기 전 높이 0 → 스크롤 때 문서가 늘어나던 것(design-lint 2) */ } /* 업무 분야 허브·분야 6페이지·사건 대응 절차·오시는 길 히어로 — 사진 없이 메인 업무 분야 섹션(.sec.hm-dark)과 같은 남색 + 위쪽 가운데 금빛 번짐 (사용자 2026-10-26 "업무분야 섹션 자체 배경으로 … 남색에 위에 금색"). 높이도 줄임("height를 좀 줄여") — min-height라 글이 길어져도 상자 안에 다 들어간다 */ .t-article .hm-ph__box:not(.has-bg), .t-contact .hm-ph__box:not(.has-bg), .t-collection .hm-ph__box:not(.has-bg) { background: radial-gradient(60% 50% at 50% 0%, rgba(201, 167, 100, .16), transparent 70%), #10141d; } @media (min-width: 768px) { .t-article .hm-ph__box, .t-contact .hm-ph__box, .t-collection .hm-ph__box { height: auto; min-height: clamp(400px, calc(100vh - 360px), 520px); padding-top: 56px; padding-bottom: 56px; } @supports (height: 100dvh) { .t-article .hm-ph__box, .t-contact .hm-ph__box, .t-collection .hm-ph__box { min-height: clamp(400px, calc(100dvh - 360px), 520px); } } } /* 소개 공공기관 활동: 사진 높이를 표 높이에 맞춤(사용자 2026-10-26) — 글 칸을 풀어(display: contents) 문단·표 제목·표를 바깥 격자 줄로 올리고, 사진은 표와 같은 줄에 늘린다. 바깥 격자는 [여백 | 글 | 사진 | 여백] 4칸 */ @media (min-width: 900px) { .t-about #public-service .sc-sp2 { align-items: start; } .t-about #public-service .sc-sp2__txt { display: contents; } .t-about #public-service .sc-sp2__txt > * { grid-column: 2; padding-right: 56px; } .t-about #public-service .sc-sp2__txt > .table-box { margin-bottom: 0; } .t-about #public-service .sc-sp2__ph { grid-column: 3; grid-row: 3; align-self: stretch; height: auto; min-height: 0; } } /* 오시는 길 사무실 내부 전경 캐러셀 — 메인·소개 방송 출연 캐러셀과 같은 형식(사용자 2026-10-26): PC 한 화면 3장, 번호 표시 없음, 이전·다음 버튼은 사진 아래 가운데. 사진은 640×480 사무실 실사라 4:3 칸(방송 화면 16:9로 자르면 위아래가 많이 잘린다) */ .t-contact #office .carousel-slide { aspect-ratio: 4 / 3; background: #10141d; } .t-contact #office .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 900px) { .t-contact #office .carousel-slide { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; } } .t-contact #office .carousel-count, .t-contact #office .carousel.js .carousel-count { display: none; } .t-contact #office .carousel { padding-bottom: 60px; } .t-contact #office .carousel-btn { top: auto; bottom: 0; transform: none; } .t-contact #office .carousel-btn.prev { left: calc(50% - 52px); right: auto; } .t-contact #office .carousel-btn.next { left: calc(50% + 8px); right: auto; } /* 안내 콘텐츠·메인 업무 분야 카드 — 899px 이하 가로 스크롤을 모던하게(사용자 2026-10-26 "좌우 스크롤 디자인이 너무 허접해") 1) 카드 줄이 화면 끝까지 이어진다(.sc-gc .sc-gc__list의 margin이 음수 여백을 지워 오른쪽 16px 앞에서 잘리던 것) 2) 다음 카드가 18% 보이게 · 카드 사이 12px · 처음 카드는 글 칸 왼쪽 선에 맞춰 멈춤 3) 아래 얇은 진행 막대(.sc-gc__bar, 자리는 처음부터 6px+여백 — 막대 위치만 site.js가 옮긴다) */ .sc-gc__bar { display: none; } @media (max-width: 899px) { .sc-gc .sc-gc__list, .hm-practice-cards .sc-gc__list { margin: 28px calc(var(--sc-gc-bleed, var(--sc-gutter)) * -1) 0; padding: 4px var(--sc-gc-bleed, var(--sc-gutter)) 18px; gap: 12px; scroll-padding-inline: var(--sc-gc-bleed, var(--sc-gutter)); scrollbar-width: none; } .sc-gc .sc-gc__list::-webkit-scrollbar { display: none; } .sc-gc--0 .sc-gc__list > li { flex: 0 0 min(82%, 320px); scroll-snap-align: start; } .sc-gc .sc-gc__card { border-radius: 18px; box-shadow: 0 6px 20px rgba(15, 23, 42, .08); } .sc-gc__bar { display: block; position: relative; height: 3px; margin: 4px auto 0; width: min(160px, 40%); border-radius: 3px; background: rgba(19, 29, 54, .12); overflow: hidden; } .sc-gc__thumb { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 3px; background: var(--gold-500, #b3925c); will-change: transform; } .hm-dark .sc-gc__bar { background: rgba(255, 255, 255, .18); } .hm-dark .sc-gc__thumb { background: var(--gold-400, #c9a764); } } .sc-gc__bar.rv { opacity: 1 !important; transform: none !important; } /* 진행 막대는 등장 효과 없이 — 카드 줄과 따로 늦게 나타나지 않게 */ /* ════ WordPress 매거진(루트 hmlawblog.com, 테마 hmlaw-magazine) — 랜딩 CSS가 같이 실린다(_shell/head.html) ════ 머리 = 오시는 길 머리와 같은 둥근 남색 상자 + 위쪽 금빛 번짐, 가운데 정렬 금색 영어 라벨·흰 제목(사용자 2026-10-26 "hero배경은 오시는길페이지와 같은") 테마는 머리 안에 _shell/hero-bg.html(.mag-hero-navy)을 넣고 .page-head.has-bg.mag-hero 를 단다 — 바탕은 상자(.wrap)에 그려 조각 div는 쓰지 않는다 */ .t-magazine .page-head.mag-hero { background: none; border: 0; box-shadow: none; min-height: 0; color: #fff; padding: 12px max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter))) 0; } .t-magazine .page-head.mag-hero::before, .t-magazine .page-head.mag-hero::after, .t-magazine .mag-hero-navy { content: none; display: none; } .t-magazine .page-head.mag-hero > .wrap { max-width: none; margin: 0; border-radius: 20px; text-align: center; display: flex; align-items: center; justify-content: center; padding: clamp(40px, 5.5vw, 76px) clamp(20px, 5vw, 64px); min-height: 260px; background: radial-gradient(60% 50% at 50% 0%, rgba(201, 167, 100, .16), transparent 70%), #10141d; } @media (min-width: 900px) { .t-magazine .page-head.mag-hero { padding-top: 43px; } .t-magazine .page-head.mag-hero > .wrap { border-radius: 28px; min-height: 340px; } } @media (min-width: 1648px) { .t-magazine .page-head.mag-hero { padding-left: calc((100% - 1600px) / 2); padding-right: calc((100% - 1600px) / 2); } } .t-magazine .mag-hero .page-head-in, .t-magazine .mag-hero .page-head-text { width: 100%; max-width: 860px; margin: 0 auto; display: block; } .t-magazine .mag-hero .eyebrow { display: block; background: none; border: 0; padding: 0; margin: 0 0 14px; border-radius: 0; color: var(--gold-400); font-family: "HM Label", Georgia, serif; font-style: italic; font-weight: 500; font-size: 21px; line-height: 28px; letter-spacing: .04em; text-transform: none; } .t-magazine .mag-hero .eyebrow::after { content: ""; display: block; width: 28px; height: 1px; background: var(--gold-500); margin: 14px auto 0; } .t-magazine .mag-hero .mag-hero-title { color: #fff; font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.3; margin: 0 0 16px; border: 0; padding: 0; text-align: inherit; } .t-magazine .mag-hero .lead { color: rgba(255, 255, 255, .82); font-size: clamp(15px, 1.3vw, 17px); max-width: 760px; margin: 0 auto; } @media (max-width: 767px) { .t-magazine .page-head.mag-hero > .wrap { text-align: left; justify-content: flex-start; } .t-magazine .mag-hero .eyebrow::after { margin-left: 0; } .t-magazine .mag-hero .lead { margin-left: 0; } } /* 목록 카드 제목 — 하위 페이지 섹션 제목의 왼쪽 금색 막대(body:not(.t-home) .sec h2)가 카드에도 붙던 것(wordpress-magazine.md 1번 "카드 제목에서는 장식을 끈다") */ .t-magazine .sec .mag-cards h2.mag-card-title, .t-magazine .mag-card-title { border-left: 0; padding-left: 0; text-align: left; } /* 매거진 글 900~1599px 아래 퀵바(테마가 모바일 띠 규칙을 body.single-post에 옮겨 쓴다) — 위 900px 이상 "흰 타일" 규칙이 대표전화 글자를 남색으로 덮어 남색 바탕에 남색 글자가 되던 것: 모바일 띠와 같게 흰 글자·흰 아이콘 */ @media (min-width: 900px) and (max-width: 1599px) { body.single-post .sc-qb--qb2 .sc-qb__t[data-qb="call"], body.single-post .sc-qb--qb2 .sc-qb__t[data-qb="call"]:hover, body.single-post .sc-qb--qb2 .sc-qb__t[data-qb="call"]:focus-visible { background: var(--sc-brand); color: var(--sc-on-dark); transform: none; } body.single-post .sc-qb--qb2 .sc-qb__t[data-qb="call"] .sc-ic { color: var(--sc-on-dark); } } /* 매거진 아래 "문의하기"(_shell/band.html) — 기존 매거진 문의하기 이미지 두 장 그대로(사용자 2026-10-26). 가운데 900px 한 줄로 쌓고, 이미지 비율은 width·height로 처음부터 자리 잡음 */ .t-magazine .mag-contact { background: #fff; text-align: center; } .t-magazine .mag-contact .sec-label, .t-magazine .mag-contact h2 { text-align: center; } .t-magazine .mag-contact .sec-label::after { margin: 10px auto 0; } .t-magazine .mag-contact h2 { border-left: 0; padding-left: 0; margin-bottom: 10px; } .t-magazine .mag-contact-lead { color: var(--muted); margin: 0 0 28px; } .t-magazine .mag-contact-imgs { display: flex; flex-direction: column; gap: 10px; max-width: 900px; margin: 0 auto; } .t-magazine .mag-contact-img { display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(15, 23, 42, .10); transition: transform .25s, box-shadow .25s; } .t-magazine .mag-contact-img img { display: block; width: 100%; height: auto; } .t-magazine .mag-contact-img:hover, .t-magazine .mag-contact-img:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(15, 23, 42, .16); } @media (prefers-reduced-motion: reduce) { .t-magazine .mag-contact-img { transition: none; } .t-magazine .mag-contact-img:hover { transform: none; } } /* 매거진 목록 카드 사진 칸 = 업체 썸네일 비율 1200×740 그대로(사용자 2026-10-26 "썸네일이 좀 짤리네. 이미지부분 HEIGHT 좀 키워야") — 공용 틀의 352:185(1.9:1)는 이 업체 썸네일 위아래를 잘랐다. 카드 높이는 모두 같게 그대로(칸 비율만 바뀜) */ .t-magazine .mag-card-img { aspect-ratio: 1200 / 740; } /* 같이 보면 좋은 글·이전 글/다음 글 작은 사진도 썸네일 비율 그대로 — 72×56·96×72 칸이 1200×740 썸네일 가운데만 잘라 보여 주던 것 (사용자 2026-10-26 "같이보면 좋은 글도 마찬가지야. 이미지를 꽉차게") */ .t-magazine .mag-related img { width: 96px; height: auto; aspect-ratio: 1200 / 740; object-fit: cover; } .t-magazine .mag-adjacent img { width: 116px; height: auto; aspect-ratio: 1200 / 740; object-fit: cover; } /* 매거진 머리 ↔ 빵부스러기 사이 여백 — 랜딩 .sec 위 여백(PC 110px)이 목록·글 섹션에도 붙어 너무 멀던 것(사용자 2026-10-26 "여백이 너무 커"). 머리 상자와 아래 글 사이를 32~40px로(목록·글 같게) */ .t-magazine .sec.mag-list, .t-magazine .sec.mag-article { padding-top: clamp(24px, 3vw, 40px); } /* 매거진 문의하기 "Contact · 문의하기 · 안내 한 줄" 가운데 — 하위 페이지 섹션 제목 왼쪽 정렬(body:not(.t-home) .sec …)보다 세게(사용자 2026-10-26 "중앙정렬해") */ body.t-magazine .sec.mag-contact .sec-label, body.t-magazine .sec.mag-contact h2, body.t-magazine .sec.mag-contact .mag-contact-lead { text-align: center; } body.t-magazine .sec.mag-contact .sec-label::after { margin: 10px auto 0; } body.t-magazine .sec.mag-contact h2 { border-left: 0; padding-left: 0; } /* 매거진 목록 페이지 번호 — hm-law.kr/magazine/ 과 같은 모양(사용자 2026-10-26): 지름 44px 원(모바일 38px)·간격 6px, 지금 쪽만 남색 원 + 흰 굵은 글자, 다른 번호 회색, 이전·다음은 연회색 ‹ ›(글자 "이전/다음"은 화면 낭독기에 그대로 남기고 화면에서만 기호로), 생략 … */ .t-magazine .pagination { margin: 60px 0 0; } .t-magazine .pagination .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; } .t-magazine .pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 50%; background: none; font-size: 16px; font-weight: 400; color: #666; text-decoration: none; transition: background-color .2s, color .2s; font-variant-numeric: tabular-nums; } .t-magazine .pagination a.page-numbers:hover, .t-magazine .pagination a.page-numbers:focus-visible { background: #f1f3f7; color: #1e2c4f; } .t-magazine .pagination .page-numbers.current { background: #1e2c4f; color: #fff; font-weight: 700; } .t-magazine .pagination .page-numbers.dots { min-width: 0; padding: 0 4px; color: #bbb; } .t-magazine .pagination .prev, .t-magazine .pagination .next { font-size: 0; color: #aaa; } .t-magazine .pagination .prev::before { content: "\2039"; font-size: 20px; } .t-magazine .pagination .next::before { content: "\203A"; font-size: 20px; } @media (max-width: 767px) { .t-magazine .pagination { margin-top: 36px; } .t-magazine .pagination .page-numbers { min-width: 38px; height: 38px; font-size: 14px; } .t-magazine .pagination .page-numbers.dots { min-width: 0; } } /* 매거진 글 맨 위 대표 이미지도 업체 썸네일 비율(1200×740) 그대로 — 공용 틀의 3:2 칸이 좌우를 잘랐다(사용자 2026-10-26 "본문의 첫번째 이미지도 꽉 안차는거같은데") */ .t-magazine .mag-p-body .mag-thumb img, .t-magazine .mag-thumb img { aspect-ratio: 1200 / 740; } /* 매거진 목록 카드 구분 — 흰 바탕 위 카드가 바탕과 섞여 보이던 것(사용자 2026-10-26 "shadow좀 줘야될듯. 구분이 잘 안간다"). 얇은 선 + 남색 계열 그림자, hover 때 조금 더 */ .t-magazine .mag-card { border: 1px solid #e3e7ee; box-shadow: 0 2px 6px rgba(19, 29, 54, .06), 0 10px 28px rgba(19, 29, 54, .10); } .t-magazine .mag-card:hover, .t-magazine .mag-card:focus-within { box-shadow: 0 4px 10px rgba(19, 29, 54, .08), 0 18px 40px rgba(19, 29, 54, .16); }