/* Wonkang Metal / Company overview
   Derived from ../Design.md + ../css/main.css.
   Existing header, GNB, Footer, brand assets remain owned by main.css.
   New layout decisions serve the information-rich company subpage. */
.about-page { --about-gutter: clamp(20px, 4.453125vw, 86px); }
.about-page .about-shell { width:min(100% - var(--about-gutter) - var(--about-gutter), 1520px); margin-inline:auto; }
.about-page main { background:var(--surface-default); }
.about-page main section { /* html already supplies header scroll-padding-top */ scroll-margin-top:79px; }
.about-page .about-section { position:relative; }
.about-page .about-kicker { display:inline-flex; align-items:center; gap:14px; color:var(--primary-default); font-size:15px; font-weight:700; letter-spacing:.11em; }
.about-page .about-kicker::before { content:''; display:block; width:28px; height:2px; background:currentColor; }
.about-page .about-section h2 { font-size:clamp(36px,3.3333vw,64px); line-height:1.28; font-weight:700; letter-spacing:-.045em; word-break:keep-all; }
.about-page .about-section p { word-break:keep-all; }
.about-page .about-text-link { display:inline-flex; align-items:center; gap:24px; min-height:48px; padding-block:10px; border-bottom:1px solid currentColor; color:var(--text-primary); font-size:16px; font-weight:700; transition:gap .22s ease,color .22s ease; }
.about-page .about-text-link:hover,.about-page .about-text-link:focus-visible { color:var(--primary-default); gap:34px; }

/* Cover: dark overlay, full-width industrial photography and strong type from the main hero. */
.about-page .about-hero { position:relative; isolation:isolate; min-height:clamp(580px,74svh,820px); display:flex; align-items:flex-end; overflow:hidden; background:var(--brand-neutral-950); color:var(--text-inverse); }
.about-page .about-hero__image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 49%; }
.about-page .about-hero::before { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,#10161fdd 0%,#10161f91 46%,#10161f48 100%),linear-gradient(0deg,#0009,transparent 46%); }
.about-page .about-hero__content { padding-top:calc(var(--header-height) + 118px); padding-bottom:132px; }
.about-page .about-hero__eyebrow { font-size:15px; font-weight:700; letter-spacing:.18em; }
.about-page .about-hero h1 { margin-top:26px; font-size:clamp(50px,5.0vw,96px); line-height:1.25; font-weight:700; letter-spacing:-.05em; word-break:keep-all; }
.about-page .about-hero__description { margin-top:28px; font-size:clamp(16px,1.15vw,20px); line-height:1.75; font-weight:500; color:#fff; }
.about-page .about-hero__line { position:absolute; left:0; right:0; bottom:0; min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-inline:var(--about-gutter); border-top:1px solid #ffffff80; color:#fff; font-size:12px; font-weight:700; letter-spacing:.12em; }

/* Breadcrumb is a location aid, the sticky section list is a separate sub-navigation. */
.about-page .about-navigation { background:var(--surface-default); border-bottom:1px solid var(--border-default); }
.about-page .about-breadcrumb { width:min(100% - var(--about-gutter) - var(--about-gutter),1520px); margin-inline:auto; }
.about-page .about-breadcrumb ol { display:flex; align-items:center; flex-wrap:wrap; gap:13px; min-height:67px; color:var(--text-muted); font-size:13px; font-weight:500; }
.about-page .about-breadcrumb li { display:flex; align-items:center; gap:13px; }
.about-page .about-breadcrumb li + li::before { content:'/'; color:var(--text-muted); }
.about-page .about-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; }
.about-page .about-breadcrumb a:hover,.about-page .about-breadcrumb a:focus-visible { color:var(--primary-default); }
.about-page .about-breadcrumb [aria-current='page'] { color:var(--text-primary); font-weight:700; }
.about-page .about-section-nav { position:sticky; top:var(--header-height); z-index:80; border-bottom:1px solid var(--border-default); background:#fff; box-shadow:0 7px 18px #00000008; transition:top .24s ease; }
.about-page .site-header.is-hidden ~ main .about-section-nav { top:0; }
.about-page .about-section-nav__inner { display:flex; align-items:center; gap:clamp(15px,2.4vw,48px); min-height:67px; overflow-x:auto; scrollbar-width:thin; }
.about-page .about-section-nav a { display:inline-flex; align-items:center; min-height:65px; flex:none; border-bottom:2px solid transparent; color:var(--text-muted); font-size:15px; font-weight:600; white-space:nowrap; transition:color .2s ease,border-color .2s ease; }
/* 빨간 하단선은 활성 섹션 하나에만 표시합니다. hover/focus는 선택 상태가 아닙니다. */
.about-page .about-section-nav a:hover { color:var(--primary-default); }
.about-page .about-section-nav a:focus-visible { outline:2px solid var(--primary-default); outline-offset:-5px; }
.about-page .about-section-nav a[aria-current='location'] { border-bottom-color:var(--primary-default); color:var(--text-primary); }

/* Company overview: editorial type with evidence first, no invented headline KPI values. */
.about-page .about-overview { padding-block:clamp(100px,10vw,185px) clamp(95px,9.2vw,165px); }
.about-page .about-section__head h2 { margin-top:25px; }
.about-page .about-overview__body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:start; gap:clamp(50px,7vw,135px); margin-top:72px; }
.about-page .about-overview__lead { color:var(--text-primary); font-size:clamp(22px,1.72vw,32px); font-weight:500; line-height:1.65; }
.about-page .about-overview__copy > p:not(.about-overview__lead) { max-width:660px; margin-top:28px; color:var(--text-muted); font-size:17px; line-height:1.95; }
.about-page .about-overview__details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:72px; }
.about-page .about-overview__details > div { min-width:0; padding-top:16px; border-top:2px solid var(--brand-neutral-200); }
.about-page .about-overview__details span { display:block; color:var(--primary-default); font-size:11px; font-weight:700; letter-spacing:.09em; }
.about-page .about-overview__details strong { display:block; margin-top:13px; color:var(--text-primary); font-size:clamp(19px,1.6vw,31px); letter-spacing:-.045em; font-weight:700; overflow-wrap:anywhere; }
.about-page .about-overview__details small { display:block; margin-top:9px; color:var(--text-muted); font-size:13px; line-height:1.6; }
.about-page .about-overview__image { min-width:0; margin:0; }
.about-page .about-overview__image img { display:block; width:100%; aspect-ratio:1.09; object-fit:cover; }
.about-page .about-overview__image figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--border-default); margin-top:14px; color:var(--text-muted); font-size:12px; letter-spacing:.04em; }

/* Process: alternating image/text, reflecting the product and process sections of the main page. */
.about-page .about-process { padding-block:clamp(100px,9.3vw,175px); background:var(--background-default); }
.about-page .about-process__heading h2 { margin-top:26px; }
.about-page .about-process__heading > p { max-width:730px; margin-top:28px; color:var(--text-muted); font-size:18px; line-height:1.8; }
.about-page .about-process__list { display:grid; gap:clamp(70px,8vw,150px); margin-top:85px; }
.about-page .about-process__item { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(38px,6vw,116px); }
.about-page .about-process__item--reverse { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.about-page .about-process__item--reverse .about-process__media { order:2; }
.about-page .about-process__media { min-width:0; overflow:hidden; background:var(--brand-neutral-200); }
.about-page .about-process__media img { display:block; width:100%; aspect-ratio:1.4; object-fit:cover; }
.about-page .about-process__content { min-width:0; }
.about-page .about-process__top { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--border-default); }
.about-page .about-process__number { color:var(--primary-default); font-size:18px; font-weight:700; }
.about-page .about-process__keyword { color:var(--text-muted); font-size:12px; font-weight:700; letter-spacing:.11em; }
.about-page .about-process__content h3 { margin-top:34px; color:var(--text-primary); font-size:clamp(28px,2.55vw,48px); font-weight:700; letter-spacing:-.045em; line-height:1.33; word-break:keep-all; }
.about-page .about-process__content p { max-width:520px; margin-top:30px; color:var(--text-muted); font-size:17px; line-height:1.85; }
.about-page .about-process__note { display:inline-flex; margin-top:30px; padding:9px 15px; background:var(--brand-neutral-200); color:var(--text-primary); font-size:12px; font-weight:700; }
.about-page .about-process > .about-shell > .about-text-link { margin-top:80px; }

/* Actual certificate imagery + already featured partner logos. No claims of current validity. */
.about-page .about-proof { padding-block:clamp(100px,9vw,175px); background:var(--surface-default); }
.about-page .about-proof__heading { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.about-page .about-proof__heading h2 { margin-top:24px; }
.about-page .about-proof__heading > p { max-width:365px; padding-bottom:7px; color:var(--text-muted); font-size:17px; line-height:1.85; }
.about-page .about-proof__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:75px; }
.about-page .about-proof__cert,.about-page .about-proof__partners { display:flex; flex-direction:column; min-width:0; padding:38px 35px 44px; background:var(--background-default); }
.about-page .about-proof__label { display:flex; justify-content:space-between; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--border-default); color:var(--primary-default); font-size:12px; font-weight:700; letter-spacing:.08em; }
.about-page .about-proof__grid h3 { margin-top:33px; color:var(--text-primary); font-size:clamp(25px,2vw,38px); font-weight:700; }
.about-page .about-proof__grid article > p { max-width:520px; margin-top:14px; color:var(--text-muted); font-size:16px; line-height:1.85; }
.about-page .about-proof__certificates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:34px 0; }
.about-page .about-proof__certificates figure { min-width:0; padding:8px; border:1px solid var(--border-default); background:var(--surface-default); }
.about-page .about-proof__certificates img { width:100%; height:160px; display:block; object-fit:contain; }
.about-page .about-proof__certificates figcaption { padding-block:11px 2px; text-align:center; color:var(--text-muted); font-size:12px; font-weight:700; }
.about-page .about-proof__logos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:34px 0; }
.about-page .about-proof__logos li { display:grid; place-items:center; min-height:115px; min-width:0; padding:18px; border:1px solid var(--border-default); background:var(--surface-default); }
.about-page .about-proof__logos img { display:block; width:100%; max-width:165px; max-height:74px; object-fit:contain; }
.about-page .about-proof__grid .about-text-link { margin-top:auto; align-self:flex-start; }

/* Authentic four values sourced from corporate public copy; compact, not a second hero. */
.about-page .about-belief { padding-block:clamp(105px,9.4vw,180px); background:var(--brand-neutral-950); color:var(--text-inverse); }
.about-page .about-belief__layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(50px,7vw,130px); }
.about-page .about-belief .about-kicker { color:#ff7181; }
.about-page .about-belief h2 { margin-top:25px; color:var(--text-inverse); }
.about-page .about-belief__intro > p { max-width:410px; margin-top:30px; color:#ffffffb3; font-size:17px; line-height:1.85; }
.about-page .about-belief__item { display:grid; grid-template-columns:64px minmax(0,1fr); gap:26px; padding:27px 0 30px; border-top:1px solid #ffffff45; }
.about-page .about-belief__item:last-child { border-bottom:1px solid #ffffff45; }
.about-page .about-belief__index { color:#ff7181; font-size:15px; font-weight:700; }
.about-page .about-belief__item h3 { color:var(--text-inverse); font-size:27px; font-weight:700; }
.about-page .about-belief__item h3 span { display:inline-block; margin-left:17px; color:#ffffff75; font-size:15px; font-weight:500; letter-spacing:.02em; }
.about-page .about-belief__item p { margin-top:14px; color:#ffffffb3; font-size:15px; line-height:1.75; }

/* Verified timeline, showing corporate milestones rather than inferred claims. */
.about-page .about-history { padding-block:clamp(110px,9.8vw,190px); background:var(--brand-blue); color:var(--text-inverse); }
.about-page .about-history__layout { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(46px,9vw,175px); align-items:start; }
.about-page .about-history .about-kicker { color:#fff; }
.about-page .about-history h2 { margin-top:26px; color:#fff; }
.about-page .about-history__intro > p { max-width:410px; margin-top:30px; color:#ffffffcb; font-size:18px; line-height:1.8; }
.about-page .about-history__since { display:block; margin-top:65px; color:#ffffff50; font-size:clamp(40px,4.5vw,86px); letter-spacing:-.06em; font-weight:700; white-space:nowrap; }
.about-page .about-history__item { display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:32px 0; border-top:1px solid #ffffff55; }
.about-page .about-history__item:last-child { border-bottom:1px solid #ffffff55; }
.about-page .about-history__year { color:#fff; font-size:32px; font-weight:700; letter-spacing:-.03em; }
.about-page .about-history__item ul { padding-top:5px; color:#ffffffe3; font-size:17px; line-height:1.75; }
.about-page .about-history__item ul li + li { margin-top:8px; }

/* End CTA uses the established primary red action treatment. */
.about-page .about-contact { padding-block:110px; background:var(--surface-default); }
.about-page .about-contact__layout { display:flex; align-items:center; justify-content:space-between; gap:55px; }
.about-page .about-contact h2 { margin-top:25px; }
.about-page .about-contact__layout p { max-width:600px; margin-top:20px; color:var(--text-muted); font-size:16px; line-height:1.8; }
.about-page .about-contact__actions { display:flex; flex-direction:column; gap:17px; align-items:flex-start; }
.about-page .about-contact__primary { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-height:60px; min-width:250px; padding:17px 30px; border-radius:30px; background:var(--primary-default); color:var(--text-inverse); font-size:16px; font-weight:700; transition:background-color .2s; }
.about-page .about-contact__primary:hover,.about-page .about-contact__primary:focus-visible { background:var(--primary-hover); }
.about-page .about-contact__secondary { display:inline-flex; min-height:44px; align-items:center; color:var(--text-muted); border-bottom:1px solid var(--border-default); font-size:14px; font-weight:600; }
.about-page .about-contact__secondary:hover,.about-page .about-contact__secondary:focus-visible { color:var(--primary-default); }

/* Source breakpoint hierarchy: 1700 / 1100 / 850 / 600 from main.css. */
@media(max-width:1700px) {
  .about-page .about-overview__body { gap:clamp(35px,5vw,80px); }
  .about-page .about-proof__certificates img { height:135px; }
}
@media(max-width:1100px) {
  .about-page .about-hero { min-height:650px; }
  .about-page .about-overview__body { grid-template-columns:1fr; gap:45px; margin-top:52px; }
  .about-page .about-overview__copy { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
  .about-page .about-overview__lead { grid-column:1; }
  .about-page .about-overview__copy > p:not(.about-overview__lead) { grid-column:2; margin-top:0; }
  .about-page .about-overview__details { grid-column:1/-1; margin-top:42px; }
  .about-page .about-overview__image img { aspect-ratio:1.8; }
  .about-page .about-process__item,.about-page .about-process__item--reverse { gap:36px; }
  .about-page .about-process__content p { font-size:15px; }
  .about-page .about-proof__cert,.about-page .about-proof__partners { padding:26px 23px 34px; }
  .about-page .about-proof__certificates img { height:118px; }
  .about-page .about-belief__layout { gap:48px; }
  .about-page .about-history__layout { gap:42px; }
  .about-page .about-history__since { font-size:46px; }
  .about-page .about-contact__layout { gap:26px; }
}
@media(max-width:850px) {
  .about-page .about-hero__content { padding-top:180px; padding-bottom:125px; }
  .about-page .about-section-nav { top:var(--header-height); }
  .about-page .about-section-nav a { font-size:14px; }
  .about-page .about-overview__copy { display:block; }
  .about-page .about-overview__copy > p:not(.about-overview__lead) { margin-top:23px; }
  .about-page .about-overview__details { margin-top:45px; }
  .about-page .about-process__item,.about-page .about-process__item--reverse { grid-template-columns:1fr; gap:30px; }
  .about-page .about-process__item--reverse .about-process__media { order:0; }
  .about-page .about-process__media img { aspect-ratio:1.75; }
  .about-page .about-process__content h3 { margin-top:22px; }
  .about-page .about-process__content p { margin-top:20px; }
  .about-page .about-process__note { margin-top:20px; }
  .about-page .about-proof__heading { display:block; }
  .about-page .about-proof__heading > p { margin-top:20px; max-width:550px; }
  .about-page .about-proof__grid { grid-template-columns:1fr; margin-top:43px; }
  .about-page .about-proof__certificates img { height:170px; }
  .about-page .about-proof__logos li { min-height:126px; }
  .about-page .about-belief__layout,.about-page .about-history__layout { grid-template-columns:1fr; gap:45px; }
  .about-page .about-history__since { margin-top:26px; }
  .about-page .about-contact__layout { flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px) {
  .about-page { --about-gutter:20px; }
  .about-page main section { scroll-margin-top:67px; }
  .about-page .about-kicker { font-size:12px; gap:9px; }
  .about-page .about-kicker::before { width:20px; }
  .about-page .about-section h2 { font-size:clamp(28px,7.1vw,36px); line-height:1.34; }
  .about-page .about-hero { min-height:660px; min-height:95svh; }
  .about-page .about-hero__image { object-position:58% center; }
  .about-page .about-hero::before { background:linear-gradient(90deg,#10161fe0,#10161f55),linear-gradient(0deg,#0008,transparent 60%); }
  .about-page .about-hero__content { padding-top:165px; padding-bottom:122px; }
  .about-page .about-hero h1 { font-size:clamp(34px,8vw,43px); margin-top:20px; line-height:1.3; }
  .about-page .about-hero__eyebrow { font-size:12px; }
  .about-page .about-hero__description { margin-top:20px; font-size:15px; }
  .about-page .about-hero__line { min-height:55px; font-size:10px; }
  .about-page .about-breadcrumb ol { min-height:54px; font-size:12px; gap:7px; }
  .about-page .about-breadcrumb li { gap:7px; }
  .about-page .about-section-nav__inner { gap:23px; min-height:55px; }
  .about-page .about-section-nav a { min-height:54px; font-size:13px; }
  .about-page .about-overview,.about-page .about-process,.about-page .about-proof,.about-page .about-belief,.about-page .about-history { padding-block:78px; }
  .about-page .about-section__head h2,.about-page .about-process__heading h2,.about-page .about-proof__heading h2,.about-page .about-belief h2,.about-page .about-history h2,.about-page .about-contact h2 { margin-top:17px; }
  .about-page .about-overview__body { margin-top:35px; gap:35px; }
  .about-page .about-overview__lead { font-size:19px; }
  .about-page .about-overview__copy > p:not(.about-overview__lead) { font-size:15px; line-height:1.77; }
  .about-page .about-overview__details { gap:11px; margin-top:32px; }
  .about-page .about-overview__details strong { font-size:clamp(15px,4.4vw,21px); margin-top:10px; }
  .about-page .about-overview__details span { font-size:10px; }
  .about-page .about-overview__details small { font-size:11px; }
  .about-page .about-overview__image img { aspect-ratio:1.15; }
  .about-page .about-overview__image figcaption { font-size:10px; }
  .about-page .about-process__heading > p,.about-page .about-proof__heading > p { margin-top:20px; font-size:15px; line-height:1.72; }
  .about-page .about-process__list { gap:60px; margin-top:35px; }
  .about-page .about-process__media img { aspect-ratio:1.4; }
  .about-page .about-process__top { padding-bottom:14px; }
  .about-page .about-process__number { font-size:16px; }
  .about-page .about-process__keyword { font-size:11px; }
  .about-page .about-process__content h3 { font-size:26px; line-height:1.35; }
  .about-page .about-process__content p { font-size:15px; }
  .about-page .about-process > .about-shell > .about-text-link { margin-top:45px; }
  .about-page .about-text-link { gap:14px; font-size:13px; }
  .about-page .about-proof__grid { gap:14px; margin-top:31px; }
  .about-page .about-proof__cert,.about-page .about-proof__partners { padding:22px 18px 26px; }
  .about-page .about-proof__grid h3 { margin-top:22px; font-size:26px; }
  .about-page .about-proof__grid article > p { margin-top:12px; font-size:14px; }
  .about-page .about-proof__certificates { gap:5px; margin:24px 0; }
  .about-page .about-proof__certificates figure { padding:3px; }
  .about-page .about-proof__certificates img { height:98px; }
  .about-page .about-proof__certificates figcaption { font-size:10px; }
  .about-page .about-proof__logos { gap:8px; margin:24px 0; }
  .about-page .about-proof__logos li { min-height:88px; padding:10px; }
  .about-page .about-proof__logos img { max-width:120px; max-height:60px; }
  .about-page .about-belief__layout,.about-page .about-history__layout { gap:32px; }
  .about-page .about-belief__intro > p,.about-page .about-history__intro > p { margin-top:20px; font-size:15px; }
  .about-page .about-belief__item { grid-template-columns:36px minmax(0,1fr); gap:15px; padding:20px 0; }
  .about-page .about-belief__item h3 { font-size:21px; }
  .about-page .about-belief__item h3 span { margin-left:10px; font-size:12px; }
  .about-page .about-belief__item p { font-size:13px; margin-top:9px; }
  .about-page .about-history__since { margin-top:20px; font-size:39px; }
  .about-page .about-history__item { grid-template-columns:75px minmax(0,1fr); gap:18px; padding:22px 0; }
  .about-page .about-history__year { font-size:23px; }
  .about-page .about-history__item ul { font-size:14px; }
  .about-page .about-contact { padding-block:75px; }
  .about-page .about-contact__layout p { font-size:14px; }
  .about-page .about-contact__actions { width:100%; }
  .about-page .about-contact__primary { width:100%; min-height:54px; }
}
@media (hover:none), (pointer:coarse) {
  .about-page .about-section-nav a { min-height:48px; }
}
@media (prefers-reduced-motion:reduce) {
  .about-page .about-text-link,.about-page .about-section-nav,.about-page .about-section-nav a,.about-page .about-contact__primary { transition:none; }
}