/* ==========================================================================
   INTOWN — references.css (references.html 전용 · 사업실적)
   site.css 토큰 · 컴포넌트 위에 페이지 전용 요소만 더합니다.
   고객 구분 색은 site.css의 --viz-* 팔레트(검증 순서: 현대 · 한화 · 삼성 · 공공 · 기타)를 따릅니다.
   한글이 들어가는 작은 라벨은 산세리프(Pretendard)로 씁니다. 모노(IBM Plex Mono)는 연도 · 숫자 · 영문 라벨에만.
   ========================================================================== */

/* 공통 보조 글자색 대비 보정 — 모든 페이지 CSS 에 같은 값(site.css 토큰이 같은 값으로 바뀌면 지워도 됩니다).
   --fog-3 #6c7585 → #7a8394 (night 위 5.3:1 · night-3 위 4.8:1) · --ink-3 #676e7b → #5f6673 (paper 위 5.2:1 · paper-2 위 4.7:1)
   헤더 · 공통 푸터 · 모바일 메뉴 · 눈썹 라벨 · 서브내비가 모든 페이지에서 같은 회색으로 보입니다. */
:root { --fog-3: #7a8394; --ink-3: #5f6673; }

/* 서브내비 — 아래 섹션의 테마를 따라 바뀌므로(references.js) 배경 · 경계선도 부드럽게 전환합니다 (company.css 와 같은 값) */
.subnav { transition: top 0.6s var(--ease-out), background-color 0.35s, border-color 0.35s; }
/* 서브내비 링크 색 — 모든 하위 페이지 공통(fg-3 는 어두운 섹션 위 4.3:1 로 부족해 fg-2 와 섞어 4.5:1 이상) */
.subnav__link { color: color-mix(in oklab, var(--fg-2) 50%, var(--fg-3)); }
/* 서브내비 — 목록이 넘치는 좁은 화면: 목록을 화면 끝까지 넓히고, 더 있는 쪽 가장자리를 흐리게 (JS가 is-scrolled · is-end 표시)
   ai.css 와 같은 규칙입니다. 공통 site.css 로 옮기면 이 블록은 지워도 됩니다. */
@media (max-width: 860px) {
  .subnav > .container { width: 100%; }
  .subnav__list {
    padding-inline: calc(var(--gutter) - 12px); scroll-padding-inline: var(--gutter);
    --fl: 0px; --fr: 44px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .subnav__list.is-scrolled { --fl: 32px; }
  .subnav__list.is-end { --fr: 0px; }
  .subnav__link { padding: 0 12px; }
}

/* ---------- 고객 구분 → 색 (색은 항상 텍스트 라벨과 함께) ------------------- */
[data-g="hyundai"] { --c: var(--viz-hyundai); }
[data-g="hanwha"] { --c: var(--viz-hanwha); }
[data-g="samsung"] { --c: var(--viz-samsung); }
[data-g="public"] { --c: var(--viz-public); }
[data-g="other"] { --c: var(--viz-other); }
.gdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--viz-other)); }

/* 어두운 영역의 작은 보조 텍스트 대비 보정: fog-3(#6c7585)는 night 위 4.34:1 · night-3 위 3.96:1
   → 토큰 혼합으로 4.5:1 이상 (히어로 라벨 · 섹션 머리 · 카드 · 주석) */
.ref-hero, .ref-global .section-head, .ref-global .gcards, .ref-global .gcards__note { --fg-3: color-mix(in oklab, var(--fog-2) 50%, var(--fog-3)); }

/* 한글 소형 라벨 — 산세리프 · 자간 0 (모노 공백 폭 때문에 단어 사이가 벌어지지 않도록) */
.grp-sep, .grp__label, .rtable thead th, .rnd__title small {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--fg-3);
}
/* 제목 태그로 쓴 구분 라벨(divider-label)은 본문 굵기로 */
.clients .divider-label, .partners .divider-label { font-weight: 400; line-height: 1.5; }

/* 목록 · 표 항목 끝 단어가 홀로 줄바꿈되지 않도록 */
.grp__rep li, .grp__recent li span, .gcard__list li, .arc-item__n, .rnd__name, .rtable tbody th { text-wrap: pretty; }

