@charset "utf-8";
/* 영문 표기 전용 세리프 — headHtml 에는 없어 이 페이지가 자체 로드한다(브랜드 공통으로 쓰는 서체) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600;1,700&display=swap');
/* =========================================================================
* 병원소개 > 의료진 소개 (www/brand/doctors.jsp 전용)
* 로드 순서: main_hero.css → jdh_sub.css → 이 파일
*
* 2026-07-31 레이아웃 개편(사용자 지시)
* - 기존: 의료진 1인 = 1행, 좌우 교차 + 화면 밖으로 흘러나가는 배경 패널(변칙적)
* - 개편: 양방/한방 2개 그룹 + 3열 카드 그리드 (1024↓ 2열, 768↓ 1열)
* - 카드는 기본에 인물 사진 + 이름/분야만 보여주고, 호버(:hover)·키보드(:focus-visible)·
* 터치 탭(.is-open — doctors.jsp 하단 스크립트)에서 딥그린 패널이 올라오며 약력이 펼쳐진다.
* → 카드 스타일을 손댈 때 이 3개 선택자를 항상 함께 유지할 것.
* - 계열 색: --dct-accent(밝은 배경용) / --dct-accent-on(카드 다크 패널 위에서 쓰는 밝은 짝)
* - 카드 radius 8px = 이미지 박스 규칙
*
* 2026-08-04 SYNERGY CARE 섹션 정돈(사용자 피드백 "아래 섹션과 어울리지 않고 붕 뜬다")
* - 벤다이어그램 400 → 356px : 좌측 카피와 높이 차가 커서 카피 아래가 크게 비었다
* - 포인트 3개를 상단 블록 쪽으로 당기고(46/38 → 36/30) 항목 사이에 세로 헤어라인
* - 하단 골드 헤어라인 → 다음 섹션(#FCFBF8) 으로 넘어가는 페이드
* - 배경 화이트 라디얼 중심을 아래로(44% → 50%) 내려 하단까지 밝힘
*
* 2026-08-06 SYNERGY CARE 우측 비주얼 폐기 — 세 번 고쳐 본 끝에 아예 없앴다(사용자 지시).
* ① 벤다이어그램(.dct_venn, SVG 원 2개 + 교집합) → "뭔가 이상하다"
* ② .dct_eq 수식 스택(＋/＝ 배지) → "기호 쓰지 말고 더 심플하게"
* ③ 연산자 없는 2열 카드 → "그냥 이 부분 없애고 텍스트 크기 키워 강조"
* → 현재: 좌우 2단 레이아웃(.dct_synergy__top) 자체를 없애고 카피 한 덩어리만 중앙 정렬.
* 폰트는 공통 스케일(40/28/20)로 키웠다. ⚠ 도형·카드류를 다시 넣지 말 것.
* ========================================================================= */
.dct {
--dct-green: #24382C; /* 딥그린(히어로/협진/클로징 배경) */
--dct-green-2: #3B5843; /* 협진 카드 · 양방 포인트 */
--dct-gold: #C2A878;
--dct-gold-2: #B0966A; /* 한방 포인트 */
--dct-gold-3: #D8BD8B; /* 히어로 라벨(다크 배경용) */
--dct-gold-ink: #A5854B; /* 크림 배경 위에서 쓰는 진한 골드 */
--dct-cream: #F4F2EE;
--dct-ink: #1C1E1A;
--dct-body: #55594F;
--dct-line: #EDE8DE;
--dct-bg: #FCFBF8; /* 의료진 섹션 배경 — 위 크림 섹션보다 한 톤 밝게 */
font-family: 'Pretendard', sans-serif;
color: var(--dct-ink);
overflow-x: clip;
}
.dct .dct_inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
/* ===== 1. 히어로 — 사옥 전경(jd_doctor_hero) 풀블리드 =====
* 이전엔 [단색 그린 히어로] + [건물 사진 띠] 두 블록이 따로였는데, 한 장면으로 합쳤다.
* ⚠ 한때 그린 multiply 틴트를 씌웠으나 "초록 필터 같다"는 지적으로 제거함 — 되살리지 말 것.
* 사진 본래의 색을 살리고, 텍스트 가독성은 중립 톤(뉴트럴) 그라데이션 두 겹으로만 확보한다. */
.dct_hero {
position: relative;
background: #3E4A44 url('/img/brand/doctors/hero.jpg') no-repeat center 42% / cover;
padding: 132px 40px 140px;
text-align: center;
overflow: hidden;
}
.dct_hero::before {
content: '';
position: absolute; inset: 0;
/* 2026-08-04 — 카피에 걸려 있던 text-shadow 를 걷어내는 대신 이 스크림을 한 단계 올렸다.
* 글자마다 그림자를 두면 글자 테두리가 지저분해지고 배경과 따로 논다.
* 대비는 배경 쪽에서 만들고 글자는 깨끗하게 두는 쪽이 지금 방식이다. */
background:
radial-gradient(66% 58% at 50% 52%, rgba(10,16,13,.50) 0%, rgba(10,16,13,0) 76%), /* 카피 뒤만 은은하게 */
linear-gradient(180deg, rgba(14,20,17,.38) 0%, rgba(14,20,17,.22) 46%, rgba(14,20,17,.44) 100%);
}
/* 위·아래 가장자리만 한 번 더 눌러 헤더/다음 섹션과 자연스럽게 이어지게 */
.dct_hero::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,16,13,.50) 0%, rgba(10,16,13,0) 24%, rgba(10,16,13,0) 62%, rgba(10,16,13,.58) 100%);
}
.dct_hero__inner {
position: relative; z-index: 2;
max-width: 900px; margin: 0 auto;
display: flex; flex-direction: column; align-items: center;
}
.dct_hero__label {
font-weight: 700; font-size: 34px; line-height: 1.2; letter-spacing: .52px;
color: var(--dct-gold-3);
}
/* 라벨과 타이틀 사이 세로 그라데이션 라인 */
.dct_hero__rule {
display: block; width: 1px; height: 78px; margin: 28px 0;
background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
}
.dct_hero__title { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dct_hero__t1 {
font-weight: 300; font-size: 32px; line-height: 1.3; letter-spacing: 1.2px;
color: var(--dct-cream);
}
.dct_hero__t2 {
font-weight: 700; font-size: 40px; line-height: 1.28; letter-spacing: 1.8px;
color: var(--dct-cream);
}
.dct_hero__desc {
margin: 30px 0 0;
font-weight: 400; font-size: 16px; line-height: 1.95;
color: rgba(255,255,255,.88);
word-break: keep-all;
}
/* =========================================================================
* 2. SYNERGY CARE — 협진의 원리(좌 카피 / 우 벤다이어그램) + 3가지 포인트
* 이전의 [양방카드 + 한방카드] 2단 구성을 대체한다.
* ========================================================================= */
/* 아이보리 실크 배경 섹션(Figma 440:1285) — 좌우 주름은 살리고 카피가 놓이는 중앙만
* 화이트 라디얼로 밝혀 가독성을 확보한다. 맨 아래 그라디언트는 이미지 미로드 시 폴백.
* ⚠ 라디얼 중심은 44~48% 언저리로 둔다. 위로 더 올리면 하단 포인트 3개가 어두운 크림 위에
* 남아 섹션이 위아래로 갈라져 보인다(2026-08-04 "붕 뜬다" 피드백의 원인). */
.dct_synergy {
position: relative;
padding: 86px 0 84px;
background:
radial-gradient(84% 78% at 45% 50%, rgba(255,253,248,.62) 0%, rgba(255,253,248,0) 100%),
url('/img/brand/doctors/synergy_bg.jpg') no-repeat center / cover,
linear-gradient(150deg, #F6F1E6 0%, #F1EADC 52%, #EAE1D0 100%);
overflow: hidden;
}
/* 위쪽은 얇은 골드 헤어라인(어두운 히어로에서 넘어오는 경계) */
.dct_synergy::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, rgba(165,133,75,0) 0%, rgba(165,133,75,.34) 50%, rgba(165,133,75,0) 100%);
}
/* 아래쪽은 헤어라인 대신 다음 섹션(.dct_docs #FCFBF8) 으로 녹아드는 페이드.
* 실크 크림 → 밝은 아이보리로 선이 딱 끊기면 이 섹션만 얹혀 있는 판처럼 보인다. */
.dct_synergy::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 128px;
background: linear-gradient(180deg, rgba(252,251,248,0) 0%, rgba(252,251,248,.55) 58%, #FCFBF8 100%);
pointer-events: none;
}
.dct_synergy .dct_inner { position: relative; z-index: 1; }
/* 카피 — 2026-08-06 우측 비주얼을 걷어내고 카피만 남기면서 중앙 정렬 + 한 단계 큰 스케일로.
* 폰트는 서브페이지 공통 스케일(40 섹션타이틀 / 28 / 20 리드)을 따른다.
* ⚠ 아이브로우 17px(Cormorant 700 / letter-spacing 4.6px)은 전 페이지 공통 규격이라 키우지 않는다. */
.dct_synergy__copy { max-width: 900px; margin: 0 auto; text-align: center; }
.dct_synergy__eyebrow {
display: inline-flex; align-items: center; gap: 15px;
font-family: 'Cormorant Garamond', serif;
font-weight: 700; font-size: 17px; letter-spacing: 4.6px; text-transform: uppercase;
color: var(--dct-gold-ink);
}
/* 중앙 정렬이라 좌우 대칭으로 선을 둔다(한쪽만 있으면 글자가 왼쪽으로 밀린 것처럼 보인다) */
.dct_synergy__eyebrow::before,
.dct_synergy__eyebrow::after {
content: ''; width: 40px; height: 1px; background: var(--dct-gold-ink); opacity: .7;
}
.dct_synergy__title {
margin: 22px 0 0;
font-weight: 700; font-size: 40px; line-height: 1.35; letter-spacing: -0.8px; color: var(--dct-ink);
word-break: keep-all;
}
.dct_synergy__title em { font-style: normal; color: var(--dct-gold-ink); }
.dct_synergy__sub {
display: block; margin-top: 24px;
font-weight: 600; font-size: 28px; line-height: 1.4; letter-spacing: -0.5px; color: #2B3A2F;
}
/* 배경이 밝은 아이보리라 글자색은 한 단계 진하게 내려 대비를 확보한다.
* ⚠ max-width 는 원문
앞 첫 줄(36자)이 접히지 않을 만큼 둔다 — 더 줄이면 줄바꿈이 어긋난다. */
.dct_synergy__desc {
margin: 18px auto 0; max-width: 780px;
font-weight: 400; font-size: 20px; line-height: 1.9; color: #565D51;
word-break: keep-all;
}
/* ── 3가지 포인트 ── */
/* 상단 카피와 한 덩어리로 읽히도록 간격을 좁히고(46/38 → 36/30),
* 항목 사이에 세로 헤어라인을 넣어 배경 위에 글자만 흩어져 있던 것을 표처럼 묶는다.
* 세로선 좌우 여백은 42px 로 대칭 — gap 을 쓰면 선이 한쪽으로 치우친다.
* 2026-08-06: 우측 비주얼이 빠져 카피 아래 여백이 넉넉해졌으므로 상단 간격을 46/34 로 되돌렸다. */
.dct_synergy__list {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px 0;
margin: 46px 0 0; padding: 34px 0 0;
list-style: none;
border-top: 1px solid rgba(120,100,60,.20);
}
.dct_synergy__list > li { padding-right: 42px; }
.dct_synergy__list > li + li {
padding-left: 42px;
border-left: 1px solid rgba(120,100,60,.16);
}
.dct_synergy__head {
display: flex; align-items: baseline; gap: 13px;
}
.dct_synergy__num {
font-family: 'Cormorant Garamond', serif;
font-variant-numeric: lining-nums; /* 세리프 기본 숫자가 소문자처럼 낮게 앉는 것 방지 */
font-weight: 700; font-size: 21px; letter-spacing: .5px; color: var(--dct-gold-ink);
}
.dct_synergy__name {
font-weight: 700; font-size: 22px; line-height: 1.3; letter-spacing: -0.4px; color: var(--dct-ink);
word-break: keep-all;
}
.dct_synergy__text {
margin: 12px 0 0; padding-left: 30px; /* num(21px) + gap(13px) 만큼 들여써 이름과 좌측 정렬 */
font-weight: 400; font-size: 18px; line-height: 1.8; color: #575E52; /* 공통 본문 스케일 18px */
word-break: keep-all;
}
/* =========================================================================
* 4. 의료진 — 그룹(양방/한방) + 카드 그리드
* ========================================================================= */
.dct_docs { background: var(--dct-bg); padding: 92px 0 104px; }
/* 섹션 헤더 */
.dct_docs__head { text-align: center; margin-bottom: 62px; }
/* 영문 아이브로우 공통 규격 — 17px / 4.6px / UPPER. ⚠ italic 24px 였던 것을 2026-08-03 통일 */
.dct_docs__eyebrow {
display: block; margin-bottom: 14px;
font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: normal;
font-size: 17px; letter-spacing: 4.6px; text-transform: uppercase; color: var(--dct-gold-2);
}
.dct_docs__title {
margin: 0;
font-weight: 700; font-size: 34px; line-height: 1.4; letter-spacing: -0.4px;
color: var(--dct-ink); word-break: keep-all;
}
.dct_docs__title em { font-style: normal; color: var(--dct-green-2); }
/* ── 그룹(계열) ── */
.dct_group + .dct_group { margin-top: 86px; }
.dct_group__head {
display: flex; align-items: flex-end; gap: 18px;
padding-bottom: 16px; margin-bottom: 38px;
border-bottom: 1px solid var(--dct-line);
}
.dct_group__eng {
font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic;
font-size: 17px; letter-spacing: 1.6px; color: var(--dct-accent);
transform: translateY(-2px);
}
.dct_group__title {
margin: 0; flex: 0 0 auto;
font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; color: var(--dct-ink);
}
.dct_group__desc {
margin: 0 0 2px auto; text-align: right;
font-weight: 400; font-size: 15px; line-height: 1.5; color: #7A7F73;
word-break: keep-all;
}
/* 계열 포인트 색 — accent 는 밝은 배경용(그룹 헤더), accent-on 은 카드 다크 패널 위에서 쓰는 밝은 짝 */
.dct_group--west { --dct-accent: #3B5843; --dct-accent-on: #A9C6B0; }
.dct_group--korean { --dct-accent: #B0966A; --dct-accent-on: #DFC58D; }
/* ── 카드 그리드 — 한 줄 3장 ── */
.dct_grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px 26px;
}
/* ── 카드 — 기본은 인물 사진 + 이름만, 열리면 약력 패널이 올라온다 ──
* 열림 상태 선택자 3종을 항상 함께 쓴다:
* :hover 데스크톱
* :focus-visible 키보드 접근(카드에 tabindex="0")
* ⚠ 2026-08-13 — 여기는 :focus-within 이면 안 된다. 마우스로 카드를 클릭하면 포커스가 카드에 남아
* 마우스를 치워도 약력이 펼쳐진 채로 굳는다(사용자 지적). :focus-visible 은 키보드 이동일 때만
* 걸리므로 클릭 후 마우스가 벗어나면 :hover 해제와 함께 정상적으로 닫힌다.
* .is-open 터치 기기 — doctors.jsp 하단 스크립트가 탭으로 토글
*/
.dct_card {
position: relative;
display: block;
aspect-ratio: 3 / 4.2;
background: #EDEBE6;
border-radius: 8px;
overflow: hidden;
outline: none;
transition: box-shadow .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
/* ⚠ 2026-09-01 — :hover 규칙은 전부 아래 `@media (hover: hover)` 블록으로 옮겼다.
휴대폰에서 카드를 탭하면 브라우저가 :hover 를 그 요소에 **붙여 둔 채로 유지**한다(sticky hover).
그래서 다시 탭해 .is-open 을 떼도 :hover 가 남아 약력이 닫히지 않았다(사용자 지적).
⚠ 여기(hover 없는 셀렉터)에 :hover 를 다시 끼워 넣지 말 것 — 같은 버그가 되살아난다. */
.dct_card:focus-visible,
.dct_card.is-open {
transform: translateY(-5px);
box-shadow: 0 22px 46px rgba(28,44,34,.16);
}
/* 사진 — 카드 전체를 채운다(원본 800x700 을 세로 카드에 cover 하므로 좌우가 약간 잘린다)
* 배경(2026-08-03): 사진 원본의 스튜디오 배경색(#E4E4EE)과 같은 값을 깐다.
* · 사진은 색 보정 없이 병원이 준 원본 그대로 쓴다.
* · 이 배경이 실제로 보이는 건 배경이 투명한 누끼 사진(mindowon·hwangjihoo)뿐이고,
* 나머지는 사진 자체 배경이 카드를 덮는다. 두 종류가 같은 색으로 보이도록 맞춘 값이다.
* ⚠ 계열색(세이지·샴페인) 배경은 시도했다가 걷어냈다(2026-08-03). 흰 가운과 스튜디오 배경의
* 밝기가 거의 같아 누끼가 깨끗하게 되지 않고, 색을 입히면 가운·피부까지 물들었다.
* 배경색을 바꾸려면 사진도 함께 바뀌어야 하므로 원본 배경색을 그대로 쓰는 쪽으로 되돌렸다. */
.dct_card__photo {
position: absolute; inset: 0; overflow: hidden;
background: #E4E4EE;
}
.dct_card__photo img {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
display: block;
transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.dct_card:focus-visible .dct_card__photo img,
.dct_card.is-open .dct_card__photo img { transform: scale(1.06); }
/* 사진 미확보 자리표시자 */
.dct_card__photo-empty {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: repeating-linear-gradient(135deg, #F5F3EE 0 10px, #F1EEE7 10px 20px);
font-size: 15px; letter-spacing: -0.2px; color: #A9A292;
}
/* 정보 패널 — 기본은 하단 일부만 덮는 스크림, 열리면 카드 전체를 덮는 딥그린 패널
* 스크림 그라데이션은 stop 을 촘촘히 나눠 S 커브에 가깝게 만든다(2026-08-03).
* 3-stop(0 → .58 → .94) 로는 시작 지점이 선처럼 보였다 — stop 수를 줄이지 말 것. */
.dct_card__info {
position: absolute; left: 0; right: 0; bottom: 0; top: 50%;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 26px 24px;
background: linear-gradient(180deg,
rgba(18,26,20,0) 0%,
rgba(18,26,20,.015) 10%,
rgba(18,26,20,.05) 20%,
rgba(18,26,20,.11) 29%,
rgba(18,26,20,.20) 38%,
rgba(18,26,20,.31) 47%,
rgba(17,25,19,.44) 56%,
rgba(17,25,19,.57) 65%,
rgba(16,24,18,.70) 74%,
rgba(15,23,17,.81) 83%,
rgba(15,23,17,.89) 92%,
rgba(14,22,17,.94) 100%);
transition: top .5s cubic-bezier(.22,.61,.36,1), background .45s ease;
}
.dct_card:focus-visible .dct_card__info,
.dct_card.is-open .dct_card__info {
top: 0;
background: linear-gradient(180deg, rgba(25,40,30,.955) 0%, rgba(17,27,21,.975) 100%);
}
.dct_card__field {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 12.5px; letter-spacing: 2.2px; color: var(--dct-accent-on);
}
.dct_card__field::before {
content: ''; width: 22px; height: 1px; background: var(--dct-accent-on); opacity: .85;
}
.dct_card__name {
display: flex; align-items: baseline; gap: 9px;
margin: 11px 0 0;
font-weight: 700; font-size: 27px; line-height: 1.2; letter-spacing: -0.8px; color: #fff;
text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.dct_card__name em {
font-style: normal; font-weight: 500; font-size: 14px; letter-spacing: -0.2px;
color: rgba(255,255,255,.72);
}
/* 열림 힌트 — 기본 상태에만 보인다 */
.dct_card__hint {
display: inline-flex; align-items: center; gap: 8px;
overflow: hidden;
max-height: 40px; margin-top: 14px;
font-weight: 500; font-size: 13px; letter-spacing: .2px; color: rgba(255,255,255,.82);
transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.dct_card__hint i {
position: relative; width: 15px; height: 15px;
border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
}
.dct_card__hint i::before,
.dct_card__hint i::after {
content: ''; position: absolute; left: 50%; top: 50%;
background: rgba(255,255,255,.85); transform: translate(-50%, -50%);
}
.dct_card__hint i::before { width: 7px; height: 1px; }
.dct_card__hint i::after { width: 1px; height: 7px; }
.dct_card:focus-visible .dct_card__hint,
.dct_card.is-open .dct_card__hint { max-height: 0; margin-top: 0; opacity: 0; }
/* 약력 — 기본은 접혀 있고 열리면 펼쳐진다 */
.dct_card__reveal {
max-height: 0; opacity: 0;
overflow: hidden;
transition: max-height .5s cubic-bezier(.22,.61,.36,1), opacity .35s ease, margin-top .5s ease;
}
.dct_card:focus-visible .dct_card__reveal,
.dct_card.is-open .dct_card__reveal {
max-height: 460px; opacity: 1; margin-top: 18px;
overflow-y: auto; /* 약력이 더 늘어나도 잘리지 않도록(현재 최다 13줄은 스크롤 없이 들어간다) */
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
}
.dct_card__reveal::-webkit-scrollbar { width: 3px; }
.dct_card__reveal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
/* ── 마우스 호버 (2026-09-01 분리) ────────────────────────────────────
* 위 열림 규칙들의 :hover 판을 **마우스가 있는 기기에서만** 적용한다.
* 휴대폰에서는 탭한 요소에 :hover 가 붙어 남기 때문에(sticky hover), 이 블록이 없으면
* 카드를 다시 탭해도 약력이 닫히지 않는다 — 터치 기기는 .is-open 토글만으로 동작한다.
* ⚠ 선언은 위 .is-open / :focus-visible 규칙과 **같은 값**을 유지할 것. 한쪽만 고치면 어긋난다. */
@media (hover: hover) {
.dct_card:hover {
transform: translateY(-5px);
box-shadow: 0 22px 46px rgba(28,44,34,.16);
}
.dct_card:hover .dct_card__photo img { transform: scale(1.06); }
.dct_card:hover .dct_card__info {
top: 0;
background: linear-gradient(180deg, rgba(25,40,30,.955) 0%, rgba(17,27,21,.975) 100%);
}
.dct_card:hover .dct_card__hint { max-height: 0; margin-top: 0; opacity: 0; }
.dct_card:hover .dct_card__reveal {
max-height: 460px; opacity: 1; margin-top: 18px;
overflow-y: auto;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
}
}
.dct_card__career {
margin: 0; padding: 16px 0 0; list-style: none;
border-top: 1px solid rgba(255,255,255,.18);
}
.dct_card__career li {
position: relative; padding: 0 0 0 13px;
font-weight: 400; font-size: 13.5px; line-height: 1.55; letter-spacing: -0.3px;
color: rgba(255,255,255,.80);
word-break: keep-all;
}
.dct_card__career li + li { margin-top: 5px; }
.dct_card__career li::before {
content: '';
position: absolute; left: 0; top: 10px;
width: 6px; height: 1px; background: var(--dct-accent-on); opacity: .9;
}
/* 現 소속은 계열 색으로 강조 */
.dct_card__career li.is-now {
margin-top: 10px; padding-top: 10px;
border-top: 1px dashed rgba(255,255,255,.20);
font-weight: 600; color: var(--dct-accent-on);
}
.dct_card__career li.is-now::before { top: 20px; opacity: 1; }
/* ===== 5. 하단 메시지 — 단색 그린 대신 톤온톤 그라데이션 + 상단 광원으로 깊이를 준다 ===== */
.dct_closing {
position: relative;
padding: 88px 0; text-align: center;
background:
radial-gradient(88% 120% at 50% -6%, rgba(108,148,118,.34) 0%, rgba(70,104,80,0) 60%),
linear-gradient(168deg, #33503C 0%, #294231 50%, #1D3125 100%);
}
/* 상단 골드 헤어라인 — 위 크림 섹션과의 경계를 정리 */
.dct_closing::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, rgba(194,168,120,0) 0%, rgba(194,168,120,.42) 50%, rgba(194,168,120,0) 100%);
}
.dct_closing .dct_inner { position: relative; z-index: 1; }
.dct_closing__title {
margin: 0;
font-weight: 600; font-size: 34px; line-height: 1.35; letter-spacing: -0.26px; color: #fff;
word-break: keep-all;
}
.dct_closing__title em { font-style: normal; color: #E3CFA5; }
.dct_closing__desc {
margin: 27px auto 0; max-width: 760px;
font-weight: 400; font-size: 16px; line-height: 1.9; color: #B8C6B6;
word-break: keep-all;
}
.dct_closing__sign {
display: block; margin-top: 40px;
font-family: 'Cormorant Garamond', serif;
font-weight: 700; font-size: 34px; letter-spacing: 2.4px; color: var(--dct-gold);
}
/* =========================================================================
* 반응형
* ========================================================================= */
@media all and (max-width: 1240px) {
.dct .dct_inner { padding: 0 28px; }
.dct_synergy__title { font-size: 37px; }
.dct_synergy__sub { font-size: 26px; }
.dct_synergy__desc { font-size: 19px; }
.dct_synergy__list > li { padding-right: 30px; }
.dct_synergy__list > li + li { padding-left: 30px; }
.dct_grid { gap: 26px 22px; }
.dct_card__info { padding: 22px 20px; }
.dct_card__name { font-size: 25px; }
.dct_card__career li { font-size: 13px; }
}
@media all and (max-width: 1024px) {
.dct_hero { padding: 104px 28px 112px; }
.dct_hero__label { font-size: 28px; }
.dct_hero__rule { height: 60px; margin: 22px 0; }
.dct_hero__t1 { font-size: 25px; letter-spacing: .6px; }
.dct_hero__t2 { font-size: 30px; letter-spacing: 1px; }
.dct_hero__desc { font-size: 15px; margin-top: 26px; }
/* 시너지: 카피 한 덩어리(비주얼 없음) */
.dct_synergy { padding: 66px 0 72px; }
.dct_synergy::after { height: 92px; }
.dct_synergy__eyebrow { font-size: 16px; letter-spacing: 4.2px; }
.dct_synergy__title { font-size: 32px; margin-top: 18px; }
.dct_synergy__sub { font-size: 23px; margin-top: 20px; }
.dct_synergy__desc { font-size: 18px; max-width: none; }
/* ⚠ 여기서 desc 의
을 숨기지 말 것 — 원문이 "시너지를
내어" 라 붙어버린다 */
.dct_synergy__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 0; margin-top: 40px; padding-top: 30px; }
.dct_synergy__list > li { padding-right: 22px; }
.dct_synergy__list > li + li { padding-left: 22px; }
.dct_synergy__name { font-size: 20px; }
.dct_synergy__text { font-size: 16.5px; padding-left: 0; margin-top: 10px; }
.dct_docs { padding: 64px 0 76px; }
.dct_docs__head { margin-bottom: 46px; }
.dct_docs__eyebrow { font-size: 16px; letter-spacing: 4.2px; }
.dct_docs__title { font-size: 27px; }
.dct_group + .dct_group { margin-top: 62px; }
.dct_group__head { flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.dct_group__title { font-size: 23px; }
.dct_group__desc { font-size: 14px; }
/* 3열 → 2열 (카드가 넓어지므로 약력은 원래 크기로) */
.dct_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
.dct_card { aspect-ratio: 3 / 3.9; }
.dct_card__info { padding: 24px 22px; }
.dct_card__name { font-size: 26px; }
.dct_card__career li { font-size: 14px; }
.dct_closing { padding: 64px 0; }
.dct_closing__title { font-size: 26px; }
.dct_closing__desc { font-size: 15px; }
.dct_closing__sign { font-size: 24px; margin-top: 30px; }
}
@media all and (max-width: 768px) {
.dct .dct_inner { padding: 0 18px; }
.dct_hero { padding: 78px 18px 86px; background-position: center 46%; }
.dct_hero__label { font-size: 24px; }
.dct_hero__t1 { font-size: 21px; }
.dct_hero__t2 { font-size: 25px; letter-spacing: .6px; }
.dct_hero__desc { font-size: 14.5px; line-height: 1.85; }
.dct_synergy { padding: 54px 0 56px; }
.dct_synergy__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
.dct_synergy__eyebrow::before,
.dct_synergy__eyebrow::after { width: 26px; }
.dct_synergy__title { font-size: 26px; }
.dct_synergy__sub { font-size: 21px; }
.dct_synergy__desc { font-size: 17px; }
/* 포인트 3개: 1열 — 세로 헤어라인은 가로선으로 바꾼다 */
.dct_synergy__list { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; padding-top: 28px; }
.dct_synergy__list > li { padding-right: 0; }
.dct_synergy__list > li + li {
padding: 20px 0 0; border-left: 0;
border-top: 1px solid rgba(120,100,60,.14);
}
.dct_synergy__name { font-size: 19px; }
.dct_synergy__text { font-size: 16px; }
.dct_docs__eyebrow { font-size: 14px; letter-spacing: 3.6px; }
.dct_docs__title { font-size: 22px; }
/* ⚠ 본문
은 모바일에서도 숨기지 않는다 — 원문 br 앞뒤에 공백이 없어 숨기면 단어가 붙는다 */
/* 그룹 헤더: 설명은 아래 줄로 */
.dct_group__head { align-items: baseline; }
.dct_group__desc { flex: 1 0 100%; margin: 4px 0 0; text-align: left; }
.dct_group__title { font-size: 21px; }
/* 1열 — 카드가 커지므로 사진 비율을 낮춰 세로 길이를 잡는다 */
.dct_grid { grid-template-columns: 1fr; gap: 20px; }
.dct_card { aspect-ratio: 3 / 3.4; }
.dct_card__info { padding: 24px 22px; top: 54%; } /* 스크림 전이 구간 확보 */
.dct_card__name { font-size: 25px; }
.dct_card__career li { font-size: 14px; }
.dct_card__field { font-size: 12px; letter-spacing: 1.6px; }
/* 터치 환경: 들어올림 효과 없이 패널만 열린다(.is-open 은 탭 토글) */
.dct_card:hover, .dct_card.is-open { transform: none; box-shadow: 0 12px 28px rgba(28,44,34,.14); }
.dct_closing__title { font-size: 21px; }
.dct_closing__desc { font-size: 14.5px; }
.dct_closing__sign { font-size: 21px; }
}
@media all and (max-width: 480px) {
.dct_card { aspect-ratio: 3 / 3.7; }
.dct_card__info { padding: 20px 18px; }
.dct_card__name { font-size: 23px; }
.dct_card__career li { font-size: 13.5px; }
}