/* Sadari About, extracted system v1. 강도: 보존.
   Token roles: primary → selected person / contact; surface → people / history;
   surface-2 → production process; inverse → T&T; rule-strong → 4px rules;
   h1/h2/h3 → heading hierarchy; body-lg/md/sm → introduction / body / notes.
   Source copy is preserved at the user's request, including labels and metaphors.
   Existing theme header/footer styles and interactions remain in use. */
:root:is(.page_about, .page_about2) { --ls-ko: 0; word-break: keep-all; }
.about2 {
    --about-primary: var(--primary-color, var(--color-primary));
    --about-title-size: clamp(26px, 2.78vw, 40px);
    --about-section-title-size: clamp(26px, 2.5vw, 36px);
    color: var(--color-on-surface);
    background: var(--color-surface);
    font-family: var(--font-ko, var(--typography-body-md-font-family));
    font-size: var(--typography-body-md-font-size);
    line-height: var(--typography-body-md-line-height);
    letter-spacing: normal;
    overflow-wrap: break-word;
}
.about2 *, .about2 *::before, .about2 *::after { box-sizing: border-box; letter-spacing: normal; font-style: normal; }
.about2 :where(h1,h2,h3,p,ul,ol,dl,dd) { margin: 0; padding: 0; }
.about2 :where(h1,h2,h3) { text-wrap: balance; }
.about2 :where(strong,b) { font-weight: 700; }
.about2 :where(a,button,[tabindex]):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.about2 :where(a,button) { touch-action: manipulation; }
.about2 [hidden] { display: none !important; }
.about2-wrap { width: 100%; max-width: calc(var(--about-width) + var(--about-gutter) * 2); margin-inline: auto; padding-inline: var(--about-gutter); }
.about2-wrap > *, .about2-section-head > * { min-width: 0; }
.about2-section { padding-block: var(--about-section-space); scroll-margin-top: var(--header-height); }
.about2 h1 { font-size: var(--about-title-size); font-weight: var(--typography-h1-font-weight); line-height: var(--typography-h1-line-height); }
.about2 h2 { font-size: var(--about-section-title-size); font-weight: var(--typography-h2-font-weight); line-height: var(--typography-h2-line-height); }
.about2 h3 { font-size: var(--about-heading-small-size); font-weight: var(--typography-h3-font-weight); line-height: var(--typography-h3-line-height); }
.about2 .about2-lead { color: var(--color-on-surface-muted); font-size: var(--typography-body-lg-font-size); line-height: var(--typography-body-lg-line-height); }
.about2-section-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: var(--spacing-2xl); align-items: end; margin-bottom: var(--spacing-xl); }

/* The core names share one circle, with the original partner names outside it. */
.about2-people { padding-top: var(--spacing-2xl); }
.about2-people-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); grid-template-rows: auto 1fr; gap: var(--spacing-lg) var(--spacing-2xl); align-items: start; }
.about2-intro { grid-column: 2; grid-row: 1; }
.about2-intro > .about2-lead { margin-top: var(--spacing-md); }
.about2-constellation { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.about2-orbit-caption { text-align: center; color: var(--color-on-surface-muted); font-size: var(--typography-body-sm-font-size); margin-bottom: var(--spacing-sm); }
.about2-orbit { position: relative; width: 100%; max-width: 680px; aspect-ratio: 1; margin-inline: auto; }
.about2-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--color-rule); stroke-width: 1; }
.about2-orbit-lines .about2-outer-ring { stroke-dasharray: 2 6; }
.about2-partners li, .about2-member { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%); }
.about2-partners li { color: var(--color-rule-strong); font-size: var(--typography-body-sm-font-size); white-space: nowrap; }
.about2-partners span { padding: var(--spacing-xs); background: var(--color-surface); }
.about2-member { display: grid; place-items: center; width: var(--about-circle-size); aspect-ratio: 1; border: 1px solid var(--color-rule); border-radius: var(--rounded-full); background: var(--color-surface); font-size: var(--typography-body-lg-font-size); font-weight: 500; text-decoration: none; cursor: pointer; }
.about2-member[aria-selected="true"] { border-color: var(--about-primary); background: var(--about-primary); color: var(--color-on-primary); }
.about2-member-static { border-color: transparent; background: var(--color-surface-2); color: var(--color-on-surface-muted); cursor: default; }
.about2-orbit-center { position: absolute; inset: 34% 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--typography-body-lg-font-size); line-height: 1.6; }
.about2-orbit-center strong { color: var(--about-primary); }
.about2-orbit-center svg { flex-shrink: 0; margin-top: var(--spacing-xs); }
.about2-profiles { grid-column: 2; grid-row: 2; min-width: 0; }
.about2-profile { border-top: var(--about-rule-width) solid var(--color-rule-strong); padding-top: var(--spacing-md); scroll-margin-top: calc(var(--header-height) + var(--spacing-md)); }
.about2-profile + .about2-profile { margin-top: var(--spacing-lg); }
.about2-enhanced .about2-profile { margin-top: 0; }
.about2-profile-head h2 { color: var(--about-primary); font-size: var(--typography-h3-font-size); font-weight: 700; }
.about2-profile-head h3 { margin-top: var(--spacing-xs); font-size: var(--typography-body-lg-font-size); font-weight: 500; }
.about2-story { margin-top: var(--spacing-md) !important; color: var(--color-on-surface-muted); }
.about2-person-note { margin-top: var(--spacing-sm) !important; }
.about2-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-top: var(--spacing-md) !important; }
.about2-tags li { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 10px; border: 1px solid rgb(232 100 44 / .18); border-radius: 4px; background: #fff3ed; color: #ad4519; font-size: var(--typography-body-sm-font-size); line-height: 1.6; }

/* Production is an ordered sequence, not six floating cards. */
.about2-work { background: var(--color-surface-2); }
.about2-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-top: var(--about-rule-width) solid var(--color-rule-strong); }
.about2-steps li { padding: var(--spacing-md); background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / .65) 40%, rgb(255 255 255 / 0) 100%); }
.about2-steps li + li { border-left: 1px solid var(--color-rule); }
.about2-step-number { display: block; margin-bottom: var(--spacing-md); font-family: var(--font-en); font-size: var(--typography-h2-font-size); color: var(--about-primary); line-height: 1.2; font-variant-numeric: tabular-nums; }
.about2-steps h3 { font-size: var(--typography-body-lg-font-size); }
.about2-steps p { margin-top: var(--spacing-sm); color: var(--color-on-surface-muted); }