/* ---------- 움직임 일시정지 토글 (WCAG 2.2.2 · 홈과 같은 컴포넌트 · 저장 키 공유) --- */
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-c2); transition: color 0.25s, box-shadow 0.25s; }
.motion-toggle:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-3); }
.motion-toggle__icon { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--fg); }
.motion-toggle__icon svg { width: 12px; height: 12px; }
.motion-toggle__play { display: none; }
.is-still .motion-toggle__pause { display: none; }
.is-still .motion-toggle__play { display: block; }
.is-still .ref-stream__track, .is-still .gpin__dot::after, .is-still .badge-soon::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* ---------- Hero ----------------------------------------------------------- */
.ref-hero .page-hero__title { max-width: 12em; }
.ref-stream { display: none; }
@media (min-width: 1081px) {
  .ref-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: clamp(56px, 6vw, 120px); }
  .ref-hero__inner > * { grid-column: 1; }
  .ref-hero__inner > .page-hero__meta { grid-column: 1 / -1; }
  .ref-hero__inner > .ref-stream { grid-column: 2; grid-row: 1 / span 3; }
  .ref-stream.is-ready { display: block; }
}
.ref-stream { position: relative; min-height: 320px; padding-left: 28px; border-left: 1px solid var(--line-c); }
.ref-stream__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.ref-stream__label { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em; color: var(--fg-2); white-space: nowrap; }
.ref-stream__label::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 1.5px; background: var(--grad); }
.ref-stream__view { position: absolute; left: 28px; right: 0; top: 48px; bottom: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 78%, transparent 100%); }
.ref-stream__track { list-style: none; margin: 0; padding: 0; animation: rf-stream var(--dur, 90s) linear infinite; will-change: transform; }
.ref-stream__view:hover .ref-stream__track, .ref-stream.is-paused .ref-stream__track { animation-play-state: paused; }
@keyframes rf-stream { to { transform: translate3d(0, -50%, 0); } }
.ref-stream__row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-c); font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); letter-spacing: -0.01em; }
.ref-stream__row time { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--fg-3); padding-top: 2px; }
.ref-stream__name { display: block; }
.ref-stream__name .gdot { margin: 0 9px 1px 0; vertical-align: middle; width: 6px; height: 6px; }

