@charset "utf-8";
/* (주)동심 중부파트너 — 공용 스타일 1장
* 스킬: orange-clean-paper-saas (warm paper + 오렌지 시그널 + 라운드 서피스)
* 보조: beautiful-shadows(웜 틴트 그림자) / animation-on-scroll(리빌)
* 수치 근거: wjthinkbig.com DOM 실측 2026-07-29
* - 썸네일 1:1 / radius 12px / 플레이스홀더 #F8F9FA
* - 카드 그리드 gap 24px, 카드 내부 gap 20px
* - 드롭다운 h58 / radius 8 / 옵션 padding 14px 20px / transition .275~.375s ease-in-out
* 색 규율: 웅진 브랜드 오렌지 #FD6B00은 흰 글자 대비 2.88 = AA 실패.
* → 글자가 얹히는 면에는 절대 쓰지 않는다. 아이콘·보더·그라디언트 전용(--brand-lit).
* 글자용은 --brand(#C2410C, 흰글자 5.18) / --brand-deep(#9A3412, paper 6.76).
*/
:root {
--paper: #f7f6f3;
--white: #fff;
--tint: #fdf1e3;
--tint-soft: #fef7ee;
--ink: #1c1917;
--sub: #57534e;
--muted: #736c67;
--brand: #c2410c;
--brand-deep: #9a3412;
--brand-lit: #fd6b00;
--line: #e7e2da;
--line-soft: #f0ece5;
--ph: #f8f9fa;
--r-sm: 8px;
--r: 12px;
--r-lg: 16px;
--r-xl: 24px;
--gap: 24px;
--max: 1160px;
/* beautiful-shadows: 중립 검정 대신 웜 브라운을 깔아 페이퍼 톤과 붙인다 */
--sh-1: 0 1px 2px rgba(87, 60, 35, .05), 0 1px 3px rgba(87, 60, 35, .06);
--sh-2: 0 2px 4px rgba(87, 60, 35, .05), 0 8px 20px rgba(87, 60, 35, .08);
--sh-3: 0 4px 8px rgba(87, 60, 35, .06), 0 16px 40px rgba(87, 60, 35, .11);
--sh-brand: 0 6px 20px rgba(194, 65, 12, .22);
--ease: cubic-bezier(.22, .61, .36, 1);
--t-fast: .2s var(--ease);
--t: .275s ease-in-out;
--t-slow: .375s ease-in-out;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
word-break: keep-all;
}
/* 페이지 상단 웜 라디얼 — orange-clean-paper-saas의 "softer radial page background" */
body::before {
content: '';
position: fixed;
inset: 0 0 auto 0;
height: 620px;
background:
radial-gradient(900px 420px at 18% -10%, rgba(253, 107, 0, .07), transparent 70%),
radial-gradient(700px 380px at 88% -6%, rgba(194, 65, 12, .05), transparent 72%);
pointer-events: none;
z-index: 0;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand-deep); }
h1, h2, h3, h4 { margin: 0; line-height: 1.28; letter-spacing: -.02em; }
h1 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.033em; }
h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0; }
.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { position: relative; z-index: 1; }
/* ── 헤더 ───────────────────────────────────────────── */
.gnb {
position: sticky; top: 0; z-index: 50;
background: rgba(247, 246, 243, .82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
}
.gnb .in {
max-width: var(--max); margin: 0 auto; padding: 0 24px;
height: 68px; display: flex; align-items: center; gap: 20px;
}
.gnb .brand { font-weight: 800; font-size: 18px; letter-spacing: -.03em; }
.gnb .brand a { color: var(--ink); text-decoration: none; }
/* 로고 이미지가 들어오면 글자 로고 자리를 그대로 차지한다(생성기 `logoMark()` · 2026-09-11).
높이만 `height="32"` 로 박고 **폭은 파일 비율에 맡긴다** — 가로로 긴 로고가 눌리지 않게. */
.gnb .brand-logo { display: block; width: auto; height: 32px; }
/* 로마자 병기 — 한글 이름 옆에 작게 붙어 같은 줄의 두 번째 목소리가 된다.
`.brand` 가 800/18px 이라 여기서 굵기·크기를 다시 잡지 않으면 이름과 같은 무게로 읽힌다. */
.brand-en { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.gnb nav { margin-left: auto; display: flex; gap: 4px; }
.gnb nav a {
color: var(--sub); text-decoration: none; font-size: 15px; font-weight: 500;
padding: 9px 14px; border-radius: var(--r-sm); transition: var(--t-fast);
}
.gnb nav a:hover { color: var(--ink); background: rgba(28, 25, 23, .05); }
.gnb nav a[aria-current] { color: var(--brand-deep); background: var(--tint); font-weight: 700; }
.gnb .burger {
display: none; margin-left: auto; padding: 9px 13px; font-size: 14px; font-weight: 600;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink);
cursor: pointer;
}
/* ── 히어로 ─────────────────────────────────────────── */
.hero { padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 44px); }
.hero h1 { max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--brand-deep); }
.hero .lead {
margin-top: 18px; max-width: 54ch; font-size: clamp(16px, 1.55vw, 19px);
color: var(--sub); line-height: 1.72;
}
.hero .acts { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
/* 홈 상단 = **꽉 찬 사진 배너** + 카피 오버레이 + 검색 한 줄 + 바로가기 4칸.
* 오너 확정 2026-07-31: "우리는 카드뉴스처럼 움직이는 배너가 아니니 margin 없이 꽉 채운다."
* → 라운드·그림자·좌우 여백 전부 제거하고 뷰포트 폭을 그대로 쓴다.
* 레퍼(웅진 홈)도 배너 → 퀵메뉴 순서다. 흰 카피 대비는 합성 픽셀 실측으로 통과시킨다(07-판정 §4). */
.herotop { padding-bottom: clamp(8px, 1.4vw, 16px); }
.heroart { position: relative; background: var(--ph); }
/* 3화면 스택. 세 장을 같은 그리드 칸에 겹쳐 두고 보이는 한 장만 켠다 —
높이가 화면마다 튀지 않고(가장 큰 장 기준으로 고정), 넘김은 opacity·transform 만 건드린다
(width/height 전환은 D13 layout-transition). 자동재생 없음 = 사용자가 누를 때만 바뀐다. */
.heroslides { display: grid; overflow: hidden; }
.heroslide {
grid-area: 1 / 1; position: relative; min-height: clamp(320px, 40vw, 520px);
opacity: 0; visibility: hidden; transform: translateX(28px); pointer-events: none;
transition: opacity var(--t-slow), visibility var(--t-slow), transform var(--t-slow);
}
.heroslide.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* 사진은 절대 배치로 자기 화면을 꽉 채운다. `height:100%` 로는 안 된다 —
그리드 행 높이가 미정이라 백분율이 auto 로 풀리고, ![]()
의 width/height 속성 비율이
그대로 높이가 된다(1440 폭에서 810px). 그러면 세 화면이 다 810px 로 늘어난다. */
.hphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hphoto::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(28, 25, 23, .76) 0%, rgba(28, 25, 23, .62) 46%, rgba(28, 25, 23, .14) 100%);
}
.heroin { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; }
.heroin .wrap { width: 100%; }
.heroin h1 { color: var(--white); max-width: 20ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .28); }
/* 히어로 부제 — 숫자만 놓는다. "믿을 수 있는 파트너" 같은 형용사는 원장이 한 번도 안 믿는다. */
.heroin .herosub {
margin-top: 14px; color: var(--white); font-size: 16px; font-weight: 600;
letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}
/* 2·3화면 = 12칸 분할(글 왼쪽 · 사진 오른쪽). 글은 헤드라인 2줄 + 부제 1줄 + 버튼 1개까지만 —
히어로에 문단을 넣으면 아무도 안 읽고 사진만 작아진다(L1 §5). */
.hsplit { background: var(--ph); }
.hsplit > .wrap {
height: 100%; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(20px, 3vw, 48px); align-items: center; padding-top: 28px; padding-bottom: 76px;
}
.hcopy h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.032em; }
.hcopy .herosub { margin-top: 12px; font-size: 16px; font-weight: 600; color: var(--sub); letter-spacing: -.02em; }
.hcopy .btn { margin-top: 22px; }
.hshot { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.hshot img { width: 100%; height: clamp(240px, 30vw, 400px); object-fit: cover; object-position: top center; }
.hlogos { background: var(--white); }
.hlogos img { object-fit: contain; height: clamp(180px, 25vw, 330px); }
/* 넘김 조작부 — 사진 위에도 흰 면 위에도 같은 대비를 내야 해서 자기 배경(흰 막대)을 갖는다.
검색바가 히어로 하단 36px 을 덮으므로 그보다 위에 앉힌다. */
.heroctl { position: absolute; z-index: 4; left: 0; right: 0; bottom: 54px; pointer-events: none; }
.hbar {
pointer-events: auto; display: inline-flex; align-items: center; gap: 4px;
background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
border-radius: 999px; padding: 4px; box-shadow: var(--sh-1);
}
.hbtn {
width: 34px; height: 34px; display: grid; place-items: center;
border: 0; border-radius: 50%; background: transparent; color: var(--ink);
cursor: pointer; transition: var(--t-fast);
}
.hbtn:hover { background: var(--tint); color: var(--brand-deep); }
/* .hbtn 이 display:grid 라 UA 의 [hidden] 규칙을 이긴다 — 되돌린다(자동넘김 정지 버튼 초기 상태). */
.hbtn[hidden] { display: none; }
.hnum { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0; padding: 0 6px; font-variant-numeric: tabular-nums; }
.herotop .fsearch { margin-top: -36px; position: relative; z-index: 3; }
/* 바로가기 4칸 — 레퍼 quickMenu 규격(아이콘 40×40 · 라벨 13px/500)을 4등분 그리드로 */
.quicknav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
/* 히어로 **위**에 올린 바로가기줄(2026-08-31 업체 지시). 헤더 밑줄과 바로 붙으면
메뉴가 두 줄로 읽히고, 사진과 붙으면 배너의 캐프션처럼 보인다 — 위아래를 띄운다. */
.quicktop { padding: 18px 24px 20px; }
.quicktop .quicknav { margin-top: 0; }
.quicknav a {
display: grid; justify-items: center; gap: 8px; padding: 20px 10px;
background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
text-decoration: none; color: var(--ink); box-shadow: var(--sh-1); transition: var(--t-fast);
}
.quicknav a:hover { border-color: var(--brand-lit); transform: translateY(-3px); box-shadow: var(--sh-2); }
.quicknav a img { width: 40px; height: 40px; }
.quicknav b { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.quicknav span { font-size: 13px; font-weight: 500; color: var(--muted); }
/* ── 버튼 ───────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 52px; padding: 0 26px; border-radius: var(--r-sm);
font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
border: 1px solid transparent; transition: var(--t-fast);
}
.btn-primary { background: var(--brand); color: var(--white); box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(194, 65, 12, .3); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: var(--brand-lit); color: var(--brand-deep); transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
outline: 3px solid rgba(194, 65, 12, .38); outline-offset: 2px;
}
/* 자료 버튼(상세 히어로) — 상담 요청과 **같은 줄**이다(2026-09-05 업체 요청 ⑤ "상담요청 옆").
8-31 판은 상담 아래에 "자료" 라벨을 단 별도 줄(`.matlinks`)이었는데, 요청이 "옆"이라고
못 박았고 실제로도 한 줄이 맞다 — 브로슈어·영상은 상담을 정하기 **전에** 보는 것이다.
준비 중인 것은 누를 수 없지만 **자리는 보인다** — 자료가 오면 그 자리에 그대로 들어간다. */
.hero .acts .btn { padding: 0 20px; }
/* 자료 버튼은 상담 요청보다 **한 칸 작다** — 셋이 같은 크기로 서면 어느 쪽이 본 행동인지
흐려진다(2026-07-31 "버튼이 AI티 난다"와 같은 판정). 46px 은 손가락 하한 44 위다. */
.hero .acts .btn-ghost { height: 46px; padding: 0 16px; font-size: 15px; }
.acts .soon { cursor: not-allowed; color: var(--muted); box-shadow: none; background: var(--paper); }
.acts .soon:hover { transform: none; border-color: var(--line); color: var(--muted); }
.soon em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); opacity: .85; }
/* ── 영역 탭 바 (목록 상단 상위 카테고리) ───────────
12칸을 줄바꿈으로 쌓지 않고 **한 줄로 밀어서** 본다 — 데스크톱은 한 줄에 다 들어가고
모바일은 가로로 굴린다. 쌓으면 목록 첫 카드가 화면 밖으로 밀려 필터만 보이는 페이지가 된다. */
.domtabs {
display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
padding-bottom: 4px; margin-bottom: 14px;
}
.domtabs::-webkit-scrollbar { display: none; }
.domtab {
flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); background: var(--white); color: var(--sub);
font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.02em;
white-space: nowrap; transition: var(--t-fast);
}
.domtab:hover { border-color: var(--brand-lit); color: var(--brand-deep); }
.domtab[aria-pressed='true'] {
background: var(--brand-deep); border-color: var(--brand-deep); color: var(--white); font-weight: 700;
}
/* ── 검색 바 (웅진 select_mate 구조 이식) ────────────── */
.fsearch {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
padding: 16px 18px;
display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
}
.fsearch .fields { display: flex; gap: 10px; flex: 1 1 auto; flex-wrap: nowrap; }
.sel { position: relative; flex: 1 1 170px; min-width: 150px; }
.sel > select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.sel .selbtn {
width: 100%; height: 58px; padding: 0 44px 0 18px;
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
font: inherit; font-size: 16px; color: var(--muted); text-align: left;
cursor: pointer; transition: var(--t-slow);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sel .selbtn[data-picked='true'] { color: var(--ink); font-weight: 600; border-color: var(--brand-lit); }
.sel .selbtn:hover { border-color: var(--brand-lit); }
.sel[data-open='true'] .selbtn { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(194, 65, 12, .12); }
.sel .arrow {
position: absolute; right: 16px; top: 50%; width: 16px; height: 16px;
margin-top: -8px; pointer-events: none; transition: transform var(--t);
color: var(--muted);
}
.sel[data-open='true'] .arrow { transform: rotate(180deg); color: var(--brand); }
.sel .opts {
position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
box-shadow: var(--sh-3); list-style: none; margin: 0; padding: 6px;
max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
transform: translateY(-6px);
/* max-height 는 전환에서 뺀다 — 레이아웃 프로퍼티 애니메이션은 프레임마다 리플로를 만든다(D13 layout-transition).
열림 감각(.375s)은 도너 계승값 그대로 transform 이 낸다. */
transition: opacity var(--t), visibility var(--t), transform var(--t-slow);
}
.sel[data-open='true'] .opts { max-height: 296px; overflow-y: auto; opacity: 1; visibility: visible; transform: none; }
.sel .opts li {
padding: 14px 20px; border-radius: 6px; font-size: 16px; color: var(--sub);
cursor: pointer; transition: var(--t);
}
.sel .opts li:hover { background: var(--tint-soft); color: var(--ink); }
.sel .opts li[aria-selected='true'] { background: var(--tint); color: var(--brand-deep); font-weight: 600; }
.fsearch .go {
width: 58px; height: 58px; flex: 0 0 58px; border-radius: 50%; border: 0;
background: linear-gradient(135deg, var(--brand-lit), var(--brand));
color: var(--white); cursor: pointer; display: grid; place-items: center;
box-shadow: var(--sh-brand); transition: var(--t-fast);
}
.fsearch .go:hover { transform: scale(1.05) rotate(-4deg); }
/* ── 영역 인덱스 (웅진 quickImgwrap 40×40 + 라벨) ───────── */
/* 영역 인덱스 — 40px 라인 아이콘 12칸이었다. 모티프가 겹쳐 구분이 안 되고 템플릿 티만 났다.
지금은 그 영역 대표 프로그램의 실제 키비주얼을 깔고 이름을 얹는다. */
.domains {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 22px 0 6px;
}
.domains a {
text-decoration: none; color: var(--ink); border-radius: var(--r); overflow: hidden;
background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1);
display: grid; transition: var(--t-fast);
}
.domains a:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: var(--brand-lit); }
/* `height: auto` 를 반드시 같이 준다 — ![]()
속성이 presentational hint 로 살아 있어서
width 만 CSS로 잡으면 높이는 속성값(675px)이 그대로 쓰이고 aspect-ratio 가 무시된다. */
/* 2026-09-11 오너 "위아래로도 키워줘" — 16:9 contain 이면 폭을 키워도 납작하다. 3:2 상자에 cover 로 채운다
(원본 1200×675 → 좌우 12.5% 씩 잘림. 키비주얼 캐릭터는 안쪽에 있어 실측상 안 다친다). */
.domains a img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; background: var(--paper); align-self: start; }
.domains a b { font-size: 15px; font-weight: 700; letter-spacing: -.024em; padding: 12px 14px 0; }
.domains a span {
font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: -.02em;
padding: 3px 14px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 홈은 4열 — 6열이면 키비주얼이 180px 폭에 100px 높이라 "아예 안 보인다"(2026-09-11 오너).
11영역 = 4+4+3. 마지막 줄 한 칸 비는 것보다 그림이 읽히는 게 먼저다. */
.domains.wrapd { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 0 0; }
/* ── 닫는 상담 유도 ─────────────────────────────────── */
/* 마감 밴드 아래 여백은 푸터가 이미 갖고 있다(`.foot` margin-top). 둘을 더하면 1440에서
빈 띠가 190px 뜬다 — 내용이 끝난 자리에 화면 4분의 1이 비면 "만들다 만 페이지"로 읽힌다. */
.closing { padding: 0 0 clamp(40px, 5vw, 64px); }
.closing .band {
display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 40px);
}
.closing h2 { font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.03em; }
.closing p { margin-top: 8px; color: var(--sub); font-size: 15px; }
.closing .acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* ── 섹션 헤더 ──────────────────────────────────────── */
.sec { padding: clamp(52px, 7vw, 92px) 0; }
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.sechead p { margin-top: 10px; color: var(--sub); max-width: 56ch; }
.seclink { font-size: 15px; font-weight: 700; color: var(--brand-deep); text-decoration: none; white-space: nowrap; }
.seclink:hover { text-decoration: underline; }
/* ── 카드 그리드 ────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
/* 카드 = 웅진 `.listGridBoxWrap` 실측 이식 (2026-07-31 재실측)
* 데스크톱 264×467 / 모바일 169×343 · 카드 내부 gap 20(모바일 12) · 썸네일 1:1 radius 12
* 라벨 12px/500 · 제목 18px/600 · 설명 14px **2줄 clamp** · 해시 13px/500
* 레퍼 카드에는 버튼이 없다 — 면 전체가 링크다. */
.card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-1); overflow: hidden; transition: var(--t-fast);
display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: rgba(253, 107, 0, .4); }
.cardlink { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* 썸네일은 16:9 — 원천 키비주얼(공급 브랜드가 만든 슬라이드)이 가로형이라 1:1로 자르면 카피가 잘린다.
`contain` 으로 얹고 남는 자리는 종이 톤으로 채운다(잘린 글자보다 여백이 낫다). */
.card .thumb {
aspect-ratio: 16 / 9; background: var(--paper); overflow: hidden; position: relative;
}
.card .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.card:hover .thumb img { transform: scale(1.045); }
.card .badge {
position: absolute; left: 10px; top: 10px; font-style: normal;
font-size: 11px; font-weight: 700; letter-spacing: -.02em;
padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--white);
}
.card .body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .cat { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }
.card :is(h2, h3) { font-size: 18px; font-weight: 600; letter-spacing: -.028em; }
.card .benefit {
font-size: 14px; font-weight: 500; color: var(--sub); line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .hash { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
/* 설명이 없는 카드(공개 정보가 브랜드·연령뿐인 3종)는 해시를 바닥으로 밀지 않는다 —
`margin-top:auto` 가 제목과 해시 사이에 34~56px 구멍을 내고, 그러면 제목이 위 블록에 붙어
읽힌다(D13 heading-rhythm 실측: 위 18px vs 아래 34px). 텍스트 묶음은 위에 붙이고 남는 자리는
카드 아래에 둔다. [근거: 2026-08-07 "상세 미공개" 자리표시 문장 삭제] */
.card .body:not(:has(.benefit)) .hash { margin-top: 0; }
.card .hash span { white-space: nowrap; }
.card[hidden] { display: none; }
/* ── 사실 목록(하는 일 · 프로그램 요점) ───────────────
흰 카드 3장을 나란히 놓는 판이었다. 둥근 모서리·그림자·같은 패딩의 카드 3장은
어느 생성형 템플릿에나 있는 모양이라 그 자체가 AI티다(오너 지적 2026-08-07).
카드를 걷고 편집 기호만 남긴다: 위 헤어라인 + 브랜드색 번호 + 제목 + 본문.
번호는 순서가 실재할 때만 의미가 있으므로 `.facts.plain`은 번호를 지운다. */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.4vw, 34px); }
.tri article {
border-top: 2px solid var(--ink); padding-top: 16px;
}
.tri .stepn {
display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
color: var(--brand-deep); margin-bottom: 6px;
}
.tri :is(h2, h3) { font-size: 18px; margin-bottom: 8px; letter-spacing: -.03em; }
/* 상세의 `이 프로그램이 하는 일`은 1열이라 카드가 span-8 폭을 통째로 먹는다 —
상한이 없으면 1440에서 한 줄 92자가 된다(D13 line-length). */
.tri p { font-size: 14.8px; color: var(--sub); line-height: 1.66; max-width: 62ch; }
/* ── 자료실 ─────────────────────────────────────────── */
/* 표지 없는 텍스트 줄 목록이었다. 자료는 **표지가 곧 내용 설명**이라 표지를 띄운다. */
.doccards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.doccard {
background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-1); overflow: hidden; transition: var(--t-fast);
}
.doccard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: rgba(253, 107, 0, .4); }
.doccard a { display: grid; text-decoration: none; color: inherit; height: 100%; align-content: start; }
.doccard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--paper); align-self: start; }
/* 표지가 없는 자료 — 원장이 올린 PDF 에는 표지 이미지가 없다. `![]()
` 를 비워 두면 깨진 그림이
뜨므로 제목을 큼직하게 깐 판을 대신 넣는다. 크기(16:9)는 표지와 같아 카드 줄이 어긋나지 않는다. */
.doccover {
aspect-ratio: 16 / 9; background: var(--tint-soft); border-bottom: 1px solid var(--line-soft);
display: grid; align-content: center; justify-items: center; gap: 10px; padding: 18px; text-align: center;
}
.doccover span { font-size: 17px; font-weight: 700; letter-spacing: -.028em; color: var(--sub); line-height: 1.35; }
.doccover em {
font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--white);
background: var(--brand); border-radius: 999px; padding: 3px 10px;
}
.doccard .body { padding: 18px; display: grid; gap: 8px; }
.doccard .cat { font-size: 12px; font-weight: 500; color: var(--muted); }
.doccard h2 { font-size: 17px; font-weight: 600; letter-spacing: -.028em; }
.doccard .benefit { font-size: 14px; font-weight: 500; color: var(--sub); line-height: 1.5; }
.doccard .hash { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.doccard .hash span + span::before { content: " · "; }
/* 자료 보기 화면 — 올린 PDF 를 사이트 안에서 편다.
높이를 뷰포트로 잡는 이유: 쪽수를 모르는 PDF 라 내용 높이를 미리 알 수 없고, 고정 px 로 두면
폰에서는 우표만 하고 PC 에서는 여백만 남는다. 82vh 는 헤더와 위 버튼 줄을 뺀 나머지다.
못 펴는 뷰어가 있어도 화면이 무너지지 않도록 배경과 테두리는 박스가 갖는다. */
.pdfbox {
border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
background: var(--paper); box-shadow: var(--sh-1);
}
.pdfbox iframe { display: block; width: 100%; height: 82vh; min-height: 420px; border: 0; }
/* PDF 뷰어가 없는 브라우저에서 상자를 대신하는 한 줄(app.js 가 갈아 끼운다). */
.pdfoff {
padding: 26px 22px; text-align: center; font-size: 14.5px; font-weight: 500; line-height: 1.6;
color: var(--sub); background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-md);
}
/* 버튼 줄은 뷰어 **위**에 둔다 — 뷰어가 비는 기기에서 아래에 있으면 빈 사각형만 보고 나간다. */
.docact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.doctoc { margin-top: 26px; padding: 22px; background: var(--paper); border-radius: var(--r-md); border: 1px solid var(--line-soft); }
.doctoc h2 { font-size: 17px; font-weight: 700; letter-spacing: -.028em; }
.doctoc ul { margin-top: 12px; display: grid; gap: 8px; padding-left: 18px; }
.doctoc li { font-size: 14.5px; font-weight: 500; color: var(--sub); line-height: 1.55; }
/* ── 교육행사 ───────────────────────────────────────── */
.evt .grid { align-items: start; }
.poster {
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
background: var(--paper); box-shadow: var(--sh-1);
}
.poster img { width: 100%; height: auto; display: block; }
/* 행사 상세(구성 목록)는 포스터 안에 이미 다 적혀 있다 — 페이지에는 제목 + 포스터만 남긴다
(2026-08-07 오너 지시). 카드 폭이 273px라 포스터 본문 글자는 그 자리에서 못 읽는다 —
포스터를 원본(900×1280)으로 여는 링크가 곧 상세 화면이다. 캡션은 이름 확정 + 그 진입점. */
.poster figcaption {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 14px 16px 15px; border-top: 1px solid var(--line);
font-size: 16px; font-weight: 700; letter-spacing: -.028em; color: var(--ink);
}
.poster figcaption span { font-size: 13.5px; font-weight: 600; color: var(--brand-deep); white-space: nowrap; }
.poster a:hover img { opacity: .92; }
.poster a { display: block; cursor: zoom-in; }
/* 포스터 확대판(.lb) — `