/* /test/about 전용 (2026-09-23 · 2026-10-14 대표 시안 9장으로 재구성). 공용 ark2026.css 위에 얹는다 — 클래스는 전부 about- 접두.
   종전 부채꼴 덱·수치 밴드·세로 레일 타임라인·사진 벽 규칙은 화면에서 빠져 같이 지웠다. */

/* 스크롤 등장(JS 가 about-js 를 켜고 about-in 을 붙인다. 모션 줄이기면 항상 보임) */
@media (prefers-reduced-motion:no-preference){
  .about-js [data-about-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .about-js [data-about-rv].about-in{opacity:1;transform:none}
}

/* ── 1. 히어로: 가운데 정렬 + 인증서 띠 + 신뢰 4칸 ─────────────── */
.about-hero{background:radial-gradient(60% 50% at 50% 18%,rgba(52,123,247,.20),rgba(52,123,247,0) 70%),var(--ink)}
.about-hero-c{text-align:center;display:grid;justify-items:center;margin-top:clamp(24px,4vw,48px)}
.about-hero h1{font-size:clamp(30px,4.8vw,54px);letter-spacing:-.02em}
.about-hero h1 em{color:#9CC0FF}
.about-hero .lede{margin-inline:auto;max-width:46em;line-height:1.75}
.about-hero .lede b{color:#fff;font-weight:600}
.about-hero .cta-row{justify-content:center;margin-top:24px}
.about-marq{margin-top:clamp(32px,5vw,56px);background:rgba(255,255,255,.03);border:1px solid rgba(195,211,236,.14);border-radius:18px;padding:16px 0 18px;overflow:hidden}
.about-marq-h{font-size:12.5px;color:var(--on-ink-mute);padding:0 20px 12px}
/* .about-marq-v = 공용 흐르는 줄 상자(.mq-rail, ark2026.css) — 흐름·멈춤·화면 밖·복제는 ark2026.js 3g. 2026-10-26 가로 스크롤 통일(양끝 흐림 없음 = 기관 줄과 같음) */
.about-marq-t{list-style:none;margin:0;padding:0;display:flex;gap:16px;width:max-content}
.about-marq-t li{flex:0 0 auto;width:clamp(104px,13vw,142px);display:grid;gap:8px;justify-items:center}
.about-marq-t img{display:block;width:100%;height:auto;aspect-ratio:300/397;object-fit:cover;border-radius:6px;background:#fff;box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.about-marq-t span{font-size:12px;color:var(--on-ink-mute);text-align:center;line-height:1.35;word-break:keep-all}
/* 오른쪽에서 왼쪽으로 끝없이(대표 2026-10-14) — 2026-10-26 부터 공용 흐르는 줄 엔진이 돌린다(복제·속도·멈춤 규칙 한 곳). 모션 줄이기면 멈춘 채 옆으로 넘겨 보기 */
@media (prefers-reduced-motion:reduce){.about-marq-v{padding-inline:20px}}
.about-trust{list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(195,211,236,.14)}
.about-trust li{padding:18px 16px 4px;display:grid;gap:4px;min-width:0;align-content:start}
@media (min-width:1000px){.about-trust{grid-template-columns:repeat(4,minmax(0,1fr))}.about-trust li + li{border-left:1px solid rgba(195,211,236,.14)}}
@media (max-width:999px){.about-trust li:nth-child(even){border-left:1px solid rgba(195,211,236,.14)}}
.about-trust small{font-size:12px;color:var(--on-ink-mute)}
.about-trust b{color:#fff;font-size:18px;font-weight:700}
.about-trust span{font-size:12.5px;color:var(--on-ink-mute);line-height:1.45;word-break:keep-all}

/* ── 2. 비전·기업이념 ──────────────────────────────────────── */
.about-motto{display:grid;gap:14px;margin-bottom:clamp(44px,6vw,80px);max-width:52em}
.about-motto-en{font-size:clamp(38px,7vw,80px);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:var(--navy)}
.about-motto-en em{font-style:normal;color:var(--signal)}
.about-motto-ko{font-size:clamp(17px,2vw,21px);color:var(--mute)}
.about-motto-ko b{color:var(--navy);font-weight:700}
.about-val-head{margin-bottom:22px}
.about-val-head h3{margin-top:8px;font-size:clamp(22px,2.8vw,30px);letter-spacing:-.02em}
.about-values{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:820px){.about-values{grid-template-columns:repeat(3,minmax(0,1fr))}}
.about-val{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;align-content:start;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px;overflow:hidden}
@media (min-width:820px){.about-val{grid-template-columns:1fr;padding:0}.about-val > div{padding:6px 24px 26px}}
.about-val img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
@media (min-width:820px){.about-val img{aspect-ratio:440/300;border-radius:0}}
.about-val-en{font-family:var(--mono);font-size:12.5px;color:var(--signal);letter-spacing:.1em;text-transform:uppercase}
.about-val h4{margin:4px 0 10px;font-size:22px;letter-spacing:-.02em}
.about-val p{font-size:15px;color:#3A4A63;line-height:1.7;word-break:keep-all}

/* ── 3. CEO 인사말 ─────────────────────────────────────────── */
.about-ceo{border-top:1px solid var(--line)}
/* 구간 머리 밖 소제목(비전·기업이념·CEO 인사말·사업영역·오시는 길)도 구간 머리 안 것(기록 등, .sec-head p 17px)과 같은 크기 — 대표 2026-10-15 */
.about-vision .eyebrow,.about-ceo .eyebrow,.about-biz .eyebrow,.about-loc .eyebrow{font-size:17px}
.about-ceo-h{margin-top:12px;font-size:clamp(24px,3.4vw,38px);line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.about-ceo-h em{font-style:normal;color:var(--signal)}
.about-ceo-grid{display:grid;gap:28px;align-items:start;margin-top:clamp(28px,4vw,48px)}
@media (min-width:900px){.about-ceo-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px}}
.about-ceo-fig{margin:0;border-radius:28px;overflow:hidden;background:radial-gradient(90% 70% at 50% 30%,#8A8F98 0%,#55595F 55%,#3B3E43 100%);max-width:480px;width:100%;justify-self:center;aspect-ratio:480/560;display:flex;align-items:flex-end;justify-content:center}
.about-ceo-fig img{display:block;width:92%;height:auto;max-height:100%;object-fit:contain;object-position:bottom}
.about-ceo-txt{display:grid;gap:18px;align-content:start}
.about-ceo-hi{font-size:18px;font-weight:700;color:var(--navy)}
.about-letter{display:grid;gap:14px}
.about-letter p{font-size:16px;line-height:1.85;color:#2B3A52;word-break:keep-all}
.about-letter br.lb{display:none}
.about-letter .kc,.about-letter .ks{display:inline}   /* 조판 필터의 쉼표 덩어리(inline-block)가 지정 줄 나눔과 겹치면 쉼표 뒤에서 한 번 더 끊긴다 — 이 글은 줄을 br.lb 로 정하므로 덩어리를 푼다 */
@media (min-width:480px){.about-letter br.lb{display:inline}}   /* 대표 지정 줄 나눔 — 가장 긴 줄(38자)이 한 줄에 드는 폭부터(실측: 글 칸 442px 이상, 480 미만 화면은 자연 흐름) */
.about-sign{justify-self:end;text-align:right;font-size:16px;line-height:1.7;color:#2B3A52}
.about-sign b{font-weight:700;color:var(--navy)}

/* ── 4. 사업영역 ──────────────────────────────────────────── */
.about-biz-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px}
.about-biz-head h2{margin-top:8px;font-size:clamp(26px,3.6vw,40px);line-height:1.2}
.about-biz-tabs{display:flex;gap:4px;padding:4px;background:#E7ECF4;border-radius:14px;max-width:100%;overflow-x:auto}
.about-biz-tabs button,.about-tl-tabs button{font:inherit;border:0;cursor:pointer;white-space:nowrap}
.about-biz-tabs button{min-height:44px;padding:0 18px;border-radius:10px;background:transparent;color:#3A4A63;font-size:15px;font-weight:600}
.about-biz-tabs button[aria-pressed="true"]{background:var(--navy);color:#fff}
.about-sol{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.about-sol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.about-sol{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.about-sol.is-df .about-sol-i:not([data-df]){display:none}
.about-sol-i{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;text-decoration:none;color:var(--navy);min-width:0;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.about-sol-i:hover{border-color:var(--frost);transform:translateY(-2px);box-shadow:0 18px 36px -26px rgba(15,30,51,.45)}
.about-sol-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.about-sol-ic{width:48px;height:48px;border-radius:12px;background:#EAF1FF;display:grid;place-items:center}
.about-sol-ic img{display:block;width:22px;height:22px}
.about-sol-n{font-size:13px;color:#A3AFC2}
.about-sol-l{font-size:13.5px;font-weight:700;color:var(--signal)}
.about-sol-i b{font-size:18px;line-height:1.4;letter-spacing:-.01em;word-break:keep-all}
.about-sol-d{font-size:14px;line-height:1.65;color:var(--mute);word-break:keep-all}
.about-sol-go{margin-top:8px;font-size:14px;font-weight:600;color:var(--mute)}
.about-sol-i:hover .about-sol-go{color:var(--signal)}

/* ── 5. 기록 ──────────────────────────────────────────────── */
.about-tl-sec .sec-head{margin-bottom:22px}
.about-tl-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(195,211,236,.14);margin-bottom:8px}
.about-tl-tabs button{min-height:40px;padding:0 16px;border-radius:9px;background:transparent;color:var(--on-ink-mute);font-size:14px;font-weight:600}
.about-tl-tabs button[aria-pressed="true"]{background:var(--signal);color:#fff}
.about-tl{display:grid}
.about-yr{display:grid;gap:14px;padding-block:clamp(24px,3vw,36px);border-top:1px solid rgba(195,211,236,.12)}
@media (min-width:900px){.about-yr{grid-template-columns:150px minmax(0,1fr);gap:0 32px}}
.about-yr-n{font-size:clamp(36px,5vw,52px);line-height:1;color:#fff;letter-spacing:-.03em;font-weight:700}
.about-yr-body{display:grid;gap:14px;min-width:0}
.about-tl[data-show="aw"] .about-news,.about-tl[data-show="aw"] .about-news-more,.about-tl[data-show="pr"] .about-aw{display:none}
.about-tl[data-show="aw"] .about-yr:not(.has-aw),.about-tl[data-show="pr"] .about-yr:not(.has-pr){display:none}
.about-aw{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.about-aw{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about-aw li>a,.about-aw li>.about-aw-in{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(195,211,236,.12);text-decoration:none;color:var(--on-ink);height:100%;transition:border-color .2s,background .2s}
.about-aw li>a:hover{border-color:rgba(195,211,236,.4);background:rgba(52,123,247,.1)}
.about-aw img,.about-aw i{display:block;width:48px;height:auto;aspect-ratio:300/397;object-fit:cover;border-radius:3px;background:#fff}
.about-aw-t{display:grid;gap:4px;font-size:14.5px;line-height:1.45;word-break:keep-all;min-width:0}
.about-aw-t small{justify-self:start;font-size:11.5px;font-weight:700;color:#7FA8FF;background:rgba(52,123,247,.16);border-radius:4px;padding:1px 6px}   /* 대표 2026-10-15 주황 → 파랑(어두운 띠의 소제목 파랑과 같은 값) */
.about-news{list-style:none;margin:0;padding:0;display:grid}
.about-news a{display:grid;grid-template-columns:90px minmax(0,1fr) 92px;gap:16px;align-items:center;padding:12px 4px;border-bottom:1px solid rgba(195,211,236,.10);text-decoration:none;color:var(--on-ink)}
.about-news a:hover .about-news-t{color:#fff;text-decoration:underline;text-underline-offset:3px}
.about-news time{font-size:12.5px;color:var(--on-ink-mute)}
.about-news-t{font-size:14.5px;line-height:1.5;word-break:keep-all;min-width:0}
.about-news img{display:block;width:92px;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:var(--navy);grid-column:3}
.about-js .about-news li.is-more{display:none}
.about-js .is-open .about-news li.is-more{display:block}
.about-news-more{display:none;font:inherit;font-size:13.5px;min-height:44px;border-radius:10px;border:1px solid rgba(195,211,236,.16);background:rgba(255,255,255,.03);color:var(--on-ink-mute);cursor:pointer}
.about-js .about-news-more{display:block}
.about-news-more:hover{color:#fff;border-color:rgba(195,211,236,.4)}
.about-news-more[aria-expanded="true"] span{display:inline-block;transform:rotate(180deg)}
@media (max-width:639px){
  .about-news a{grid-template-columns:minmax(0,1fr) 80px;gap:4px 12px}
  .about-news time{grid-column:1;grid-row:1}
  .about-news-t{grid-column:1;grid-row:2}
  .about-news img{grid-column:2;grid-row:1/3;width:80px}
}

/* ── 6. 특허·인증·수상 ────────────────────────────────────── */
.about-pg + .about-pg{margin-top:clamp(28px,4vw,44px)}
.about-pg h3{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;font-size:19px}
.about-pg h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot);align-self:center}
.about-pg h3 small{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--mute);font-weight:500}
.about-pg{--dot:var(--signal)}   /* 특허·인증·수상 점 색 통일 — 대표 2026-10-15 '인증(초록), 수상(주황)도 다 파란색으로' */
.about-pl{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.about-pl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.about-pl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.about-pl li>a,.about-pl li>.about-pl-in{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:14px;background:var(--paper);border:1px solid transparent;text-decoration:none;color:var(--navy);height:100%;transition:border-color .2s,background .2s}
.about-pl li>a:hover{border-color:var(--frost);background:#fff}
.about-pl img,.about-pl i{display:block;width:44px;height:auto;aspect-ratio:300/397;object-fit:cover;border-radius:3px;background:#fff;box-shadow:0 2px 6px rgba(15,30,51,.18)}
.about-pl li span{display:grid;gap:2px;font-size:15px;font-weight:600;line-height:1.45;word-break:keep-all;min-width:0}
.about-pl small{font-size:12px;font-weight:600;color:var(--dot)}

/* ── 7. 언론 보도·수상 + 협약 기관 ─────────────────────────── */
.about-press{border-top:1px solid var(--line)}
.about-press-head{text-align:center;justify-items:center;margin-inline:auto}
/* 그림 줄(대표 2026-10-19 ① '이미지의 상하좌우가 잘리는 현상 … 비율을 완벽히' ② SBS '가로 비율에 맞게, 상장들 높이에 맞게 키우면 … 혼자만 너무 덩그러니'):
   자르지 않고, 네 그림을 같은 높이로. 카드는 flex 로 나란히 두고 각 카드가 자기 그림 비율(--r = 가로÷세로, about.php 가 넣는다)만큼 폭을 가진다 →
   폭 ∝ 비율이면 높이 = 폭÷비율 이 모두 같다(간격은 basis 0 이라 비율 계산 밖). 좁은 화면은 가로형(.is-wide)이 한 줄을 다 쓰고 상장 3장이 그 아래 같은 높이로 */
/* 언론 보도 · 수상(대표 2026-10-22): SBS Biz 방송 카드는 따로 한 장, 그 아래 특허·인증·수상 전부가 흐르는 줄(ark2026.js 3g · ark2026.css .mq-*) */
.about-tv{display:grid;gap:8px;justify-items:center;max-width:640px;margin:0 auto;text-decoration:none;color:var(--navy);text-align:center}
.about-tv-img{display:block;width:100%}
.about-tv-img img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 14px 30px -18px rgba(15,30,51,.45);transition:transform .3s ease,box-shadow .3s ease}
a.about-tv:hover .about-tv-img img{transform:translateY(-4px);box-shadow:0 20px 36px -18px rgba(15,30,51,.5)}
.about-tv-txt{display:grid;gap:8px}
a.about-tv:hover .about-hl-t{color:var(--signal)}
.about-hlk{margin-top:clamp(36px,5vw,52px)}
.about-hlk-row{list-style:none;margin:0;padding:10px 0 4px;display:flex;align-items:flex-start;gap:18px}   /* 위 10px = 올림 효과·그림자가 줄 경계에 잘리지 않게 */
.about-hlk-row>li{flex:none;--w:160px;width:var(--w)}
.about-hlk-row>li.is-wide{width:calc(var(--w) * 557 / 421 * var(--ar))}   /* 가로 그림 카드: 그림 높이(= 세로 칸 폭 × 557/421)는 그대로, 폭만 원본 비율(--ar, about.php 가 축소본 크기로 계산) */
.about-hlk-row>li.is-wide .about-hlk-img{aspect-ratio:var(--ar)}
.about-hlk-c{display:grid;gap:6px;justify-items:center;text-align:center;text-decoration:none;color:var(--navy)}
.about-hlk-img{display:block;width:100%;aspect-ratio:421/557;border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 10px 22px -14px rgba(15,30,51,.45);transition:transform .3s ease}
.about-hlk-img img{display:block;width:100%;height:100%;object-fit:cover}   /* 그림 칸 크기를 미리 고정 — 그림이 늦게 와도 줄 폭(흐름 거리)이 바뀌지 않는다 */
a.about-hlk-c:hover .about-hlk-img{transform:translateY(-4px)}
.about-hlk-k{margin-top:4px;font-size:12px;font-weight:700;color:var(--signal)}
.about-hlk-t{font-size:13.5px;font-weight:600;line-height:1.45;word-break:keep-all}   /* 제목은 자르지 않는다(긴 특허명 3~4줄) — 카드는 위 정렬 */
a.about-hlk-c:hover .about-hlk-t{color:var(--signal)}
.about-hlk:not(.mq-on) .mq-rail{overflow-x:auto}   /* 흐르지 않을 때(모션 줄이기·스크립트 전) — 손으로 밀어 끝까지 볼 수 있게 */
@media (max-width:899px){.about-hlk-row{gap:14px}.about-hlk-row>li{--w:132px}.about-hlk-t{font-size:13px}}
/* 나란히(900px 이상): 방송 카드 | 흐르는 줄. 칸 비율 = 옛 한 줄(가로 카드 1.8605 : 상장 3장 3×0.7518), 줄 카드의 그림 높이 = 방송 그림 높이(옛 배치처럼 그림 위·아래 선이 맞는다).
   그림 높이 h = (줄 폭 - 칸 사이 22px) / (1.8605 + 2.2554) — 상자 폭(cqw)으로 계산하므로 폭이 바뀌어도 맞고, 흐르는 거리는 ark2026.js 3g 가 리사이즈 때 다시 잰다 */
@media (min-width:900px){
  .about-pr.has-hlk{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1.8605fr) minmax(0,2.2554fr);gap:22px;align-items:start}
  .about-pr.has-hlk .about-tv{max-width:none;margin:0;padding-top:10px}   /* 위 10px = 줄 쪽 올림 여유와 같은 출발선 */
  .about-pr.has-hlk .about-hlk{margin-top:0;min-width:0}
  .about-pr.has-hlk .about-hlk-row{gap:22px}
  .about-pr.has-hlk .about-hlk-row>li{--w:calc((100cqw - 22px) / 4.1159 * 421 / 557)}
  .about-pr.has-hlk .about-hlk-k{margin-top:8px}   /* 종류 줄 = 방송 매체 줄과 같은 높이(그림 아래 14px) */
}
.about-hl-m{margin-top:6px;font-size:12.5px;color:var(--mute)}
.about-hl-m b{color:var(--signal);font-weight:700}
.about-hl-t{font-size:15.5px;font-weight:700;line-height:1.45;word-break:keep-all}
.about-mou{margin-top:clamp(40px,6vw,64px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);text-align:center}
.about-mou h3{font-size:13.5px;font-weight:500;color:var(--mute);margin-bottom:22px}
.about-mou ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;align-items:center;justify-items:center}
@media (min-width:760px){.about-mou ul{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 64px}}
.about-mou img{display:block;height:var(--h,30px);width:auto;max-width:100%;filter:grayscale(1);opacity:.55}

/* ── 8. 오시는 길 ─────────────────────────────────────────── */
.about-loc{border-top:1px solid var(--line)}
.about-loc-grid{display:grid;gap:28px}
@media (min-width:900px){.about-loc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:stretch}}
.about-loc-info h2{margin-top:8px;font-size:clamp(30px,4vw,42px)}
.about-addr{margin-top:14px;font-size:clamp(17px,1.8vw,19px);line-height:1.6;color:#2B3A52;word-break:keep-all}
.about-loc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.about-loc-btns>*{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;cursor:pointer}
.about-loc-btns>*:hover{border-color:var(--signal);color:var(--signal)}
@media (max-width:599px){.about-loc-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.about-loc-btns>*{justify-content:center;padding:0 8px}.about-loc-btns .about-copy{grid-column:1/-1}}/* 휴대폰: 주소 복사 한 줄 + 지도 3개(구글·카카오·네이버) 한 줄 */
.about-contact{margin:22px 0 0;border-top:1px solid var(--line)}
.about-contact>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.about-contact dt{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mute)}
.about-contact dd{margin:0;font-size:18px;font-weight:700}
.about-contact dd a{color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.about-contact i{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--paper);position:relative}
.about-contact i::before{content:"";position:absolute;inset:9px;background:var(--navy);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.about .ic-tel{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")}
.about .ic-mail{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.about-map{position:relative;overflow:hidden;min-height:280px;border-radius:24px;border:1px solid var(--line);
  background-color:#F7F9FC;background-image:linear-gradient(rgba(15,30,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,30,51,.06) 1px,transparent 1px);background-size:40px 40px}
.about-map-pin{width:64px;height:64px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 10px rgba(52,123,247,.16);position:relative}
.about-map-pin::before{content:"";position:absolute;inset:18px;background:#fff;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.about-map-l{font-size:14px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;box-shadow:0 6px 16px -10px rgba(15,30,51,.3)}
.about-map-fb{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;text-decoration:none;color:var(--navy)}
.about-map-fb:hover .about-map-l{color:var(--signal)}
.about-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .3s}
.about-map.is-map iframe{opacity:1}.about-map.is-map .about-map-fb{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .about-sol-i:hover,a.about-tv:hover .about-tv-img img,a.about-hlk-c:hover .about-hlk-img{transform:none}
}
/* 모바일 읽는 글자 바닥 12px(2026-10-01 전면 평가) */
@media (max-width:899px){
  .about-pl small,.about-hl-m,.about-trust small{font-size:12px}
  .about-aw-t small{font-size:12px}
}
/* 세 가지 가치 — 휴대폰은 사진 대신 선 아이콘(홈 Why 아이콘과 같은 선 굵기)·가운데 정렬(대표 2026-10-27). PC(820px 이상)는 사진 */
.about-val-ic{display:none}
@media (max-width:819px){
  .about-val{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:22px 18px 20px}
  .about-val img{display:none}
  .about-val-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#EAF1FE;color:var(--signal)}
  .about-val-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .about-val h4{margin:4px 0 8px}
}
/* PC(820px 이상)도 같은 아이콘 카드(대표 2026-10-30 "지난번에 다룬 이 부분, pc버전도 바뀌어야 해") — 사진을 빼고 선 아이콘·가운데 정렬. 3열 격자는 그대로 */
@media (min-width:820px){
  .about-val{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;padding:30px 26px 28px}
  .about-val img{display:none}
  .about-val > div{padding:0}
  .about-val-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#EAF1FE;color:var(--signal)}
  .about-val-ic svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .about-val h4{margin:4px 0 8px}
}
/* 대표 인사말 서명란(대표 2026-10-27): 두 줄 오른쪽 정렬 고정 — 휴대폰에서 낱말마다 줄이 갈리던 것(주식회사/아크링크/대표이사/박민재)을 줄 단위 nowrap 으로. 이름 옆 손글씨 서명 */
.about-sign-l{display:block;white-space:nowrap}
.about-sign-l .ks,.about-sign-l .kc{display:inline}
@media (max-width:899px){.about-ceo-fig{max-width:240px;aspect-ratio:528/685}}   /* 휴대폰 대표 사진 축소(대표 2026-10-27 300px → 2026-10-30 "크기 줄이기 … 비율에 맞게. 제발" 240px).
   상자 비율 = 사진(528×744)을 92% 폭으로 앉힌 높이와 같게(528 : 744×0.92) — 종전 480:560 상자는 사진보다 납작해 아래 39px(팔)가 잘렸다(2026-10-30 실측 430px: 상자 350 · 사진 389) */
/* 머리 문구 굵은 줄 「악성 앱 정밀 분석부터 유포 차단, 2차 피해 방지까지」는 휴대폰 글 칸(321~361px)보다 길다(약 384px) — 넘치면 낱말 중간(2차/피해)이 아니라 쉼표에서 꺾이게 구절을 한 덩어리로 */
@media (max-width:899px){.about-hero .lede b .kc{display:inline-block}}
/* 머리 문구 세 줄(대표 2026-10-30 지정) — 가장 긴 첫 줄('아크링크는 … 보안 기술로', 16px 에서 374px)이 칸에 한 줄로 들어가게 글자 크기를 칸 폭/24 로(최대 16px · 320px 폭에서 12px) */
@media (max-width:899px){.about-hero .lede{font-size:min(16px,max(12px,calc((100vw - 32px) / 25)))}.about-hero .lede-l1{white-space:nowrap}}   /* 첫 판(칸 폭/24)은 칸에 딱 맞아 소수점 차로 '특화된 / 독자적'에서 한 번 더 접혔다(2026-10-30 실측 320~430px 전부 4줄) — /25 + 첫 줄 묶음 */

/* ── 휴대폰·태블릿(899px 이하) 가로 흐르는 줄(대표 2026-10-28 "여기도 … 모바일에 맞게") — 기업이념 3장·사업영역 6장·특허/인증/수상 종류별 한 줄.
   흐름·멈춤·복제·손 밀기 = 공용 엔진(ark2026.js 3g, about.php 의 .about-mq[data-mq]>.mq-rail>.mq-track). 칸 폭은 줄 폭(cqw)의 비율 — 다음 칸이 보이게.
   900px 이상은 원래 격자 — 트랙의 max-content 폭을 풀어 넘침 0(엔진이 .mq-fit 고정, 복제 0) */
@media (max-width:899px){
  .about-mq .mq-track{display:flex;gap:12px}
  .about-mq .mq-rail{scroll-snap-type:x mandatory}
  .about-mq .mq-track>*{flex:0 0 auto;scroll-snap-align:start}
  .about-values.mq-track>*{width:260px;width:min(280px,76cqw)}
  .about-sol.mq-track>*{width:280px;width:min(300px,80cqw)}
  .about-pl.mq-track>*{width:250px;width:min(270px,76cqw)}
  .about-js .about-mq [data-about-rv]{opacity:1;transform:none}   /* 복제 칸은 등장 관찰 대상이 아니다 — 줄 안 카드는 등장 효과 없이 보인다 */
  /* 기록: 종류 탭 줄은 머리글·구간 제목 띠 아래에 붙고(표 머리 줄 고정과 같은 자리 --hdr-h + --pin-h), 오른쪽 끝에 지금 지나는 해(about.js 3) */
  /* 기록(대표 2026-10-28 "고정 … 같이" → "2026 / 2025 / 2024 이렇게"): 종류 탭 + 연도 탭 한 덩어리가 머리글·구간 제목 띠 아래(--hdr-h + --pin-h)에 붙는다.
     연도 탭을 고르면 그 해만 보인다(about.js 3 이 .about-tl[data-yr] 과 .about-yr.is-on 을 붙인다 — 스크립트가 없으면 세 해 전부) */
  .about-tl-bar{position:sticky;top:calc(var(--hdr-h,65px) + var(--pin-h,0px) + env(safe-area-inset-top,0px));z-index:6;display:grid;gap:6px;margin:0 calc(-1 * var(--gut)) 4px;padding:6px var(--gut) 8px;background:var(--ink);border-bottom:1px solid rgba(195,211,236,.14)}
  .about-tl-tabs{display:flex;margin:0;padding:3px;justify-self:start}
  .about-tl-tabs button{min-height:34px;padding:0 14px}
  .about-js .about-yrs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
  .about-yrs::-webkit-scrollbar{display:none}
  .about-yrs button{flex:1 0 92px;display:grid;justify-items:start;gap:2px;min-height:44px;padding:5px 12px;font:inherit;text-align:left;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--on-ink);cursor:pointer}
  .about-yrs button b{font-size:18px;line-height:1.1;color:#fff;letter-spacing:-.02em}
  .about-yrs button small{font-size:11.5px;line-height:1.2;color:var(--on-ink-mute);white-space:nowrap}
  .about-yrs button[aria-pressed="true"]{background:rgba(52,123,247,.22);border-color:#8FB3FF}
  .about-yrs button[aria-pressed="true"] small{color:#C9DAFF}
  .about-yrs button:disabled{opacity:.35;cursor:default}
  .about-js .about-tl[data-yr] .about-yr:not(.is-on){display:none}   /* 연도 탭이 보일 때(.about-js)만 한 해로 — 탭이 없는데 한 해만 남는 상태를 만들지 않는다(gpt-6-astra 2026-10-29) */
  .about-js .about-tl[data-yr] .about-yr-n{display:none}   /* 해는 위 연도 탭이 말한다 */
  .about-js .about-tl[data-yr] .about-yr{border-top:0;padding-top:14px}
  .about-yr.yr-l{animation:aboutYrL .28s cubic-bezier(.2,.7,.2,1)}
  .about-yr.yr-r{animation:aboutYrR .28s cubic-bezier(.2,.7,.2,1)}
}
@media (min-width:900px){
  .about-mq .mq-track{width:auto}
  .about-mq .mq-track>[data-mq-clone]{display:none}
  .about-yrs{display:none}
}
@keyframes aboutYrL{from{opacity:.3;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}   /* 다음 해(왼쪽으로 민 것·오른쪽 탭)는 오른쪽에서 */
@keyframes aboutYrR{from{opacity:.3;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
.about-yrs{display:none}   /* 스크립트가 없으면 연도 탭 없음(세 해가 펼쳐진 원래 화면) — 위 휴대폰 규칙(.about-js)이 보인다 */
@media (prefers-reduced-motion:reduce){.about-yr.yr-l,.about-yr.yr-r{animation:none}}

/* ── 2026-10-28 대표 지시 2건(휴대폰 899px 이하, '[PC 외 버전 - 모바일 등]') ──
   ① 사업영역: 흐르는 줄 대신 홈 '아크링크의 기술력' 구조 — 번호 탭 6칸(.sxn) + 고른 솔루션 카드 한 장(.sxr>.sx, live.js D). 색은 피해 대응 단계 탭(steps.css .help-sxt)과 같은 밝은 카드.
      홈 규칙(ark2026.css .sxn/.sx·live.css .sxt-on — 어두운 바탕용)을 이 상자 안에서만 덮는다. PC 는 격자(#aboutSolMq) 그대로
   ② 오시는 길: 주소 끝 복사 아이콘(.about-copy-ic) — 아래 글자 단추 '주소 복사'는 숨겨 지도 3개가 한 줄 */
.about-sxt,.about-copy-ic{display:none}
@media (max-width:899px){
  .about-sxt{display:block}
  #aboutSolMq{display:none}
  .about-sxt .sxn{margin-bottom:14px}
  .about-sxt .sxn a{background:#fff;border-color:var(--line);color:var(--navy);grid-template-rows:auto auto 1fr}
  .about-sxt .sxn a:hover,.about-sxt .sxn a:focus-visible{background:#EAF1FF;border-color:rgba(52,123,247,.35)}
  .about-sxt .sxn .mono{color:var(--signal);font-weight:700}
  .about-sxt .sxn b{color:var(--navy)}
  .about-sxt .sxn-h{color:var(--mute)}
  .sxt-on .about-sxt .sxn li.on a{background:#EAF1FF;border-color:rgba(52,123,247,.55)}
  .sxt-on .about-sxt .sxn li.on b{color:var(--navy)}
  .about-sxt .sxn>li[hidden],.about-sxt .sxr>.sx[hidden]{display:none!important}   /* 피해 유형 '딥페이크' — 탭·장을 함께 거른다(about.js 2). 재기(sxt-measure)의 display:grid 보다 앞선다 */
  .about-sxt .sx{display:block;background:none;border:0;border-radius:0;overflow:visible;color:inherit}
  .about-sxt .about-sol-i:hover{transform:none}
  .about-loc-btns .about-copy:not(.about-copy-ic){display:none}
  .about-copy-ic{display:inline-grid;place-items:center;vertical-align:middle;position:relative;width:34px;height:34px;margin:-5px 0 -3px 8px;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);cursor:pointer;font:inherit}
  .about-copy-ic::after{content:"";position:absolute;inset:-5px}   /* 누를 자리 44px */
  .about-copy-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .about-copy-ic .ic-ok{display:none}
  .about-copy-ic.is-done{color:var(--signal);border-color:var(--signal)}
  .about-copy-ic.is-done .ic-cp{display:none}
  .about-copy-ic.is-done .ic-ok{display:block}
  .about-press-head>p:not(.eyebrow){justify-self:stretch}   /* '수상까지,' 줄바꿈 뒤 둘째 줄이 한 번 더 접혔다 — 문단 폭이 첫 줄(280px)에 맞춰 줄고 둘째 줄이 소수점 차로 넘침(2026-10-28 실측). 구간 폭 전체로 */
}