/* ---------- 01 Groups ------------------------------------------------------- */
.grp-list { display: grid; }
.grp-sep { padding: 0 0 18px; }
.grp { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 28px; padding: clamp(28px, 3vw, 40px) 0 clamp(34px, 3.6vw, 48px); border-top: 1px solid var(--line-c); }
.grp::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: var(--c); transition: width 0.7s var(--ease-out); }
.grp:hover::before, .grp:focus-within::before { width: 100%; }
.grp__head { grid-column: 1 / span 3; display: grid; align-content: start; justify-items: start; gap: 14px; }
/* 그룹 이름 = 로고(원본 색 · 원본 비율, 높이만 맞춤). 로고마다 여백이 달라 시각 크기가 비슷하도록 높이를 따로 둡니다 */
.grp__name { display: flex; align-items: center; min-height: 56px; }
.grp__logo { display: block; width: auto; height: var(--gl, 44px); max-width: 100%; }
.grp__logo[data-h="hyundai"] { --gl: clamp(40px, 3.6vw, 52px); }
.grp__logo[data-h="samsung"] { --gl: clamp(24px, 2.1vw, 30px); }
.grp__logo[data-h="hanwha"] { --gl: clamp(38px, 3.4vw, 48px); }
.grp__link { margin-top: 10px; }
.grp__col { display: grid; align-content: start; gap: 14px; }
.grp__col--a { grid-column: 4 / span 5; }
.grp__col--b { grid-column: 9 / span 4; }
.grp__rep { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.grp__rep li { position: relative; padding-left: 20px; font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.018em; color: var(--fg); }
.grp__rep li::before { content: ""; position: absolute; left: 1px; top: 0.7em; width: 9px; height: 2px; background: var(--c); }
.grp__recent { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-c); }
.grp__recent li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-c); font-size: 0.9375rem; line-height: 1.5; color: var(--fg); }
.grp__recent time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-3); padding-top: 2px; }
@media (max-width: 960px) {
  .grp { row-gap: 24px; }
  .grp__head { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; column-gap: 16px; }
  .grp__name { grid-column: 1; grid-row: 1; min-height: 48px; }
  .grp__link { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
  .grp__col--a, .grp__col--b { grid-column: 1 / -1; }
}

/* ---------- 02 Archive ------------------------------------------------------ */
.arc__tools, .arc__status { display: none; }
.arc.is-ready .arc__tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); gap: 12px; align-items: start; }
.arc.is-ready .arc__status { display: flex; }
.arc.is-ready .arc-fallback { display: none; }
.arc__field { display: grid; gap: 10px; min-width: 0; }
.arc__search { position: relative; }
.arc__search > svg { position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.arc__input { width: 100%; height: 56px; padding: 0 56px 0 50px; border-radius: 999px; border: 1px solid var(--line-c2); background: var(--card); color: var(--fg); font: inherit; font-size: 1rem; letter-spacing: -0.012em; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; }
.arc__input::placeholder { color: var(--fg-3); }
.arc__input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-blue) 14%, transparent); }
.arc__input::-webkit-search-cancel-button, .arc__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.arc__clear { position: absolute; right: 10px; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); display: grid; place-items: center; border-radius: 50%; color: var(--fg-2); transition: background-color 0.2s, color 0.2s; }
.arc__clear svg { width: 14px; height: 14px; }
.arc__clear:hover { background: color-mix(in oklab, var(--fg) 7%, transparent); color: var(--fg); }
/* 검색 예시 (누르면 검색어로 입력) */
.arc__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 18px; font-size: 0.8125rem; color: var(--fg-3); }
.arc__hint-k { margin-right: 4px; }
.arc__eg { height: 28px; padding: 0 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-c); transition: color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.arc__eg:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-3); }
.arc__eg.is-on { color: var(--fg); background: color-mix(in oklab, var(--fg) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line-c2); }
.arc__period { position: relative; }
.arc__period > svg { position: absolute; right: 20px; top: 28px; width: 14px; height: 14px; transform: translateY(-50%); color: var(--fg-2); pointer-events: none; }
.arc__select { width: 100%; height: 56px; padding: 0 46px 0 22px; border-radius: 999px; border: 1px solid var(--line-c2); background: var(--card); color: var(--fg); font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; }
.arc__select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-blue) 14%, transparent); }
.arc__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-2); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-c2); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg-3); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.chip[aria-pressed="true"] .gdot { box-shadow: 0 0 0 2px var(--bg); }
/* 결과 없는 칩: 글자 대비는 유지(4.5:1 이상)하고 테두리 · 색 점만 약하게 */
.chip.is-zero:not([aria-pressed="true"]) { color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--line-c); }
.chip.is-zero .gdot { opacity: 0.35; }
.arc__status { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 30px 0 0; padding-bottom: 14px; }
.arc__count { font-size: 0.9375rem; color: var(--fg-2); }
.arc__count b { color: var(--fg); font-weight: 650; font-variant-numeric: tabular-nums; }
.arc__reset { font-size: 0.875rem; font-weight: 600; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* 기간 그룹 — 12열: 머리 3 · 목록 9 (그룹별 실적 · 고객 목록의 본문 칸과 같은 시작선) */
.arc-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding: 26px 0 30px; border-top: 1px solid var(--line-c); }
.arc-group__head { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 84px); align-self: start; display: grid; gap: 8px; }
.arc-group__title { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.375rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.arc-group__meta { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-3); }
.arc-group__meta b { color: var(--fg); font-weight: 650; }
.arc-group__title:focus { outline: none; }
.arc-group.is-flash .arc-group__title { animation: rf-flash 1.6s var(--ease-out); }
@keyframes rf-flash { 0%, 30% { color: var(--c-blue); } 100% { color: var(--fg); } }
.arc-group__list { grid-column: 4 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 44px); align-content: start; }
.arc-item { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-c); }
.arc-item__g { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--fg-3); white-space: nowrap; }
.arc-item__g .gdot { position: relative; top: -1px; }
.arc-item__n { font-size: 0.9375rem; line-height: 1.55; letter-spacing: -0.012em; color: var(--fg); }
.arc-item mark { color: inherit; background: color-mix(in oklab, var(--c-blue) 17%, transparent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-blue) 17%, transparent); }
.arc__more { display: flex; justify-content: center; padding-top: 40px; border-top: 1px solid var(--line-c); }
.arc__empty { padding: 56px 0 24px; border-top: 1px solid var(--line-c); text-align: center; color: var(--fg-2); }
.arc__empty strong { display: block; margin-bottom: 6px; font-size: 1.125rem; color: var(--fg); }
.arc-fallback { padding: 28px 0; border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); font-size: 0.9375rem; color: var(--fg-2); }
@media (max-width: 960px) {
  .arc-group { row-gap: 12px; }
  .arc-group__head { grid-column: 1 / -1; position: static; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; }
  .arc-group__list { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .arc.is-ready .arc__tools { grid-template-columns: minmax(0, 1fr); }
  .arc__hint { padding-left: 4px; }
  .arc__chips { flex-wrap: nowrap; overflow-x: auto; margin: 4px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter); scrollbar-width: none; }
  .arc__chips::-webkit-scrollbar { display: none; }
  .arc-item { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
}

/* ---------- 03 Global ------------------------------------------------------- */
.gmap { position: relative; margin: 0 0 clamp(48px, 6vw, 88px); }
.gmap img { width: 100%; height: auto; }
.gmap__pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.gpin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.gpin__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue-hi); box-shadow: 0 0 0 4px rgba(116, 151, 255, 0.18); transition: transform 0.4s var(--ease-out), box-shadow 0.4s; }
/* 핀 파동: 지도가 화면에 들어올 때 두 번만(5초 이내) — 계속 움직이는 장식은 두지 않습니다 */
.gpin__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(116, 151, 255, 0.55); opacity: 0; }
.gmap.is-in .gpin__dot::after { animation: rf-ping 2.2s var(--ease-out) 2 both; }
.gmap.is-in .gpin:nth-child(3n) .gpin__dot::after { animation-delay: 0.25s; }
.gmap.is-in .gpin:nth-child(3n + 1) .gpin__dot::after { animation-delay: 0.5s; }
@keyframes rf-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.gpin__label { position: absolute; left: 14px; top: -13px; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(9, 13, 21, 0.86); border: 1px solid var(--line-d-strong); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fog); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.gpin__label b { margin-left: 4px; font-weight: 700; color: var(--c-blue-hi); transition: color 0.3s; }
.gpin--l .gpin__label { left: auto; right: 14px; }
.gpin--t .gpin__label { left: -24px; top: -40px; }
.gpin--hq .gpin__dot { background: var(--c-green-hi); box-shadow: 0 0 0 4px rgba(160, 217, 112, 0.2); }
.gpin--hq .gpin__dot::after { border-color: rgba(160, 217, 112, 0.6); }
.gpin--hq .gpin__label { background: var(--fog); border-color: var(--fog); color: var(--ink); }
.gpin.is-hot .gpin__dot { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(116, 151, 255, 0.26); }
.gpin.is-hot .gpin__label { background: var(--fog); border-color: var(--fog); color: var(--ink); }
.gpin.is-hot .gpin__label b { color: var(--c-blue); }
@media (max-width: 640px) {
  /* 좁은 지도에서는 건수 배지만 (국가명 · 건수는 바로 아래 카드에 있습니다) */
  .gpin__label { font-size: 0; letter-spacing: 0; padding: 0 5px; height: 16px; line-height: 16px; left: 7px; top: -8px; border-radius: 5px; }
  .gpin__label b { margin: 0; font-size: 10px; line-height: 14px; }
  .gpin--l .gpin__label { left: auto; right: 7px; }
  .gpin--t .gpin__label { left: -8px; top: -25px; }
  /* 베트남 · 인도네시아 배지가 위아래로 붙지 않도록 간격 조정 */
  .gpin[data-country="vn"] .gpin__label { top: -6px; }
  .gpin[data-country="id"] .gpin__label { top: -2px; }
  .gpin--hq .gpin__label { font-size: 10px; line-height: 14px; padding: 0 6px; }
  .gpin__dot { left: -4px; top: -4px; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(116, 151, 255, 0.18); }
}

