/* company — blocks that exist only on 회사소개. Frame and shared patterns live in story.css. */

/* 01 · capability clusters */
.capability-grid {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--rule);
}

.capability-grid li {
  min-height:200px;
  padding:24px;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:background .2s,color .2s;
}

.capability-grid .caption {
  color:var(--muted);
}

.capability-grid h3 {
  margin-bottom:auto;
}

.capability-grid li p:last-child {
  font-size:var(--body);
  color:var(--muted);
  padding-top:24px;
}

.capability-grid li:hover {
  background:var(--ink);
  color:var(--paper);
}

.capability-grid li:hover .caption {
  color:var(--ink);
}

/* 02 · converge: three realities → one complex issue → five capabilities */
.converge {
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);
  gap:0 48px;
  align-items:center;
}

.converge .caption {
  color:var(--muted);
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.converge ol,
.converge ul {
  list-style:none;
  margin:0;
  padding:0;
}

.converge-in li {
  display:grid;
  grid-template-columns:40px 1fr;
  column-gap:8px;
  padding:20px 0;
  border-bottom:1px solid var(--rule);
}

.converge-in li span {
  grid-row:1/3;
  font-size:20px;
  color:var(--muted);
}

.converge-in li p,
.converge-out li p {
  font-size:var(--body);
  color:var(--muted);
}

.converge-in h3,
.converge-out h3 {
  font-size:20px;
}

.converge-out li {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}

.converge-core {
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--paper);
}

.converge-core p {
  font-size:20px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em;
  text-align:center;
}

.converge-wire {
  position:absolute;
  top:50%;
  width:48px;
  height:1px;
  background:var(--ink);
  transform-origin:left;
}

.converge-wire:first-child {
  right:100%;
}

.converge-wire:last-child {
  left:100%;
}

/* 02 · anchor: inputs → AXDX modeling → one proposal */
.anchor {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}

.anchor-inputs {
  display:grid;
  gap:32px;
}

.anchor-inputs>div,
.anchor-output {
  padding-top:16px;
  border-top:1px solid #444;
}

.anchor .caption {
  color:var(--muted);
  margin-bottom:8px;
}

.anchor-model {
  padding:32px;
  border:1px solid #333;
  background:#111;
}

.anchor-mark {
  display:flex;
  align-items:flex-end;
  gap:16px;
  font-size:var(--title);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--ink);
  margin-bottom:24px;
}

.anchor-mark small {
  font-size:var(--small);
  font-weight:400;
  letter-spacing:.12em;
  line-height:1.3;
  color:var(--muted);
}

.anchor-model ol {
  list-style:none;
  margin:0;
  padding:0;
}

.anchor-model li {
  display:flex;
  gap:16px;
  padding:14px 0;
  border-top:1px solid #333;
  font-size:var(--body);
  font-weight:400;
}

.anchor-model li span {
  font-size:var(--small);
  color:var(--ink);
  padding-top:4px;
}

.anchor-output h3 {
  font-size:20px;
  margin-bottom:24px;
}

.anchor-output ul {
  list-style:none;
  margin:0;
  padding:0;
}

.anchor-output li {
  padding:12px 0;
  border-top:1px solid #333;
}

/* 03 · commercialization matrix */
.matrix {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.matrix caption {
  text-align:left;
  color:var(--muted);
  padding-bottom:16px;
}

.matrix thead th {
  font-size:var(--small);
  letter-spacing:.06em;
  font-weight:400;
  text-align:left;
  padding:0 8px 16px;
  border-bottom:1px solid var(--ink);
}

.matrix thead th:first-child {
  width:32%;
}

.matrix tbody th {
  text-align:left;
  font-weight:400;
  padding:28px 24px 28px 0;
}

.matrix tbody th strong {
  display:block;
  font-size:20px;
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.2;
}

.matrix tbody th small {
  display:block;
  margin-top:6px;
  font-size:var(--body);
  color:var(--muted);
  word-break:keep-all;
}

.matrix td {
  padding:0 6px;
}

.matrix tr {
  border-bottom:1px solid var(--rule);
}

.matrix tbody tr:last-child {
  border-bottom:1px solid var(--ink);
}

.matrix td i {
  display:block;
  height:12px;
  background:#e8e8e8;
  transform-origin:left;
}

.matrix td[data-on="1"] i {
  background:var(--accent);
}

/* 03 · origin */
.origin-policy {
  margin:8px 0 0;
  display:grid;
  gap:8px;
  font-size:var(--body);
  padding-top:16px;
  border-top:1px solid var(--line);
}

.origin-policy div {
  display:flex;
  gap:12px;
}

.origin-policy dt {
  font-weight:400;
  flex-shrink:0;
}

.origin-policy dd {
  margin:0;
}

.origin-founded {
  display:grid;
  grid-template-columns:var(--origin-date-column,clamp(180px,16vw,240px)) minmax(0,1fr);
  column-gap:var(--origin-column-gap,40px);
  align-items:center;
}

.origin-year {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
  gap:4px;
}

.origin-year p { margin:0; }

.origin-year .display-num { display:flex; align-items:baseline; gap:4px; white-space:nowrap; }
.origin-year-unit { font-size:var(--body); font-weight:400; letter-spacing:0; line-height:1; }

.origin-date {
  font-weight:400;
}

.origin-body {
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.origin-body h3 {
  font-size:20px;
  line-height:1.4;
  word-break:keep-all;
}

.origin-body ol {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  counter-reset:origin-item;
}

.origin-body li {
  font-size:var(--body);
  color:var(--muted);
  padding-top:12px;
  border-top:1px solid var(--rule);
  word-break:keep-all;
  counter-increment:origin-item;
}

.origin-body li::before {
  content:counter(origin-item,decimal-leading-zero);
  display:block;
  margin-bottom:12px;
  color:var(--ink);
}

.timeline {
  position:relative;
  list-style:none;
  margin:96px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
}

.timeline-line {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:var(--rule);
}

.timeline-line span {
  display:block;
  height:3px;
  margin-top:-1px;
  background:var(--accent);
  transform-origin:left;
}

.timeline li[data-step] {
  padding-top:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#9a9a9a;
}

.timeline li[data-step] h3 {
  font-size:20px;
  font-weight:400;
}

.timeline li.is-now,
.timeline li.is-on {
  color:var(--ink);
}

.anchor-model li.is-current {
  color:var(--ink);
}

/* 04 · member composition */
.composition {
  display:grid;
  gap:32px;
}

.composition-total {
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
}

.composition-total .caption {
  width:100%;
  color:var(--muted);
}

.composition-total>span:last-child {
  font-size:20px;
  font-weight:400;
  padding-bottom:12px;
}

.composition-groups {
  display:grid;
  grid-template-columns:34fr 34fr 34fr;
  gap:32px;
}

.composition-groups article {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:16px;
  border-top:1px solid #444;
}

.composition-groups .stat-num {
  color:var(--ink);
}

.composition-groups h3 {
  font-size:20px;
}

.composition-groups h3 small {
  font-size:var(--small);
  color:var(--muted);
  font-weight:400;
}

.composition-groups p:not(.stat-num) {
  font-size:var(--body);
  word-break:keep-all;
}

.composition-groups .caption {
  color:var(--muted);
}

.values {
  list-style:none;
  margin:96px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.values li {
  min-height:280px;
  padding:24px;
  border:1px solid #333;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:background .3s,color .3s,border-color .3s;
}

.values .caption {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
}

.values h3 {
  font-size:20px;
  line-height:1.15;
}

.values li p:last-child {
  margin-top:0;
  font-size:var(--body);
  color:var(--muted);
  word-break:keep-all;
}

.values:not(.is-stepping) li:first-child,
.values li.is-current {
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}

.values:not(.is-stepping) li:first-child p:last-child,
.values li.is-current p:last-child {
  color:#555;
}

.values:not(.is-stepping) li:first-child .caption,
.values li.is-current .caption {
  color:#5c7a00;
}

/* 04 · appendix roster */
.roster {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px 32px;
}

.roster article {
  border-top:1px solid var(--ink);
  padding-top:12px;
}

.roster .caption {
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
}

.roster .caption b {
  font-weight:400;
  color:var(--ink);
  background:var(--accent);
  padding:0 6px;
}

.roster h3 {
  font-size:20px;
  margin:12px 0 16px;
}

.roster ul {
  list-style:none;
  margin:0;
  padding:0;
}

.roster li {
  padding:9px 0;
  border-bottom:1px solid var(--rule);
  font-size:var(--body);
}

/* closing */
[data-page=company] .story-closing .display {
  max-width:none;
}

@media(max-width:1020px) {
  .capability-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .converge {
    grid-template-columns:1fr;
    gap:32px;
  }
  .converge-core {
    aspect-ratio:auto;
    padding:32px;
  }
  .converge-wire {
    display:none;
  }
  .anchor {
    grid-template-columns:1fr;
    gap:32px;
  }
  .origin-founded {
    grid-template-columns:1fr;
  }
  .origin-body {
    grid-column:1;
    grid-row:auto;
    margin-top:24px;
  }
  .values {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .roster {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px) {
  .capability-grid {
    grid-template-columns:1fr;
  }
  .capability-grid li {
    min-height:0;
  }
  .anchor-model {
    padding:24px;
  }
  .anchor-mark {
    font-size:var(--title);
  }
  .matrix,
  .matrix tbody,
  .matrix tr,
  .matrix th {
    display:block;
  }
  .matrix thead {
    display:none;
  }
  .matrix caption {
    display:block;
  }
  .matrix tbody tr {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:4px;
    padding-bottom:24px;
  }
  .matrix tbody th {
    grid-column:1/-1;
    padding:24px 0 12px;
  }
  .matrix tbody th strong {
    font-size:20px;
  }
  .matrix td {
    display:block;
    padding:0;
  }
  /* Mobile has no header row, so each segment names its cluster. */
  .matrix td::after {
    content:attr(data-label);
    display:block;
    margin-top:6px;
    font-size:var(--small);
    letter-spacing:.02em;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .origin-body ol {
    grid-template-columns:1fr;
    gap:12px;
  }
  .timeline {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:64px;
  }
  .timeline-line {
    display:none;
  }
  .timeline li[data-step] {
    border-top:1px solid var(--rule);
  }
  .timeline li.is-now {
    border-top:3px solid var(--accent);
  }
  .composition-groups {
    grid-template-columns:1fr;
    gap:24px;
  }
  .values {
    grid-template-columns:1fr;
    margin-top:64px;
  }
  .values li {
    min-height:0;
  }
  .roster {
    grid-template-columns:1fr;
    gap:40px;
  }
}

/* Company draft uses the same reading scale and quiet section rhythm as the service guide. */
[data-page=company] main > .story-section { min-height:100svh; padding-block:48px; line-height:1.5; }
[data-page=company] main > .story-section .section-head { width:100%; max-width:none; gap:12px; margin-bottom:24px; }
[data-page=company] main > .story-section h2 { font-size:28px; line-height:1.3; font-weight:400; letter-spacing:-.025em; }
[data-page=company] main > .story-section h3 { font-size:20px; line-height:1.35; font-weight:400; }
[data-page=company] main > .story-section :is(p,.lead,li,blockquote) { line-height:1.5; }
[data-page=company] main > .story-section .section-head .lead { font-size:16px; font-weight:300; margin:0; max-width:72ch; }
[data-page=company] main > .story-section :is(.caption,.source) { font-size:12px; font-weight:300; line-height:1.4; letter-spacing:.045em; color:var(--muted); }
[data-page=company] main > .story-section :is(.statement,.closing-title) { font-size:20px; font-weight:400; line-height:1.4; letter-spacing:-.025em; }
[data-page=company] main > .story-section .statement { margin-top:32px; }


/* Diagrams and data keep their structure, with neutral surfaces and thin rules. */
[data-page=company] .anchor-model { background:#f5f5f5; border-color:var(--rule); }
[data-page=company] .anchor-model li,
[data-page=company] .anchor-output li,
[data-page=company] .composition-groups article { border-color:var(--rule); }
[data-page=company] .roster .caption b { background:transparent; color:var(--muted); padding:0; }
[data-page=company] .values { margin-top:32px; }
[data-page=company] .values li { min-height:180px; border-color:var(--rule); }
[data-page=company] .values li.is-current,
[data-page=company] .values:not(.is-stepping) li:first-child { background:#f5f5f5; border-color:var(--rule); }
[data-page=company] .values li:is(.is-current,:first-child) .caption { color:var(--muted); }
[data-page=company] .capability-grid li:hover { background:#f5f5f5; color:var(--ink); }
[data-page=company] .capability-grid li:hover .caption { color:var(--muted); }
[data-page=company] .matrix td[data-on="1"] i { background:var(--accent); }
[data-page=company] main > .next-page { min-height:0; height:auto; }

/* Company page composition: one restrained reading system across all chapters. */

[data-page=company] #origin { --origin-date-column:clamp(180px,16vw,240px); --origin-column-gap:40px; display:flex; flex-direction:column; }
[data-page=company] #origin .origin-policy { width:auto; max-width:none; align-self:stretch; margin:24px 0 0 calc(var(--origin-date-column) + var(--origin-column-gap)); text-align:left; }
[data-page=company] #origin .origin-policy div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; }
[data-page=company] #origin .timeline { width:100%; margin-top:auto; padding-top:56px; }
[data-page=company] #origin .timeline li[data-step] { min-width:0; }
[data-page=company] #origin .timeline li[data-step] > p:last-child { max-width:38ch; }

[data-page=company] .converge { align-items:stretch; }
[data-page=company] .converge-in,
[data-page=company] .converge-out { display:grid; grid-template-rows:auto 1fr; min-height:100%; }
[data-page=company] .converge-in ol { display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); }
[data-page=company] .converge-out ul { display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); }
[data-page=company] .converge-in li,
[data-page=company] .converge-out li { align-content:center; }
[data-page=company] .converge-in li > span,
[data-page=company] .converge-out .converge-number { font-size:var(--body); color:var(--muted); }
[data-page=company] .converge-out li { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:8px; }
[data-page=company] .converge-out .converge-number { grid-row:1/3; }
[data-page=company] .converge-out li p { grid-column:2; }
[data-page=company] .converge-core { align-self:center; }

[data-page=company] .anchor { align-items:stretch; }
[data-page=company] .anchor-inputs { grid-template-rows:repeat(2,minmax(0,1fr)); }
[data-page=company] .anchor-model,
[data-page=company] .anchor-output { height:100%; }
[data-page=company] .anchor-model li span { font-size:var(--body); padding-top:0; }

[data-page=company] .composition-groups article { justify-content:flex-start; }
[data-page=company] .values li { justify-content:flex-start; }
[data-page=company] main > .story-closing { min-height:100svh; align-items:center; text-align:center; }
[data-page=company] main > .story-closing .closing-title { max-width:950px; margin:0; font-size:clamp(32px,3.6vw,56px); line-height:1.2; text-wrap:balance; }

/* Center the title, supporting copy, and body as one reading group. */
[data-page=company] main > .story-section:not(#members):not(.story-closing) {
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding-block:clamp(48px,7svh,88px);
}
[data-page=company] main > .story-section:not(#members):not(.story-closing) .section-head {
 margin-bottom:clamp(24px,4svh,40px);
}
[data-page=company] #origin .timeline { margin-top:clamp(40px,6svh,72px); }
[data-page=company] #members .composition-roster {
 margin-top:clamp(64px,9svh,112px);
 padding-top:clamp(32px,5svh,64px);
 border-top:1px solid var(--rule);
}
[data-page=company] #members .composition-roster .section-head { margin-bottom:32px; }

@media(max-width:760px) {
 [data-page=company] main > .story-section { padding-block:32px; }
 [data-page=company] main > .story-section h2 { font-size:24px; }
 [data-page=company] #origin .timeline { margin-top:32px; padding-top:0; }
 [data-page=company] #origin .origin-policy { margin-left:0; }
 [data-page=company] .converge-in,
 [data-page=company] .converge-out { min-height:0; }
 [data-page=company] .converge-in ol,
 [data-page=company] .converge-out ul { grid-template-rows:auto; }
 [data-page=company] .anchor-model,
 [data-page=company] .anchor-output { height:auto; }
 [data-page=company] main > .story-section:not(#members):not(.story-closing) { padding-block:clamp(32px,5svh,48px); }
}