/* ==========================================================================
   Components. REGEN NETWORKS, 2026-08-28.

   테마 세 가지 (김진영): 신뢰(정직) / 다재다능 / 세련되고 모던.
   - 정직은 장식을 줄여서 만든다. 둥근 모서리 없음, 그림자 없음, 괘선 1px.
   - 세련됨은 여백과 정렬로 만든다. 색은 로고에서만 가져온다.
   - 섹션마다 왼쪽에 번호와 세로 괘선을 둔다(.sec__index). 이 등뼈가 페이지 전체를
     하나의 문서로 묶는다. 랜딩페이지 상투구(카드 3개, 아이콘 3개)를 쓰지 않는 대신이다.
   ========================================================================== */

/* ── 히어로 ─────────────────────────────────────────────────────────────── */
.hero { padding: clamp(56px, 8vw, 104px) 0 0; }
.hero__inner { display: grid; gap: 28px; }
.hero__eyebrow { color: var(--accent); }
.hero .display--xl { max-width: 18em; }
.hero__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; padding-top: 8px; }
.hero__meta { display: flex; gap: 40px; margin: 0; }
.hero__meta div { display: grid; gap: 4px; }
.hero__meta dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-soft); }
.hero__meta dd { margin: 0; font-size: 26px; line-height: 1.1; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 12px; }
@media (max-width: 860px) {
  .hero__cols { grid-template-columns: 1fr; align-items: start; }
  .hero__meta { gap: 28px; }
  .hero__meta dd { font-size: 22px; }
}

/* Full-bleed figure: escapes .container without causing horizontal scroll. */
.bleed { margin: clamp(40px, 6vw, 72px) 0 0; }
.bleed img { width: 100%; aspect-ratio: 16 / 6.5; object-fit: cover; object-position: center 42%; }
.bleed figcaption { padding-top: 12px; }
@media (max-width: 700px) { .bleed img { aspect-ratio: 4 / 3; } }

/* ── 섹션 뼈대 ──────────────────────────────────────────────────────────── */
.sec { padding: var(--section) 0; border-top: 1px solid var(--line); }
.sec--surface { background: var(--surface); border-top-color: transparent; }
.sec--ink { background: var(--ink); color: var(--on-ink); border-top-color: transparent; }
.sec--ink .display, .sec--ink .lead { color: var(--on-ink); }
.sec--ink .label { color: var(--sky); }
.sec--cta { border-top: 2px solid var(--ink); }

.sec__grid { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 40px; }
.sec__index {
  position: relative; margin: 0; padding-top: 4px;
  font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent);
}
/* the spine: a hairline dropping from the section number */
.sec__index::after {
  content: ""; position: absolute; left: 3px; top: 32px; bottom: -8px; width: 1px;
  background: var(--line);
}
.sec--ink .sec__index { color: var(--sky); }
.sec--ink .sec__index::after { background: rgba(169, 188, 204, 0.35); }

.sec__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.sec__head .lead { padding-bottom: 4px; }
.sec__foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-soft); max-width: 68ch; }
.sec--ink .sec__foot { border-top-color: rgba(169, 188, 204, 0.35); color: var(--on-ink-soft); }

@media (max-width: 900px) {
  .sec__grid { grid-template-columns: 1fr; gap: 0; }
  .sec__index { padding-bottom: 20px; }
  .sec__index::after { display: none; }
  .sec__head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
}

/* ── 네 가지 ────────────────────────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); }
.pillar { display: grid; gap: 10px; align-content: start; padding: 28px 28px 0 0; }
.pillar + .pillar { border-left: 1px solid var(--line); padding-left: 28px; }
.pillar__n { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent-cyan); }
.pillar p:last-child { color: var(--text); }
@media (max-width: 1000px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pillar:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 28px; }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: 0 !important; padding: 24px 0 0; }
  .pillar + .pillar { border-top: 1px solid var(--line); margin-top: 0; }
}

/* ── 취급 품목 ──────────────────────────────────────────────────────────── */
.spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 40px; margin-top: clamp(48px, 6vw, 72px); }
.spec__group { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ornament); }
.spec__t { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); }
.spec__group--note { border-top-color: var(--accent); }
.spec__list { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--text-soft); }
.spec__list li { position: relative; padding-left: 15px; }
.spec__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--ornament); }
@media (max-width: 1000px) { .spec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .spec { grid-template-columns: 1fr; gap: 26px; } }

/* ── 네트워크 ───────────────────────────────────────────────────────────── */
.net { margin: clamp(48px, 6vw, 72px) 0 0; border-top: 1px solid var(--line); }
.net__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 48px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.net__row dt { display: flex; align-items: baseline; gap: 14px; }
.net__code { font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--accent-cyan); }
.net__name { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); color: var(--ink); }
.net__row dd { margin: 0; }
@media (max-width: 700px) { .net__row { grid-template-columns: 1fr; gap: 8px; } }