/* 국가 카드 — 건수 순 · 이름/지역을 머리에 묶어 목록 시작선을 맞춤 */
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-c); }
.gcard { position: relative; display: grid; align-content: start; gap: 16px; padding: 28px clamp(16px, 2vw, 28px) 34px; border-bottom: 1px solid var(--line-c); border-left: 1px solid var(--line-c); transition: background-color 0.35s; }
.gcard:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.gcard::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: calc(var(--v) / var(--vmax, 25) * 100%); max-width: 100%; min-width: 14px; background: var(--c-blue-hi); transition: width 0.7s var(--ease-out); }
.gcard.is-hot { background: color-mix(in oklab, var(--fg) 3%, transparent); }
.gcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 3.75rem; }
.gcard__id { display: grid; gap: 6px; min-width: 0; padding-top: 4px; }
.gcard__name { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.025em; }
.gcard__n { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; }
.gcard__n small { margin-left: 3px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-2); }
.gcard__where { font-size: 0.8125rem; font-weight: 550; line-height: 1.45; color: var(--accent); letter-spacing: -0.01em; }
.gcard__list { gap: 10px; }
.gcards__note { margin-top: 20px; max-width: 72ch; }
@media (max-width: 1080px) {
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcard:nth-child(4n + 1) { border-left: 1px solid var(--line-c); padding-left: clamp(16px, 2vw, 28px); }
  .gcard:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
  .gcards { grid-template-columns: minmax(0, 1fr); }
  .gcard, .gcard:nth-child(4n + 1) { border-left: 0; padding: 22px 0 26px; gap: 12px; }
  .gcard__head { min-height: 0; }
}

