/* 회사 소개 — spec §5.7 / §4.7. 레이아웃·간격만. 색은 밴드 변수·토큰 변수만 참조. */
.sec-company{overflow:clip}

/* 클라이맥스: 풀폭 사명 텍스트 — 심볼 없이 단독, 좌정렬, 보호여백 ≥ font-size/2 */
.company__climax{margin-bottom:var(--s-8)}
.company__wordmark{font:800 var(--fs-wordmark-xl)/1 var(--ff);letter-spacing:var(--ls-wordmark);text-transform:uppercase;color:var(--fg);margin-block:.5em;text-align:left;white-space:nowrap}
.company__legal{font:500 var(--fs-caption)/1.5 var(--ff);letter-spacing:var(--ls-caption);color:var(--fg-2)}

/* 본문 grid: 모바일 1열 → ≥1024 5/7 */
.company__body{display:grid;gap:var(--s-7);align-items:start}
.company__meaning-title{font:700 18px/1.4 var(--ff);color:var(--fg)}
.company__meaning-desc{margin-top:12px;max-width:32em;font:500 var(--fs-small)/1.7 var(--ff);color:var(--fg-2)}
/* 마루 링: 모바일 140px → ≥1024 200px (F7). 선 굵기 1.25px는 SVG 속성(vector-effect non-scaling) */
.company__ring{display:block;width:140px;height:140px;margin-top:var(--s-6)}
.company__ring .company__peak{transform-box:fill-box;transform-origin:center}

.company__areas{font:700 18px/1.4 var(--ff);color:var(--fg);margin-bottom:var(--s-5)}
.company__areas .count{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums}

/* 향후 연혁: 세로 2px 선 + hollow 노드 2개 */
.timeline{position:relative;margin-top:var(--s-7);padding-left:28px}
.timeline__list{display:grid;gap:20px}
.timeline__line{position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline__item{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-height:24px}
.timeline__item .node{position:absolute;left:-28px;top:50%;margin-top:-5px}
.timeline__text{font:700 16px/1.4 var(--ff);color:var(--fg)}

/* 대표 서명 블록(F10): 12px 라벨 '대표' + 이름 --fs-h3 700 */
.company__sign{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.company__ceo{margin-top:8px;font:700 var(--fs-h3)/1.3 var(--ff);letter-spacing:var(--ls-heading);color:var(--fg)}

/* <768 벤토 컴팩트(F8): 2열·gap 12, 타일 padding 16, 제목 15px — 1열 ≈880px → 4행 ≈440px */
@media (max-width:767px){
  .sec-company .bento{grid-template-columns:repeat(2,1fr);gap:12px}
  .sec-company .bento__tile{padding:16px}
  .sec-company .bento__title{font-size:15px}
}

@media (min-width:1024px){
  .company__body{grid-template-columns:repeat(12,1fr);gap:var(--grid-gap)}
  .company__meaning{grid-column:1/6;position:sticky;top:calc(var(--header-h) + var(--s-6))}
  .company__main{grid-column:6/13}
  .company__ring{width:200px;height:200px;margin-top:var(--s-7)}
}

/* §5.7 링 드로잉: 1200ms, 안→밖 100ms 간격(motion.css 기본 1400ms/120ms를 링에만 스코프 오버라이드) */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="reduce"]) .company__ring.draw.is-in ellipse{animation-duration:1200ms;animation-delay:calc(var(--k,0) * 100ms)}
}
/* 1024~1279: 5/7 그리드 우측 폭(≈536px)에 4열은 타일 제목 3줄 접힘 → 2×4 */
@media (min-width:1024px) and (max-width:1279px){.sec-company .bento{grid-template-columns:repeat(2,1fr)}}