/* 독일어 버전: 토큰만 바꾸고, 독일어에서만 필요한 배치를 de- 접두사로 추가한다.
 * 색은 global.css의 브랜드 컬러를 그대로 쓰고, 모서리는 6px 이하로 각지게 한다. */
:root {
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: var(--font);
  --fs-body: 16px;
  --lh-body: 1.6;
  --fs-display: clamp(34px, 4.6vw, 56px);
  --fs-h2: clamp(26px, 3vw, 38px);
  --fs-h3: clamp(18px, 1.5vw, 20px);
  --fs-lead: clamp(16px, 1.3vw, 18px);
  --tracking-head: -0.01em;

  --radius: 6px;
  --radius-sm: 4px;
}

/* 버튼은 알약 모양 대신 살짝 둥근 사각형 */
.btn { border-radius: 6px; height: 46px; font-weight: 600; letter-spacing: 0; }
.btn:hover { transform: none; }
.btn-sm { height: 38px; }
/* 버튼은 테두리 없이 면 색으로만 구분한다 */
.btn { border: 0; }
.btn-outline { background: var(--c-bg-alt); color: var(--c-ink); }
.btn-outline:hover { background: var(--c-line); }
.btn-ghost-light { background: rgba(255,255,255,.14); color: var(--gray-0); }
.btn-ghost-light:hover { background: rgba(255,255,255,.22); }
.lang-btn { border-radius: 6px; }

/* 구조선: 섹션 사이에 얇은 선으로 격자를 드러낸다 */
main > .sec { border-top: 1px solid var(--c-line); }
main > .sec:first-of-type { border-top: 0; }
/* 문의 박스 섹션은 박스 위에 선이 붙어 보이지 않게 구분선을 뺀다 */
main > .sec:has(> .wrap > .cta-band) { border-top: 0; }
/* 탭 바로 아래 섹션은 탭의 회색 선과 겹쳐 두 줄로 보이지 않게 구분선을 뺀다 */
main > .sub-nav + .sec { border-top: 0; }

/* 히어로: 차분한 어두운 오버레이 */
.hero-dark .hero-bg::after { background: linear-gradient(90deg, rgba(5,6,13,.94) 0%, rgba(5,6,13,.8) 50%, rgba(5,6,13,.55) 100%); }
.hero-dark .eyebrow, .hero .eyebrow { color: var(--c-on-dark-muted); }
.hero .t-display { max-width: 820px; }
.hero .t-lead { max-width: 680px; }
.de-facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.2); }
.de-facts li { padding: 14px 24px 0 0; margin-right: 24px; font-size: 14px; color: var(--c-on-dark-muted); border-right: 1px solid rgba(255,255,255,.2); }
.de-facts li:last-child { border-right: 0; }
.sec-dark .eyebrow, .cta-band .eyebrow { color: var(--c-on-dark-muted); }

/* 어두운 밴드 */
.cta-band { border-radius: 6px; background: var(--c-bg-dark); }
.cta-band::before { display: none; }

/* 숫자 블록: 위쪽 굵은 선으로 구분 */
.de-kpi .stat, .de-results .stat { border-top: 2px solid var(--c-ink); padding-top: 22px; }
.stat .label { font-weight: 500; }
.stat .src { border-top: 1px dashed var(--c-line-strong); padding-top: 10px; margin-top: 14px; line-height: 1.5; }
.sec-dark .stat .src { border-color: rgba(255,255,255,.2); }

/* 단계 목록 (작동 원리, 이상음 대응) */
.de-steps > li { border-top: 2px solid var(--c-ink); padding: 24px 0 30px; }
.de-steps > li:last-child { border-bottom: 1px solid var(--c-line); }
.de-steps .de-no { font-size: 13px; font-weight: 600; color: var(--c-accent); letter-spacing: .04em; }
.de-steps h3 { margin-top: 6px; }
.de-steps p { margin-top: 10px; color: var(--c-muted); }
.de-steps ul { margin-top: 14px; }
.de-steps li ul li { position: relative; padding-left: 18px; font-size: 15px; color: var(--c-text); }
.de-steps li ul li + li { margin-top: 6px; }
.de-steps li ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--c-accent); }

/* 표: 머리글 줄을 진하게 */
.table-wrap { border-radius: 6px; }
.table thead th { color: var(--c-ink); background: var(--c-bg-alt); }
.table tbody th { width: 30%; }
.table td, .table th { font-size: 15px; }
.de-table-caption { font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 12px; }

/* 카드: 구분선 기반 */
.card { border-radius: 6px; }
.sec-alt .card { border-color: var(--c-line); background: var(--gray-0); }
.card-link:hover { box-shadow: none; border-color: var(--c-ink); }
.card-link { border: 1px solid var(--c-line); }
.card-link .media { aspect-ratio: 16 / 10; width: 100%; }
.card-link .media img { width: 100%; height: 100%; object-fit: cover; }
.card-link .body .link-arrow { color: var(--c-accent); }
.card-link .tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--c-accent); text-transform: none; }
.de-dark-media { background: var(--c-bg-dark); }
.de-dark-media img { object-fit: contain; padding: 10%; }