/* ---------- 04 R&D · 공공 · 금융 (12열: 과제 7 · 공공/금융 4 — 섹션 머리 설명 칸과 정렬) --- */
.rnd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 56px; align-items: start; }
.rnd__block--main { grid-column: 1 / span 7; }
.rnd__side { grid-column: 9 / span 4; display: grid; gap: clamp(44px, 5vw, 64px); }
.rnd__block { display: grid; align-content: start; }
.rnd__title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--fg); font-size: var(--fs-h4); font-weight: 650; letter-spacing: -0.024em; }
.rnd__list { list-style: none; margin: 0; padding: 0; }
.rnd__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line-c); }
.rnd__no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.rnd__name { font-size: 1.0625rem; line-height: 1.55; letter-spacing: -0.018em; color: var(--fg); }
.rnd__meta { display: block; margin-top: 4px; font-size: 0.8125rem; line-height: 1.55; color: var(--fg-3); letter-spacing: -0.005em; }
.rnd__link { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); white-space: nowrap; transition: color 0.2s; }
.rnd__link svg { width: 13px; height: 13px; transition: transform 0.4s var(--ease-out); }
.rnd__link:hover { color: var(--fg); }
.rnd__link:hover svg { transform: translateX(3px); }
.rtable { width: 100%; border-collapse: collapse; }
.rtable thead th { padding: 16px 0 10px; border-bottom: 1px solid var(--line-c); text-align: left; }
.rtable thead th:last-child { text-align: right; }
.rtable tbody th { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line-c); font-size: 1rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.018em; color: var(--fg); text-align: left; }
.rtable td { padding: 16px 0; border-bottom: 1px solid var(--line-c); font-size: 0.9375rem; line-height: 1.45; color: var(--fg-2); text-align: right; white-space: nowrap; }
.rledger { margin: 0; }
.rledger > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-c); }
.rledger dt { font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; }
.rledger dd { margin: 0; font-size: 0.9375rem; color: var(--fg-2); text-align: right; }
.rnd__archive { justify-self: start; }
@media (max-width: 960px) { .rnd__block--main, .rnd__side { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .rnd__item { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; }
  .rnd__link { grid-column: 2; justify-self: start; }
  .rtable td { white-space: normal; }
}

/* ---------- 05 Clients & partners ------------------------------------------ */
/* R&D(라이트) 바로 뒤에 이어지므로 섹션 사이를 헤어라인으로 나눕니다 (그룹별 실적 → 프로젝트 목록도 같은 방식) */
.ref-rnd, .ref-groups { padding-bottom: clamp(80px, 9vw, 136px); }
.ref-rnd + .ref-clients, .ref-groups + .ref-archive { padding-top: 0; }
.ref-rnd + .ref-clients > .container::before, .ref-groups + .ref-archive > .container::before { content: ""; display: block; height: 1px; margin-bottom: clamp(80px, 9vw, 136px); background: var(--line-c); }

/* 파트너 · 수상 — 헤어라인 3열(카드 대신 편집형 행) */
.partners { display: grid; gap: 22px; margin: 0 0 clamp(64px, 8vw, 112px); }
/* 위쪽 선은 구분 라벨의 선이 대신합니다 (헤어라인 겹침 방지) */
.partner-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line-c); }
.partner { display: grid; align-content: start; gap: 8px; padding: 6px 28px 32px 0; }
.partner + .partner { padding-left: 28px; border-left: 1px solid var(--line-c); }
.partner__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.partner__name { margin-top: 10px; font-size: clamp(1.5rem, 1.15rem + 1vw, 2.125rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.12; }
.partner__d { font-size: 0.9375rem; color: var(--fg-2); }
/* 로고가 있는 파트너는 로고만 (글자 이름과 같은 높이 줄에 맞춤) */
.partner__name--logo { display: flex; align-items: center; min-height: calc(clamp(1.5rem, 1.15rem + 1vw, 2.125rem) * 1.12); }
.partner__logo { display: block; width: auto; height: clamp(20px, 1.7vw, 25px); }
/* 두 줄 워드마크 · 심볼이 있는 로고 — 글자 크기를 삼성SDS 워드마크와 맞춤 */
.partner__logo--tall { height: clamp(32px, 2.8vw, 42px); }
.partners:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .partner-grid { grid-template-columns: minmax(0, 1fr); }
  .partner, .partner + .partner { padding: 22px 0 24px; border-left: 0; }
  .partner:first-child { padding-top: 4px; }
  .partner + .partner { border-top: 1px solid var(--line-c); }
  .partner__name { margin-top: 4px; }
}

