/* T&T preserves the supplied sample's light surface, central comparison, outline
   lettering, four Latin typefaces and animated gecko. Orange follows the user's page-specific direction; Korean type uses Sadari.
   The italic variant is restricted to the English word Transforming.
   Refinement: keep the original comparison and all motion; improve Korean
   reading size and spacing. Year badges use one row or three complete rows. */
@font-face { font-family: 'About Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/about2/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'About Playfair'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/about2/playfair-display-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'About Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/about2/space-mono-latin.woff2') format('woff2'); }
@font-face { font-family: 'About Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/about2/caveat-latin.woff2') format('woff2'); }
.about2-values {
    --about-tt-ink: #171717;
    --about-tt-surface: #fafafa;
    --about-tt-soft: #f4a582;
    --about-tt-dark: #c8451b;
    --about-tt-word-size: clamp(40px, 4.45vw, 64px);
    color: var(--about-tt-ink); background: var(--about-tt-surface);
    border-block: 1px solid var(--color-rule); overflow-x: clip;
}
.about2-values > .about2-wrap { max-width: 1400px; }
.about2-values-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.about2-values-intro .about2-lead { color: var(--color-on-surface-muted); }
.about2-values-stage { position: relative; isolation: isolate; margin-top: 80px; }
.about2-values-grid { display: grid; grid-template-columns: minmax(0,1fr) 128px minmax(0,1fr); grid-template-rows: auto auto auto auto; }
.about2-principle, .about2-values-axis { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 4; min-width: 0; }
.about2-transparent { grid-column: 1; text-align: right; }
.about2-values-axis { grid-column: 2; }
.about2-transforming { grid-column: 3; text-align: left; }
.about2-principle-heading { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.about2-transparent .about2-principle-heading { align-items: flex-end; }
.about2-transforming .about2-principle-heading { align-items: flex-start; }
.about2-principle-heading p { font-size: 18px; color: var(--color-on-surface-muted); }
.about2-principle-heading h3 { font-size: var(--about-tt-word-size); line-height: 1.15; height: calc(var(--about-tt-word-size) * 1.2); white-space: nowrap; }
.about2-principle-heading h3, .about2-principle-heading h3 span { letter-spacing: -.03em; }
.about2-transparent-word { font-family: 'About Space Grotesk', sans-serif; font-weight: 600 !important; -webkit-text-stroke: 1.5px var(--about-tt-ink); }
.about2-transparent-word > span { color: rgba(23,23,23,var(--about-clear-alpha,1)); }
.about2-transparent-word > span:first-child { color: color-mix(in srgb, var(--about-primary) calc(var(--about-clear-alpha,1) * 100%), transparent); -webkit-text-stroke-color: var(--about-primary); }
.about2-transforming-word { display: flex; align-items: flex-start; inline-size: var(--about-morph-width, auto); max-inline-size: 100%; transform: translateY(-3px); }
.about2-morph-letter {
    --about-morph-scale: var(--about-morph-scale-0, 1);
    --about-morph-y: var(--about-morph-y-0, calc(var(--about-tt-word-size) * .125));
    --about-morph-x: var(--about-morph-x-0, 0px);
    display: block; flex: none; line-height: 1;
    font-family: 'About Space Grotesk', sans-serif; font-weight: 500;
    font-size: calc(var(--about-tt-word-size) * var(--about-morph-scale));
    transform: translateY(var(--about-morph-y));
}
.about2-morph-letter:first-child { color: var(--about-primary); margin-inline-start: var(--about-morph-x); }
.about2-morph-letter[data-font="1"] {
    --about-morph-scale: var(--about-morph-scale-1, 1); --about-morph-y: var(--about-morph-y-1, 0px); --about-morph-x: var(--about-morph-x-1, 0px);
    font-family: 'About Playfair', serif; font-style: italic; font-weight: 500;
}
.about2-morph-letter[data-font="2"] {
    --about-morph-scale: var(--about-morph-scale-2, 1); --about-morph-y: var(--about-morph-y-2, 0px); --about-morph-x: var(--about-morph-x-2, 0px);
    font-family: 'About Space Mono', monospace; font-weight: 400;
}
.about2-morph-letter[data-font="3"] {
    --about-morph-scale: var(--about-morph-scale-3, 1); --about-morph-y: var(--about-morph-y-3, 0px); --about-morph-x: var(--about-morph-x-3, 0px);
    font-family: 'About Caveat', cursive; font-weight: 600;
}
.about2-principle dl, .about2-principle dl > div { display: contents; }
.about2-principle dt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.about2-principle dd { padding-block: 24px; font-size: 18px; line-height: 1.75; text-wrap: balance; }
.about2-principle .about2-principle-definition { font-size: 26px; font-weight: 500; line-height: 1.5; }
.about2-values-axis > span { position: relative; display: flex; align-items: flex-start; justify-content: center; padding: 28px 8px 24px; font-size: 16px; line-height: 1.5; white-space: nowrap; color: var(--color-on-surface-muted); }
.about2-values-axis > span::after { content: ''; position: absolute; top: 68px; bottom: 8px; left: 50%; width: 1px; background: var(--color-rule); }
.about2-values-axis .about2-values-ampersand::after { top: calc(var(--about-tt-word-size) + 24px); }
.about2-values-axis > span:nth-child(2) { padding-top: 32px; color: var(--about-tt-dark); }
.about2-values-axis .about2-values-ampersand { padding: 0 0 32px; font-family: 'About Space Grotesk', sans-serif; font-size: var(--about-tt-word-size); font-weight: 300; line-height: 1; color: var(--about-primary); }
.about2-evolution-wrap { container: about2-evolution / inline-size; font-size: 14px; }
.about2-values .about2-evolution { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; font-size: 14px; gap: 8px; margin-top: 12px !important; }
.about2-values .about2-evolution li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-left: 28px; }
.about2-values .about2-evolution li::before {
    content: ''; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px;
    margin-right: 0; border-radius: 50%; background: var(--about-primary); transform: translateY(-50%);
}
.about2-values .about2-evolution li:not(:last-child)::after {
    content: ''; position: absolute; left: 6px; top: calc(50% + 2.5px);
    width: 1px; height: calc(100% + 3px);
    background: color-mix(in srgb, var(--about-primary) 35%, transparent);
}
.about2-values .about2-evolution span { margin-right: 0; color: inherit; font-family: inherit; }
.about2-values .about2-evolution .about2-evolution-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 1px solid rgb(232 100 44 / .18); border-radius: 4px; background: #fff3ed; color: #ad4519; white-space: nowrap; }
.about2-values .about2-evolution .about2-evolution-year { font-family: 'About Space Grotesk', sans-serif; font-weight: 600; }
/* Include both 16px arrows before allowing a complete horizontal row. */
@container about2-evolution (min-width: 28em) {
    .about2-values .about2-evolution { flex-direction: row; align-items: center; }
    .about2-values .about2-evolution li { padding-left: 0; }
    .about2-values .about2-evolution li::before, .about2-values .about2-evolution li::after { display: none; }
    .about2-values .about2-evolution li + li::before {
        display: block; position: static; flex: none; width: 16px; height: 16px; border-radius: 0; transform: none;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}
.about2-gecko-field { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.about2-values.is-enhanced .about2-gecko-field { display: block; }
.about2-motion-trigger { position: absolute; left: 50%; top: 55%; width: 1px; height: 1px; visibility: hidden; }
.about2-gecko-shed { position: absolute; left: 50%; top: 55%; width: 120px; height: 120px; margin-left: -60px; margin-top: -60px; z-index: -1; pointer-events: none; }
.about2-gecko { position: absolute; left: 50%; top: 55%; width: 104px; height: 108px; margin-left: -52px; margin-top: -54px; z-index: -1; pointer-events: none; }
.about2-gecko svg, .about2-gecko-shed svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Tablet: compare each pair in one row, with a separate space for the gecko. */
@media (max-width: 1200px) {
    .about2-values { --about-tt-word-size: clamp(34px, 3.5vw, 42px); }
    .about2-values-intro { gap: 24px; }
    .about2-values-stage { max-width: 880px; margin: 40px auto 0; }
    .about2-gecko-field { position: relative; inset: auto; width: calc(100% - 104px); height: 112px; margin: 0 52px 32px; z-index: 0; }
    .about2-gecko { width: 84px; height: 88px; margin-left: -42px; margin-top: -44px; }
    .about2-gecko-shed { width: 96px; height: 96px; margin-left: -48px; margin-top: -48px; }
    .about2-values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(7,auto); column-gap: 32px; }
    .about2-values-axis { display: none; }
    .about2-principle { display: contents; text-align: left; }
    .about2-transparent { --principle-label: '투명'; }
    .about2-transforming { --principle-label: '변화'; }
    .about2-principle-heading, .about2-transparent .about2-principle-heading { align-items: flex-start; grid-row: 1; padding-bottom: 0; }
    .about2-transparent :is(.about2-principle-heading,dd) { grid-column: 1; }
    .about2-transforming :is(.about2-principle-heading,dd) { grid-column: 2; }
    .about2-transparent dt { position: static; grid-column: 1 / -1; width: auto; height: auto; padding-top: 20px; margin: 28px 0 16px; border-top: 1px solid var(--color-rule); overflow: visible; clip-path: none; white-space: normal; color: var(--about-tt-dark); font-size: 16px; line-height: 1.75; }
    .about2-principle dl > div:nth-child(1) dt { grid-row: 2; }
    .about2-principle dl > div:nth-child(1) dd { grid-row: 3; }
    .about2-principle dl > div:nth-child(2) dt { grid-row: 4; }
    .about2-principle dl > div:nth-child(2) dd { grid-row: 5; }
    .about2-principle dl > div:nth-child(3) dt { grid-row: 6; }
    .about2-principle dl > div:nth-child(3) dd { grid-row: 7; }
    .about2-principle dd { padding: 0; font-size: 17px; }
    .about2-principle dd br { display: none; }
    .about2-principle .about2-principle-definition { font-size: 22px; }
}
/* Phone: read each complete principle before moving to the next one. */
@media (max-width: 600px) {
    .about2-values { --about-tt-word-size: clamp(28px, 8.2vw, 42px); }
    /* Keep the opening space while the gecko travels through the full mobile section. */
    .about2-values.is-enhanced .about2-values-stage { padding-top: 144px; }
    .about2-gecko-field { position: absolute; inset: 0; width: 100%; height: auto; margin: 0; z-index: -1; }
    .about2-motion-trigger { top: 72px; }
    .about2-values-intro h2 br { display: none; }
    .about2-values-grid, .about2-principle, .about2-principle dl, .about2-principle dl > div { display: block; }
    .about2-transforming { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--color-rule); }
    .about2-principle .about2-principle-heading { flex-direction: row; align-items: center; gap: 12px; margin: 0; }
    .about2-principle-heading h3 { flex: none; }
    .about2-principle-heading p { flex: none; font-size: 14px; line-height: 1.6; white-space: nowrap; }
    /* Thin edges and refracted highlights follow the existing transparency cycle. */
    .about2-transparent-word { -webkit-text-stroke-width: .55px; }
    .about2-transparent-word > span {
        color: rgb(23 23 23 / var(--about-clear-alpha, 1));
        -webkit-text-stroke-color: rgb(102 125 140 / calc(.45 + var(--about-clear-alpha, 1) * .25));
        background: linear-gradient(135deg,
            rgb(174 196 210 / .1), rgb(255 255 255 / .95) 23%,
            rgb(216 231 240 / .25) 41%, #fff 46%,
            rgb(136 164 182 / .18) 49%, rgb(255 255 255 / .9) 51%,
            rgb(233 243 249 / .12) 78%, rgb(173 198 213 / .22));
        background-clip: text; -webkit-background-clip: text;
    }
    .about2-transparent-word > span:first-child {
        color: color-mix(in srgb, var(--about-primary) calc(var(--about-clear-alpha, 1) * 100%), transparent);
        -webkit-text-stroke-color: rgb(232 100 44 / calc(.45 + var(--about-clear-alpha, 1) * .25));
        background-image: linear-gradient(135deg, rgb(232 100 44 / .1), rgb(255 255 255 / .95) 30%, rgb(244 198 178 / .2) 45%, #fff 49%, rgb(232 100 44 / .16) 53%, rgb(255 243 237 / .12) 78%, rgb(241 188 165 / .2));
    }
    .about2-principle dl > div { margin-top: 24px; }
    .about2-principle dt { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; border: 0; white-space: normal; color: var(--about-tt-dark); font-size: 14px; line-height: 1.5; }
    .about2-principle dd { display: block; margin: 0; font-size: 16px; }
    .about2-principle .about2-principle-definition { font-size: 20px; }
}