/* 주의 상자 (초안 표시) */
.de-notice { background: #ffe6f6; border: 1px solid var(--pink); border-radius: 6px; padding: 16px 20px; color: var(--c-ink); font-size: 15px; }
.de-notice strong { color: var(--c-ink); }

/* 데이터량 막대 */
.de-bars { display: grid; gap: 22px; margin-top: 8px; }
.de-bars .row { display: flex; justify-content: space-between; font-size: 15px; gap: 16px; }
.de-bars .track { height: 12px; border-radius: 2px; background: var(--c-line); margin-top: 10px; }
.de-bars .fill { height: 100%; border-radius: 2px; background: var(--c-accent); }
.de-bars .fill.small { background: var(--c-ink); }

/* 계산 조건과 표시 */
.de-note-box { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-muted); line-height: 1.6; }

/* 정의 목록: 사이트 정보 */
.de-dl { display: grid; grid-template-columns: max-content 1fr; gap: 14px 28px; }
.de-dl dt { font-weight: 600; color: var(--c-ink); }
.de-dl dd { margin: 0; color: var(--c-text); }
.de-dl > div { display: contents; }
.de-dl > div > dt, .de-dl > div > dd { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
@media (max-width: 600px) { .de-dl { grid-template-columns: 1fr; } .de-dl > div > dt { border-bottom: 0; padding-bottom: 0; } }

/* 법적 표기 */
.de-legal section + section { margin-top: 40px; }
.de-legal h2 { font-size: 22px; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; letter-spacing: -0.01em; }
.de-legal h3 { font-size: 17px; font-weight: 600; color: var(--c-ink); margin: 26px 0 8px; }
.de-legal p + p { margin-top: 12px; }
.de-legal ul { margin-top: 10px; }
.de-legal ul li { position: relative; padding-left: 18px; }
.de-legal ul li + li { margin-top: 6px; }
.de-legal ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 2px; background: var(--c-accent); }
.de-legal a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* 연표·팀 */
.de-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--c-line); }
.team-group .de-team { border-top: 0; } /* 그룹 제목 밑줄과 겹쳐 두 줄로 보이지 않게 */
.de-team > div { padding: 24px 24px 26px 0; border-bottom: 1px solid var(--c-line); }
.de-team .role { font-size: 13px; font-weight: 600; color: var(--c-accent); letter-spacing: .04em; }
.de-team .name { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--c-ink); }
.de-team .desc { margin-top: 8px; font-size: 15px; color: var(--c-muted); }

/* 연락 양식 */
.form label .opt { font-weight: 400; color: var(--c-muted); margin-left: 6px; }
.form .check a { color: var(--c-accent); text-decoration: underline; }
.form .check input { accent-color: var(--c-accent); }
.de-form-note { font-size: 13px; color: var(--c-muted); margin-top: 12px; }

/* 로고 줄(협력 기관) 모양을 표 느낌으로 */
.de-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.de-partners > div { padding: 22px 22px 24px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.de-partners .kind { font-size: 12px; font-weight: 600; color: var(--c-muted); letter-spacing: .04em; }
.de-partners .who { margin-top: 6px; font-weight: 600; color: var(--c-ink); }
.de-partners .what { margin-top: 6px; font-size: 14px; color: var(--c-muted); }

/* 사양 그림 */
.de-figure { border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-bg-alt); padding: clamp(16px, 2.4vw, 28px); }
.de-figure svg { width: 100%; height: auto; }

/* 사진 아래 짧은 설명 (예시 사진, 화면 캡처) */
.de-photo { margin: 0; max-width: 640px; }
.de-photo img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--c-bg-alt); }
.de-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--c-muted); line-height: 1.6; }

/* 모바일 */
@media (max-width: 600px) {
  .btn-row .btn { width: 100%; }
  .de-facts li { width: 100%; border-right: 0; margin-right: 0; padding-right: 0; }
  .de-kpi .stat, .de-results .stat { padding-top: 18px; }
}

/* 문의 페이지: 넓은 화면에서는 안내 1 : 양식 2, 좁은 화면에서는 한 줄 */
.de-contact-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 960px) { .de-contact-split { grid-template-columns: 1fr; } }

/* 로고: 헤더 26px(기본보다 8px 크게), 푸터 45px(기본의 2.5배) */
.gh .logo img { height: 26px; }
.gf .brand img { height: 45px; }

/* 좁은 화면: 표 칸을 고정 너비로 나누고 긴 단어는 하이픈으로 나눠 줄바꿈 (가로 스크롤 방지) */
@media (max-width: 600px) {
  .table { table-layout: fixed; }
  .table th, .table td { overflow-wrap: anywhere; hyphens: auto; }
}
.de-legal h2 a { color: inherit; }