/* T&T uses the same dark surface as AX, with paired rows. */
.about2-values { color: var(--color-on-inverse); background: var(--color-inverse); }
.about2-values .about2-lead { color: var(--color-on-inverse-muted); }
.about2-values-table { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--spacing-2xl); border-top: var(--about-rule-width) solid var(--color-on-inverse); }
.about2-value { min-width: 0; }
.about2-value-heading { padding-block: var(--spacing-lg); border-bottom: 1px solid var(--color-inverse-rule); }
.about2-value-heading h3 { font-family: var(--font-en); font-size: var(--about-title-size); font-weight: 500; line-height: 1.2; }
.about2-value-heading p { margin-top: var(--spacing-xs); font-size: var(--typography-body-lg-font-size); color: var(--color-on-inverse-muted); }
.about2-value dl > div { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: baseline; gap: var(--spacing-sm); padding-block: var(--spacing-lg); border-bottom: 1px solid var(--color-inverse-rule); }
.about2-value dl > div:nth-child(2) { min-height: 156px; }
.about2-value dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.about2-value dt { font-size: var(--typography-body-sm-font-size); color: var(--color-on-inverse-muted); }
.about2-definition, .about2-promise { font-size: var(--typography-body-lg-font-size); }
.about2-evolution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm) !important; font-size: var(--typography-body-sm-font-size); }
.about2-evolution li + li::before { content: '→'; margin-right: var(--spacing-sm); color: var(--color-on-inverse-muted); }
.about2-evolution span { margin-right: var(--spacing-xs); color: var(--color-on-inverse-muted); font-family: var(--font-en); }