/* ── 밴드 (사진 + 글) ───────────────────────────────────────────────────── */
.band { display: grid; grid-template-columns: 55fr 45fr; background: var(--surface); }
.band__media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.band__body { display: flex; align-items: center; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); }
.band__inner { display: grid; gap: 16px; max-width: 46ch; }
.band__inner p { color: var(--text); }
@media (max-width: 900px) { .band { grid-template-columns: 1fr; } .band__media img { min-height: 0; aspect-ratio: 3 / 2; } }

/* ── 프로세스 ───────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 40px; margin-top: clamp(48px, 6vw, 72px); }
.step { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid rgba(169, 188, 204, 0.4); }
.step__n { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--sky); }
.step__t { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; color: var(--on-ink); }
.step p { font-size: var(--fs-small); color: var(--on-ink-soft); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

/* ── 사람 ───────────────────────────────────────────────────────────────── */
.person { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.person__photo { margin: 0; }
.person__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.person__body { display: grid; gap: 18px; align-content: start; }
.person__body > p { max-width: 56ch; }

/* 경로: 나라와 한 일을 한 줄씩. 이력서가 아니라 왜 이 조합이 드문지를 보여주는 자리. */
.path { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.path__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.path__where { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-weight: 500; }
.path__code { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--accent-cyan); font-weight: 500; }
.path__what { color: var(--text-soft); }
@media (max-width: 720px) {
  .person { grid-template-columns: 1fr; }
  .person__photo { max-width: 240px; }
  .path__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── 웹·업무자동화 ──────────────────────────────────────────────────────── */
.soft { display: grid; gap: 16px; max-width: 62ch; margin-top: clamp(32px, 4vw, 48px); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.cta { display: grid; gap: 20px; justify-items: start; max-width: 720px; }

/* ── 남은 web-kit 유틸 ──────────────────────────────────────────────────── */
.grid { display: grid; gap: 32px 24px; margin-top: 40px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* One-time reveal on scroll (main.js adds .is-in). No motion when the user asked for none. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in, html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Review notes: elements with data-note get a numbered badge when the page is opened with ?notes=badges or ?notes=1.
   Draft/unconfirmed remarks live here, never in the visible copy. */
.note-badge { position: absolute; z-index: 150; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; background: #d3222a; color: #fff; font: 700 14px/1 var(--font-mono); border-radius: 13px; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.note-panel { position: fixed; right: 16px; bottom: 16px; z-index: 160; max-width: 360px; max-height: 60vh; overflow: auto; padding: 16px 18px; background: #fff; color: #222; font: 13px/1.5 var(--font-text); border: 1px solid #ccc; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.note-panel ol { padding-left: 20px; list-style: decimal; }

/* ── 누구 편인가 ────────────────────────────────────────────────────────────
   바이어가 오파상에게 갖는 불신에 답하는 자리다. 카드로 만들지 않는다.
   테두리 상자는 광고처럼 읽히고, 여기서는 사실을 조용히 세워 두는 게 맞다. */
.stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-top: clamp(48px, 6vw, 72px); }
.stand__item { display: grid; gap: 8px; align-content: start; padding: 28px 0; border-top: 1px solid var(--line); }
.stand__item:nth-child(-n + 2) { border-top-color: var(--accent); }
.stand__n { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent-cyan); }
.stand__item p:last-child { color: var(--text); max-width: 44ch; }
@media (max-width: 800px) { .stand { grid-template-columns: 1fr; gap: 0; } .stand__item:nth-child(2) { border-top-color: var(--line); } }

/* 푸터 로고는 명함에서 뽑은 전체 락업을 그대로 쓴다. 머리글은 심볼만, 꼬리글은 락업. */
.ftr__logo { width: 132px; height: auto; margin-bottom: 16px; }

/* ==========================================================================
   속 페이지. 홈과 같은 장치(등뼈, 괘선, 모서리 0)를 그대로 쓴다.
   새 컴포넌트를 만들기보다 홈의 것을 재사용하는 쪽을 먼저 본다.
   ========================================================================== */

/* 항목표: 법인 정보처럼 이름과 값이 짝지어지는 것 */
.kv { margin: 0; border-top: 1px solid var(--line); }
.kv__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.kv__row dt { color: var(--text-soft); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; padding-top: 2px; }
.kv__row dd { margin: 0; color: var(--text); }
@media (max-width: 560px) { .kv__row { grid-template-columns: 1fr; gap: 2px; } }

/* 두 법인을 나란히 */
.ent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; margin-top: clamp(40px, 5vw, 64px); }
.ent__col { display: grid; gap: 14px; align-content: start; }
.ent__t { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }
.ent__role { color: var(--text-soft); font-size: var(--fs-small); }
@media (max-width: 800px) { .ent { grid-template-columns: 1fr; gap: 40px; } }

/* 연혁 */
.tl { margin: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--line); }
.tl__row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 4px 32px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tl__when { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--accent-cyan); padding-top: 4px; }
.tl__what { color: var(--text); }
@media (max-width: 560px) { .tl__row { grid-template-columns: 1fr; gap: 2px; } }