/* 주요 고객 로고 흐름 (컴포넌트는 site.css .logo-marquee) — 로고 두 줄 + 로고 파일이 없는 고객의 조용한 글자 줄 */
.clients { display: grid; gap: 10px; margin: 0 0 clamp(64px, 8vw, 112px); }
.clients__flow { display: grid; border-bottom: 1px solid var(--line-c); padding-bottom: 8px; }
.logo-marquee--text { --marquee-gap: 0px; }
.logo-marquee--text li { height: clamp(52px, 4.4vw, 64px); padding: 0 clamp(18px, 2.2vw, 30px); }
.logo-marquee--text .logo-name { font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem); font-weight: 600; letter-spacing: -0.02em; color: var(--fg-3); }
.logo-marquee--text li { position: relative; }
.logo-marquee--text li::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 1px; background: var(--line-c2); }

/* 해외 실적: 라벨 아래 방향 · 카드 '외 N건 보기' */
.gpin--b .gpin__label { left: -24px; top: 14px; }
@media (max-width: 720px) { .gpin--b .gpin__label { left: -8px; top: 9px; } }
.gcard__more { margin-top: 10px; }
.gcard__more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); }
.gcard__more summary::-webkit-details-marker { display: none; }
.gcard__more summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.3s; }
.gcard__more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.gcard__more summary:hover { color: var(--fg); }
.gcard__more .gcard__list { margin-top: 10px; }