/* Facts and dated milestones retain the source values. */
.about2-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-block: var(--spacing-xl) var(--spacing-2xl) !important; }
.about2-stats > div { display: flex; flex-direction: column; gap: var(--spacing-xs); padding-left: var(--spacing-lg); border-left: 1px solid var(--color-rule); }
.about2-stats > div:first-child { padding-left: 0; border-left: 0; }
.about2-stats dt { order: 2; color: var(--color-on-surface-muted); }
.about2-stats dd { display: flex; align-items: baseline; gap: var(--spacing-xs); }
.about2-stats strong { font-family: var(--font-en); font-size: var(--about-figure-size); font-weight: var(--typography-figure-latin-font-weight); line-height: var(--typography-figure-latin-line-height); font-variant-numeric: tabular-nums; }
.about2-stats dd > span { color: var(--about-primary); font-size: var(--typography-h3-font-size); }
.about2-history { border-top: var(--about-rule-width) solid var(--color-rule-strong); }
.about2-history li { display: grid; grid-template-columns: minmax(160px,1fr) minmax(0,2fr); align-items: baseline; gap: var(--spacing-lg); padding-block: var(--spacing-md); border-bottom: 1px solid var(--color-rule); }
.about2-year { font-family: var(--font-en); font-size: var(--typography-h3-font-size); font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
.about2-history p { font-size: var(--typography-body-lg-font-size); }
.about2-history-current { color: var(--about-primary); font-weight: 500; }

@media (min-width: 1800px) {
    .about2-people-layout { column-gap: var(--spacing-section); }
}
/* Stack People before the diagram and biography become cramped. */
@media (max-width: 1200px) {
    .about2-people-layout { grid-template-columns: minmax(0,1fr); gap: var(--spacing-md); }
    .about2-constellation { grid-column: 1; grid-row: 1; }
    .about2-intro { grid-column: 1; grid-row: 2; width: 100%; max-width: 640px; margin-inline: auto; }
    .about2-profiles { grid-column: 1; grid-row: 3; }
    .about2-intro h1 br:first-child { display: none; }
    .about2-orbit { max-width: 480px; --about-circle-size: 64px; }
    .about2-orbit-center { font-size: var(--typography-body-lg-font-size); }
    .about2-profile { max-width: 640px; margin-inline: auto; }
}
@media (max-width: 1100px) {
    .about2-people-layout { column-gap: var(--spacing-lg); }
    .about2-section-head { gap: var(--spacing-lg); }
    .about2-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .about2-steps li:nth-child(4) { border-left: 0; }
    .about2-steps li:nth-child(n+4) { border-top: 1px solid var(--color-rule); }
    .about2-orbit-center { font-size: var(--typography-body-md-font-size); }
    .about2-values-table { gap: var(--spacing-lg); }
    .about2-value dl > div { grid-template-columns: minmax(0,1fr); gap: var(--spacing-sm); }
    .about2-value dl > div:nth-child(2) { min-height: 200px; }
}
@media (max-width: 800px) {
    .about2-section-head { grid-template-columns: minmax(0,1fr); gap: var(--spacing-md); }
    .about2-desktop-break { display: none; }
    .about2-value-heading h3 { font-size: var(--typography-h3-font-size); }
    .about2-evolution { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); }
    .about2-evolution li + li::before { content: none; }
    .about2-history li { grid-template-columns: 130px minmax(0,1fr); gap: var(--spacing-md); }
}
@media (max-width: 600px) {
    .about2-values-table { grid-template-columns: minmax(0,1fr); gap: var(--spacing-xl); }
    .about2-value + .about2-value { border-top: var(--about-rule-width) solid var(--color-on-inverse); }
    .about2-value dl > div { grid-template-columns: 80px minmax(0,1fr); gap: var(--spacing-md); padding-block: var(--spacing-md); }
    .about2-value dl > div:nth-child(2) { min-height: 0; }
    .about2-value-heading { padding-block: var(--spacing-md); }
}
@media (max-width: 480px) {
    .about2-people { padding-top: var(--spacing-xl); }
    .about2 .about2-lead { font-size: var(--typography-body-md-font-size); }
    .about2-intro h1 br:first-child { display: initial; }
    .about2-intro > .about2-lead br { display: none; }
    .about2-constellation { margin-inline: calc(-1 * var(--spacing-xs)); }
    .about2-orbit { --about-circle-size: 48px; }
    .about2-member { font-size: var(--typography-body-sm-font-size); }
    .about2-orbit-center { inset: 33% 31%; font-size: var(--typography-body-sm-font-size); }
    .about2-orbit-caption { font-size: var(--typography-body-sm-font-size); }
    .about2-partners span { padding: 4px; }
    .about2-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .about2-steps li { padding: var(--spacing-md) var(--spacing-sm); }
    .about2-steps li:nth-child(odd) { border-left: 0; }
    .about2-steps li:nth-child(even) { border-left: 1px solid var(--color-rule); }
    .about2-steps li:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
    .about2-step-number { margin-bottom: var(--spacing-sm); }
    .about2-definition, .about2-promise { font-size: var(--typography-body-md-font-size); }
    .about2-values-table br { display: none; }
    .about2-stats { grid-template-columns: minmax(0,1fr); margin-block: var(--spacing-lg) var(--spacing-xl) !important; }
    .about2-stats > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) 0; border-left: 0; border-bottom: 1px solid var(--color-rule); }
    .about2-stats dd { gap: var(--spacing-xs); }
    .about2-stats dd > span { font-size: var(--typography-body-lg-font-size); }
    .about2-history li { grid-template-columns: minmax(0,1fr); gap: var(--spacing-xs); }
    .about2-history p { font-size: var(--typography-body-md-font-size); }
}