/* 사업/사례: 번호 + 제목 + 본문 + 곁줄, 세로로 쌓는다 */
.stack { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.stack__item { display: grid; grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px 48px; padding: 36px 0; border-bottom: 1px solid var(--line); align-items: start; }
.stack__n { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent-cyan); padding-top: 6px; }
.stack__main { display: grid; gap: 10px; }
.stack__t { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }
.stack__side { display: grid; gap: 8px; padding-top: 4px; }
.stack__side h4 { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-soft); font-weight: 500; }
.stack__side ul { display: grid; gap: 5px; font-size: var(--fs-small); color: var(--text-soft); }
.stack__side li { position: relative; padding-left: 15px; }
.stack__side li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 7px; height: 1px; background: var(--ornament); }
.stack__kind { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--accent-cyan); }
@media (max-width: 900px) { .stack__item { grid-template-columns: 40px minmax(0, 1fr); } .stack__side { grid-column: 2; padding-top: 8px; } }
@media (max-width: 560px) { .stack__item { grid-template-columns: 1fr; gap: 10px; } .stack__side { grid-column: 1; } }

/* 자료: 묻고 답하는 글 묶음 */
.kb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; margin-top: clamp(40px, 5vw, 64px); }
.kb__item { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ornament); }
.kb__q { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); line-height: 1.35; color: var(--ink); }
.kb__item p { color: var(--text); }
@media (max-width: 800px) { .kb { grid-template-columns: 1fr; gap: 28px; } }

/* 문의 */
.ct { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: clamp(40px, 5vw, 64px); }
.ct__col { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ornament); }
.ct__col h3 { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--text-soft); font-weight: 500; }
.ct__col ul { display: grid; gap: 8px; }
.ct__big { font-size: var(--fs-h4); color: var(--ink); }
@media (max-width: 1040px) { .ct { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 640px) { .ct { grid-template-columns: 1fr; gap: 28px; } }

/* 보내 주시면 빠릅니다: 번호 매긴 체크리스트 */
.ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 48px; margin-top: clamp(40px, 5vw, 64px); counter-reset: ask; }
.ask__item { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.ask__item::before { counter-increment: ask; content: counter(ask, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent-cyan); }
.ask__t { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-body); color: var(--ink); }
.ask__item p { font-size: var(--fs-small); color: var(--text-soft); }
@media (max-width: 800px) { .ask { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ask { grid-template-columns: 1fr; } }

/* 인용: 본인이 쓴 문장을 그대로 옮기는 자리. 따옴표 그래픽 대신 왼쪽 굵은 괘선. */
.quote { margin: clamp(40px, 5vw, 64px) 0 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--accent); max-width: 52ch; }
.quote p { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.quote strong { font-weight: 600; }
.quote__by { margin-top: 14px; }
.quote__after { margin-top: 28px; }

/* ==========================================================================
   자료(글). 옛 워드프레스에서 하던 전략을 이어받는다 — 공정 지식을 올려
   전문성을 보이고, 검색으로 사람을 부르고, 바이어 미팅에서 그 자리에 열어 보인다.
   그래서 글마다 주소가 따로 있어야 하고, 휴대폰에서 읽혀야 하고,
   비교표는 손가락으로 짚을 수 있을 만큼 커야 한다.
   ========================================================================== */

/* 글 목록 */
.arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.art-card { display: grid; gap: 8px; align-content: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.art-card__meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--accent-cyan); }
.art-card__t { margin: 0; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); line-height: 1.35; color: var(--ink); }
.art-card a { display: block; }
.art-card a:hover .art-card__t { color: var(--accent); }
.art-card p { font-size: var(--fs-small); color: var(--text-soft); }
.art-card--soon { opacity: 0.55; }
@media (max-width: 800px) { .arts { grid-template-columns: 1fr; gap: 0; } }

/* 글 본문 */
.prose { max-width: 66ch; }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 52px; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.prose h3 { margin-top: 36px; font-family: var(--font-text); font-weight: 500; font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 18px; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--ornament); }
.prose ol { counter-reset: p; }
.prose ol li { padding-left: 32px; }
.prose ol li::before { content: counter(p, decimal-leading-zero); counter-increment: p; top: 0; width: auto; height: auto; background: none; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent-cyan); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose__note { padding: 20px 24px; background: var(--surface); border-left: 2px solid var(--accent); font-size: var(--fs-small); }
.prose__note p { margin: 0; }
.prose__note p + p { margin-top: 10px; }

/* 비교표: 미팅에서 손가락으로 짚는 자리라 작게 만들지 않는다 */
.cmp { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: var(--fs-small); }
.cmp caption { text-align: left; padding-bottom: 10px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--text-soft); }
.cmp th, .cmp td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { border-bottom: 1px solid var(--ink); color: var(--ink); font-weight: 500; }
.cmp tbody th { font-weight: 400; color: var(--text-soft); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; width: 140px; }
.cmp td { color: var(--text); }
.cmp__wrap { overflow-x: auto; }
@media (max-width: 560px) { .cmp { min-width: 480px; } }

/* 글 머리와 꼬리 */
.art-head { display: grid; gap: 16px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--text-soft); }
.art-foot { margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.art-foot__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }