/* 에디토리얼: 기업·기관 공식 사이트용 층(2.1~). 문서는 docs/18_editorial.md, 사진은 docs/19_imagery.md.
   코어(layout·components·sections·fx) 위에 얹는다. 색은 역할 토큰만, 움직임은 transform·opacity 만.
   - 항상 어두운 무대 .surface-deep: 안에서 역할 토큰을 다시 정의해 버튼·배지·아코디언 같은 코어 부품이 그대로 어두운 면에 맞는다.
   - 에디토리얼 머리 .ed-head · 번호 라벨 .ed-label · 로고 모티프(.motif-bar 막대, .motif-dot 정사각 점)
   - 줄 마스크 리빌 [data-reveal="mask"] > .mline > .mline__in
   - 픽셀 필드 .pixelfield[data-pixelfield] (캔버스, editorial.js)
   - 격자선 .gridlines · 큰 첫 화면 .hero-ed · 첫 화면 바로가기 .ed-links
   - 펼치는 패널 .xpanels · 스크롤 진행 단계 .track · 원칙 목록 .tenets · 화살표 링크 .arrow-link
   - 로고 마스크 .logo-mark (코어 .logos·.ticker 안) · 기술 그림 .viz-* · 어두운 마지막 권유 .cta-deep · 어두운 푸터 .footer--deep */

/* 목록형 부품은 바깥 여백을 0 으로 두되 우선순위를 0 으로 둔다(:where). 섹션 머리 아래 간격(section-body)이 이긴다. */
:where(.ed-links,.logo-grid,.xpanels,.track__list,.tenets,.ed-rows,.figures,.index-list,.sectors,.pipeline){margin:0}

/* ══ 항상 어두운 무대 ═══════════════════════════════════════
   surface-invert 는 다크 모드에서 밝은 판으로 뒤집히지만, surface-deep 은 두 테마 모두 남색 무대로 남는다.
   안쪽에서 역할 토큰을 다시 묶으므로 코어 부품(.btn--secondary .badge .accordion .eyebrow …)이 저절로 맞는다. */
.surface-deep{
  --canvas:var(--deep);--canvas-alt:var(--deep-alt);--canvas-sunken:var(--deep);
  --surface:var(--deep-alt);--surface-alt:var(--deep-raised);--surface-raised:var(--deep-raised);
  --ink:var(--deep-ink);--ink-body:var(--deep-ink-body);--ink-muted:var(--deep-ink-muted);--ink-subtle:var(--deep-ink-muted);
  --line:var(--deep-line);--line-strong:var(--deep-line-strong);
  --tint:var(--deep-tint);--tint-hover:var(--deep-tint-hover);--tint-active:var(--deep-tint-hover);
  --accent-text:var(--deep-accent);--accent-soft:var(--deep-accent-soft);--focus:var(--deep-accent);
  --brand-ink:var(--deep-ink);
  background:var(--deep);color:var(--deep-ink-body);color-scheme:dark;position:relative;isolation:isolate;overflow:clip}
.surface-deep :where(h1,h2,h3,h4){color:var(--deep-ink)}
.surface-deep .btn--invert{background:var(--deep-ink);color:var(--deep)}

/* 내비가 어두운 무대 위에 있을 때(editorial.js 가 [data-nav-tone="deep"] 구역을 보고 data-tone 을 붙인다) */
/* 톤은 내비 막대의 맨 위 조각(로고·메뉴 이름·버튼)에만 건다. 펼쳐지는 메가 메뉴 패널은 밝은 면 그대로 둔다. */
.nav[data-tone="deep"] :is(.nav__brand,.nav__menu > .nav__item > .nav__link,.nav__actions){--ink:var(--deep-ink);--ink-body:var(--deep-ink-body);--ink-muted:var(--deep-ink-muted);
  --tint:var(--deep-tint);--tint-hover:var(--deep-tint-hover);--tint-active:var(--deep-tint-hover);--line:var(--deep-line);
  --canvas:var(--deep);--brand-ink:var(--deep-ink)}
.nav[data-tone="deep"]{color-scheme:dark}
.nav[data-tone="deep"]::before{background:color-mix(in srgb,var(--deep) 96%,transparent);box-shadow:inset 0 -1px 0 var(--deep-line)}
.nav[data-tone="deep"] .btn--invert{background:var(--deep-ink);color:var(--deep)}
.nav .nav__link,.nav .nav__brand{transition:color var(--d-3) var(--ease-inout),background-color var(--d-2) var(--ease-inout)}

/* ══ 브랜드 로고(인라인 SVG) ═════════════════════════════════
   brand_logo 헬퍼가 브랜드 슬롯 SVG(images/ds/brand/*.svg)를 인라인으로 그린다. 그림 속 조각에 클래스를 달아 두면
   먹색(.logo__ink)은 currentColor(--brand-ink), 강조 조각(.logo__accent)은 --brand-accent 로 칠해져 다크·어두운 무대에서 저절로 뒤집힌다.
   SVG 안 fill 속성은 <img> 로 쓸 때의 기본색이고, 인라인이면 아래 규칙이 이긴다.
   조각 묶음: .logo__mark(심볼·글자 로고) .logo__type(곁 글자). 로고마다 다른 움직임은 브랜드 슬롯 brand.css 에 둔다. */
.logo{display:inline-flex;align-items:center;height:var(--logo-h,26px);color:var(--brand-ink);flex:none;line-height:0}
.logo--mark{height:var(--logo-h,22px)}
.logo__svg{display:block;height:100%;width:auto;overflow:visible}
.logo__ink{fill:currentColor}
.logo__accent{fill:var(--brand-accent)}
.surface-deep .logo__accent,.nav[data-tone="deep"] .logo__accent,.footer--deep .logo__accent{fill:var(--deep-accent)}
/* 처음 한 번 조립(.logo--assemble): 심볼 조각이 차례로 올라오고 곁 글자가 뒤따른다(조각 순서대로, 최대 10개) */
@media (prefers-reduced-motion:no-preference){
  .logo--assemble .logo__mark > *{animation:logo-up var(--d-6) var(--ease-out) both}
  .logo--assemble .logo__mark > :nth-child(2){animation-delay:40ms}
  .logo--assemble .logo__mark > :nth-child(3){animation-delay:80ms}
  .logo--assemble .logo__mark > :nth-child(4){animation-delay:120ms}
  .logo--assemble .logo__mark > :nth-child(5){animation-delay:160ms}
  .logo--assemble .logo__mark > :nth-child(6){animation-delay:200ms}
  .logo--assemble .logo__mark > :nth-child(7){animation-delay:240ms}
  .logo--assemble .logo__mark > :nth-child(8){animation-delay:280ms}
  .logo--assemble .logo__mark > :nth-child(n+9){animation-delay:320ms}
  .logo--assemble .logo__type{animation:logo-fade var(--d-7) var(--ease-out) 360ms both}
}
.logo__mark > *,.logo__type{transform-box:fill-box;transform-origin:50% 50%}
@keyframes logo-up{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes logo-fade{from{opacity:0;transform:translateX(-2%)}to{opacity:1;transform:none}}
/* 글자 로고 마스크(.brand__word)도 어두운 무대에서는 밝게 */
:is(.surface-deep,.nav[data-tone="deep"] .nav__brand){--brand-word-1:var(--deep-ink);--brand-word-2:var(--deep-ink)}

/* ══ 로고 모티프 ═════════════════════════════════════════
   .motif-bar: 로고에서 가져온 짧은 막대(기본 모양은 오른쪽으로 기운 평행사변형, brand.css 의 --motif-clip 으로 바꾼다)
   .motif-dot: 정사각 점. 큰 제목의 마침표 자리에 두면 브랜드 서명이 된다(--blink 면 커서처럼 깜빡). 모양은 --motif-dot-radius */
.motif-bar{display:inline-block;flex:none;width:calc(var(--motif-h,.62em) * 1.6);height:var(--motif-h,.62em);background:var(--brand-accent);
  clip-path:var(--motif-clip,polygon(58% 0,100% 0,42% 100%,0 100%))}
.surface-deep .motif-bar{background:var(--deep-accent)}
.motif-dot{display:inline-block;flex:none;width:var(--dot,.2em);height:var(--dot,.2em);margin-left:.06em;background:var(--brand-accent);
  border-radius:var(--motif-dot-radius,0);vertical-align:baseline}
.surface-deep .motif-dot{background:var(--deep-accent)}
@media (prefers-reduced-motion:no-preference){
  .motif-dot--blink{animation:dot-blink calc(var(--d-7) * 1.2) steps(1,end) var(--d-7) infinite}
  [data-fx-idle] .motif-dot--blink{animation-play-state:paused}
}
@keyframes dot-blink{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* ══ 번호 라벨 · 에디토리얼 머리 ══════════════════════════════
   <p class="ed-label"><span class="ed-label__no">02</span><span class="ed-label__text">사업 분야</span></p>
   번호와 글 사이는 작은 사선. 섹션마다 붙이는 배지가 아니라 문서의 장 번호다(한 섹션 한 번, 페이지 순서대로). */
.ed-label{display:inline-flex;align-items:center;gap:var(--s-10);margin:0;
  font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;letter-spacing:.02em;color:var(--ink-muted)}
.ed-label__no{color:var(--accent-text);font-weight:700;font-variant-numeric:tabular-nums}
.ed-label__no::after{content:"";display:inline-block;width:11px;height:7px;margin-left:var(--s-10);vertical-align:1px;
  background:currentColor;clip-path:var(--motif-clip,polygon(58% 0,100% 0,42% 100%,0 100%))}
.ed-label--en{text-transform:uppercase;letter-spacing:.14em;font-size:var(--t-micro)}

.ed-head{display:grid;gap:var(--s-20);align-items:start}
.ed-head__body{display:flex;flex-direction:column;gap:var(--s-20);max-width:52rem}
.ed-head__title{margin:0;color:var(--ink);text-wrap:balance;word-break:keep-all}
.ed-head__lede{margin:0;max-width:40rem;color:var(--ink-muted);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all}
.ed-head__aside{display:flex;align-items:flex-end}
@media (min-width:1024px){
  .ed-head{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--s-40)}
  .ed-head__label{padding-top:var(--s-12)}
  /* 오른쪽 링크가 있는 머리도 두 칸(3:9) 그대로. 링크는 본문 칸 오른쪽 아래에 겹쳐 두고 글은 그 폭만큼 비켜 준다(제목 세로선이 다른 장과 같다) */
  .ed-head--split .ed-head__aside{grid-column:2;justify-self:end;margin-top:calc(var(--s-16) * -1)}
}
@media (min-width:1280px){
  .ed-head--split .ed-head__body{grid-column:2;grid-row:1;padding-right:calc(25% + var(--s-24))}
  .ed-head--split .ed-head__aside{grid-row:1;align-self:end;margin-top:0}
}
.ed-head--center{justify-items:center;text-align:center}
.ed-head--center .ed-head__body{align-items:center}
@media (min-width:1024px){.ed-head--center{grid-template-columns:minmax(0,1fr)}}

/* ══ 줄 마스크 리빌 ═══════════════════════════════════════
   <h2 data-reveal="mask"><span class="mline"><span class="mline__in">첫 줄</span></span>…</h2>
   줄마다 아래에서 올라온다(80ms 간격, --i 는 editorial.js 가 붙인다). 첫 화면이면 관찰을 기다리지 않고 바로. */
.mline{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mline__in{display:block}
html.js [data-reveal="mask"]{opacity:1;transform:none}
html.js [data-reveal="mask"] .mline__in{transform:translate3d(0,108%,0)}
html.js [data-reveal="mask"]:not(.is-done) .mline__in{transition:transform var(--d-7) var(--ease-out) calc(var(--i,0) * 90ms)}
html.js [data-reveal="mask"].is-in .mline__in{transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-reveal="mask"] .mline__in{transform:none !important;transition:none !important}}

/* 서서히 또렷해지는 등장(흐림이 걷힌다). 큰 문장 한두 곳에만 */
html.js [data-reveal="focus"]{--reveal-y:0px;filter:blur(10px);opacity:0}
html.js [data-reveal="focus"]:not(.is-done){transition:opacity var(--d-7) var(--ease-out),filter var(--d-7) var(--ease-out)}
html.js [data-reveal="focus"].is-in{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){html.js [data-reveal="focus"]{filter:none !important}}

/* ══ 격자선 · 십자 표식 ════════════════════════════════════
   설계 도면처럼 컨테이너 열에 맞춘 세로선. 첫 화면·어두운 무대에 한 번씩. 색은 --line 을 따른다. */
.gridlines{position:absolute;inset:0;z-index:0;pointer-events:none}
.gridlines__in{height:100%;margin-inline:auto;max-width:calc(var(--w-wide) + 80px);padding-inline:20px}
@media (min-width:768px){.gridlines__in{padding-inline:32px}}
@media (min-width:1280px){.gridlines__in{padding-inline:40px}}
.gridlines__in::before{content:"";display:block;height:100%;border-inline:1px solid var(--line);opacity:.6}

.gridlines--fade{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.cross{position:absolute;width:13px;height:13px;pointer-events:none;color:var(--line-strong)}
.cross::before,.cross::after{content:"";position:absolute;background:currentColor}
.cross::before{left:6px;top:0;width:1px;height:13px}
.cross::after{top:6px;left:0;height:1px;width:13px}

/* ══ 픽셀 필드 ═══════════════════════════════════════════
   정사각 칸이 천천히 흐르는 데이터처럼 밝아졌다 어두워진다. 마우스 가까운 칸은 강조색으로 켜진다.
   <div class="pixelfield" data-pixelfield data-pixelfield-focus="0.72,0.38" aria-hidden="true"></div>
   화면 밖·탭 숨김이면 멈추고, 모션 축소면 한 장면만 그린다. 색은 --pf-ink(밝은 칸)·--pf-accent(켜진 칸). */
.pixelfield{position:absolute;inset:0;z-index:0;pointer-events:none;--pf-ink:var(--deep-ink);--pf-accent:var(--deep-accent)}
.pixelfield canvas{display:block;width:100%;height:100%}
.pixelfield--light{--pf-ink:var(--ink);--pf-accent:var(--accent)}
.pixelfield--soft{opacity:.55}

/* ══ 사진 배경 .photo-bg ════════════════════════════════════
   어두운 무대 뒤에 깐 사진. 글이 있는 쪽은 무대 색으로 덮어 읽히게 하고(--from: 덮는 방향), 사진은 무대 색에 맞춰 살짝 가라앉힌다.
   <div class="photo-bg photo-bg--right"><img …></div>  --right: 왼쪽에 글, 오른쪽에 사진 · --full: 전체를 고르게 덮음 */
.photo-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.photo-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);filter:saturate(.8) brightness(.85)}
.photo-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 88%,transparent) 32%,color-mix(in srgb,var(--deep) 40%,transparent) 62%,color-mix(in srgb,var(--deep) 18%,transparent) 100%),
             linear-gradient(0deg,var(--deep) 0%,transparent 30%)}
.photo-bg--full::after{background:linear-gradient(0deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 70%,transparent) 45%,color-mix(in srgb,var(--deep) 55%,transparent) 100%)}
@media (max-width:767px){
  .photo-bg::after{background:linear-gradient(0deg,var(--deep) 12%,color-mix(in srgb,var(--deep) 86%,transparent) 48%,color-mix(in srgb,var(--deep) 40%,transparent) 78%,color-mix(in srgb,var(--deep) 30%,transparent) 100%)}
}
/* 스크롤에 맞춰 사진이 아주 천천히 밀린다(data-parallax 를 img 에) */

/* ══ 사진 틀 .media-frame ═══════════════════════════════════
   본문 속 사진 한 장. 모서리·비율을 고정하고, 보이면 덮개가 걷히며 사진이 살짝 커졌다 제자리로(.is-in, data-reveal 과 함께).
   <figure class="media-frame media-frame--4x3" data-reveal="frame"><img …><figcaption class="media-frame__cap">…</figcaption></figure> */
/* 바깥 여백 0 은 :where 로(특정도 0). 직접 쓰면 .section-body 같은 간격 클래스를 지워 사진이 제목에 붙는다 */
:where(.media-frame){margin:0}
.media-frame{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--surface-alt);aspect-ratio:var(--ar,4 / 3);isolation:isolate}
.media-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.media-frame--4x3{--ar:4 / 3}.media-frame--3x2{--ar:3 / 2}.media-frame--16x9{--ar:16 / 9}.media-frame--4x5{--ar:4 / 5}.media-frame--3x4{--ar:3 / 4}.media-frame--1x1{--ar:1}
.media-frame--fill{aspect-ratio:auto;height:100%;min-height:320px}
.media-frame__cap{position:absolute;left:var(--s-16);bottom:var(--s-16);z-index:1;display:inline-flex;align-items:center;gap:var(--s-8);
  padding:var(--s-6) var(--s-12);border-radius:var(--r-sm);background:color-mix(in srgb,var(--deep) 72%,transparent);color:var(--deep-ink);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:var(--t-caption);line-height:var(--t-caption-lh)}
.media-frame__cap .motif-dot{--dot:6px;margin:0}
html.js [data-reveal="frame"]{--reveal-y:0px;opacity:1;transform:none}
html.js [data-reveal="frame"]::after{content:"";position:absolute;inset:0;z-index:2;background:var(--canvas);transform-origin:top;pointer-events:none}
html.js [data-reveal="frame"] img{transform:scale(1.12)}
html.js [data-reveal="frame"]:not(.is-done)::after{transition:transform var(--d-7) var(--ease-emph)}
html.js [data-reveal="frame"]:not(.is-done) img{transition:transform calc(var(--d-7) * 1.6) var(--ease-out)}
html.js [data-reveal="frame"].is-in::after{transform:scaleY(0)}
html.js [data-reveal="frame"].is-in img{transform:none}
.surface-deep [data-reveal="frame"]::after{background:var(--deep)}
.surface-alt [data-reveal="frame"]::after{background:var(--canvas-alt)}
@media (prefers-reduced-motion:reduce){html.js [data-reveal="frame"]::after{display:none}html.js [data-reveal="frame"] img{transform:none}}

/* ══ 사진 모음 .mosaic ═══════════════════════════════════════
   크기가 다른 사진 서너 장. 넓은 화면 12칸 격자(주인공 7칸 + 세로 5칸 + 아래 두 장), 좁은 화면 두 칸. */
.mosaic{display:grid;gap:var(--s-12);grid-template-columns:repeat(2,minmax(0,1fr))}
.mosaic > :first-child{grid-column:1 / -1}
@media (min-width:1024px){
  .mosaic{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-16)}
  .mosaic > *{grid-column:span 4}
  .mosaic > :nth-child(1){grid-column:span 7;grid-row:span 2}
  .mosaic > :nth-child(2){grid-column:span 5}
  .mosaic > :nth-child(3){grid-column:span 5}
  .mosaic.mosaic--row > *{grid-column:span 4;grid-row:auto}
}

/* ══ 번호 목록 .numlist ═════════════════════════════════════
   번호 · 제목 · 한 줄이 가는 선 사이로 쌓인다. 사진 옆 좁은 칸에 원칙·방식을 나열할 때 */
.numlist{display:grid;margin:0;padding:0;list-style:none;width:100%;border-top:1px solid var(--line)}
.numlist > li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-12);padding:var(--s-20) 0;border-bottom:1px solid var(--line)}
.numlist__no{font-size:var(--t-caption);line-height:var(--t-heading-md-lh);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.numlist__title{margin:0;color:var(--ink);word-break:keep-all}
.numlist__desc{margin:var(--s-6) 0 0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);word-break:keep-all}

/* 하위 페이지 머리 낮은 변형(사진 없이 글만인 법무·안내 페이지) */
.page-hero-ed.page-hero-ed--compact{min-height:0}
@media (min-width:1024px){.page-hero-ed.page-hero-ed--compact{min-height:0;padding-bottom:var(--s-80)}}

/* ══ 연구 카드 .rcard ═══════════════════════════════════════
   위에 그림(오브제 사진), 아래 분야 · 제목 · 한 줄. 올리면 그림이 살짝 커진다. 연구 분야·기술 영역 목록 */
.rcards{display:grid;gap:var(--s-16)}
/* 좁은 화면: 옆으로 넘기는 띠(카드 폭 78%, 다음 카드가 살짝 보인다). --swipe 를 붙였을 때만 */
@media (max-width:639px){
  .rcards--swipe{display:flex;gap:var(--s-12);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--s-20) * -1);padding-inline:var(--s-20);scroll-padding-inline:var(--s-20)}
  .rcards--swipe::-webkit-scrollbar{display:none}
  .rcards--swipe > *{flex:0 0 78%;scroll-snap-align:start}
}
@media (min-width:640px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.rcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-20)}}
.rcard{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line);color:inherit;
  transition:box-shadow var(--d-3) var(--ease-inout),transform var(--d-4) var(--ease-out)}
.surface-alt .rcard{box-shadow:none}
.surface-deep .rcard{background:var(--deep-alt);box-shadow:0 0 0 1px var(--deep-line)}
.rcard__media{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:var(--deep)}
.rcard__media img{width:100%;height:100%;object-fit:cover;transition:transform calc(var(--d-7) * 1.2) var(--ease-out)}
.rcard__body{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-24) var(--s-24) var(--s-28)}
.rcard__kicker{font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.rcard__title{margin:0;color:var(--ink);word-break:keep-all}
.rcard__desc{margin:0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);word-break:keep-all}
@media (hover:hover){a.rcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg),0 0 0 1px var(--line)}a.rcard:hover .rcard__media img{transform:scale(1.04)}}

/* ══ 사진 + 글 두 칸 .feature-split ══════════════════════════
   한쪽 큰 사진, 한쪽 장 번호 · 제목 · 설명 · 목록. --flip 이면 좌우 바꿈. 사진과 글의 위아래 중심을 맞춘다 */
.feature-split{display:grid;gap:var(--s-40);align-items:center}
@media (min-width:1024px){.feature-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-80)}
  .feature-split--flip > :first-child{order:2}}
.feature-split__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-20)}
/* 좁은 화면: 장 이름·제목을 사진보다 먼저, 사진은 화면을 다 덮지 않는 3:2 */
@media (max-width:1023px){.feature-split > .feature-split__body{order:-1}.feature-split > .media-frame{--ar:3 / 2}}
.feature-split__title{margin:0;color:var(--ink);word-break:keep-all;text-wrap:balance}
.feature-split__desc{margin:0;color:var(--ink-muted);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all;max-width:34rem}

/* 빛 한 덩어리(무대 오른쪽 위). 흐림 필터 없이 그라데이션으로 그린다 */
.deep-glow{position:absolute;z-index:0;pointer-events:none;width:min(1100px,140vw);aspect-ratio:1;right:-28%;top:-48%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--deep-glow) 46%,transparent),color-mix(in srgb,var(--deep-glow) 14%,transparent) 45%,transparent)}
.deep-glow--bl{right:auto;top:auto;left:-36%;bottom:-60%;opacity:.6}

/* ══ 사진 메가 메뉴 .mega--media ═════════════════════════════
   코어 .mega 의 변형. 왼쪽 같은 크기 사진 카드 셋(사진 16:10 → 이름 + 화살표 → 한 줄), 오른쪽 전체 높이 소식 칸(사진 위 글).
   모든 칸이 같은 높이로 늘어나 위아래 선이 맞는다. 넓은 화면 전용(좁은 화면은 서랍).
   <div class="mega mega--media"><div class="mega__grid"><ul class="mega__cards"><li><a class="mega__card">…</a></li></ul><a class="mega__feature">…</a></div></div> */
.mega.mega--media{width:min(1040px,calc(100vw - var(--s-48)));padding:var(--s-10)}
.mega--media .mega__grid{grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--s-10);align-items:stretch}
.mega__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin:0;padding:0;list-style:none}
.mega__cards > li{display:flex}
.mega__card{display:flex;flex:1;flex-direction:column;gap:var(--s-12);padding:var(--s-8) var(--s-8) var(--s-16);border-radius:var(--r-lg);color:var(--ink);
  transition:background-color var(--d-2) var(--ease-inout)}
.mega__card:hover,.mega__card:focus-visible{background:var(--tint)}
.mega__card[aria-current="page"]{background:var(--accent-soft)}
.mega__thumb{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--r-md);background:var(--canvas-alt)}
.mega__thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);transition:transform var(--d-6) var(--ease-out)}
.mega__card:hover .mega__thumb img{transform:scale(1.05)}
.mega__card-body{display:flex;flex-direction:column;gap:var(--s-4);padding-inline:var(--s-4)}
.mega__card-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8);
  font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:650;color:var(--ink)}
.mega__card-title .ico{flex:none;color:var(--ink-subtle);transition:transform var(--d-3) var(--ease-out),color var(--d-2) var(--ease-inout)}
.mega__card:hover .mega__card-title .ico{transform:translateX(3px);color:var(--accent-text)}
.mega__card .mega__desc{word-break:keep-all}
.mega__feature{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-8);
  min-height:100%;padding:var(--s-20);border-radius:var(--r-lg);background:var(--deep);color:var(--deep-ink)}
.mega__feature-photo{position:absolute;inset:0;z-index:-1}
.mega__feature-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);transition:transform var(--d-7) var(--ease-out)}
.mega__feature-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,color-mix(in srgb,var(--deep) 88%,transparent) 72%)}
.mega__feature:hover .mega__feature-photo img{transform:scale(1.05)}
.mega__feature .mega__eyebrow{color:var(--deep-accent)}
.mega__feature .mega__aside-title{color:var(--deep-ink)}
.mega__feature .mega__aside-more{margin-top:var(--s-4);color:var(--deep-ink-body)}
.nav__item[data-open] .mega__cards > li,.nav__item[data-open] .mega__feature{animation:rise var(--d-4) var(--ease-out) both}
.nav__item[data-open] .mega__cards > li:nth-child(2){animation-delay:calc(var(--d-1) / 3)}
.nav__item[data-open] .mega__cards > li:nth-child(3){animation-delay:calc(var(--d-1) * 2 / 3)}
.nav__item[data-open] .mega__feature{animation-delay:var(--d-1)}
@media (prefers-reduced-motion:reduce){.mega__thumb img,.mega__feature-photo img{transition:none}}

/* ══ 큰 첫 화면 .hero-ed ═══════════════════════════════════
   어두운 무대 위 큰 제목 + 한 줄 + 버튼, 바닥에 바로가기 줄. 첫 화면 높이(--fx-vh)를 채운다(스크롤 장면이 아니라 한 화면 구성). */
.hero-ed{position:relative;overflow:clip;display:flex;flex-direction:column;
  min-height:max(640px,var(--fx-vh,100svh));padding-top:calc(var(--nav-h) + var(--s-48))}
.hero-ed > .container{position:relative;z-index:1}
.hero-ed__main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s-40) var(--s-48)}
.hero-ed__kicker{display:flex;align-items:center;gap:var(--s-12);margin:0 0 var(--s-28);
  font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.hero-ed__kicker .motif-bar{--motif-h:9px}
/* 긴 영문 이름은 좁은 화면에서 두 줄로 벌어지므로 짧은 이름으로 바꾼다(<span class="hero-ed__kicker-full">…</span><span class="hero-ed__kicker-short" aria-hidden="true">…</span>) */
.hero-ed__kicker-short{display:none}
@media (max-width:639px){.hero-ed__kicker-full{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hero-ed__kicker-short{display:inline}}
.t-hero{font-size:clamp(44px,8.2vw,124px);line-height:1.02;letter-spacing:-.045em;font-weight:720;margin:0;color:var(--ink);word-break:keep-all}
.t-hero .motif-dot{--dot:.15em;margin-left:.04em}
/* 한 줄이 열 글자 안팎으로 긴 제목: 휴대폰에서도 줄마다 한 줄로(390px 에서 약 41px), 넓은 화면은 96px 까지 */
.t-hero--long{font-size:clamp(34px,10.4vw,96px);letter-spacing:-.04em}
.t-hero--long .mline__in{white-space:nowrap}
.hero-ed__lede{margin:var(--s-32) 0 0;max-width:36rem;color:var(--ink-body);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all;text-wrap:balance}
@media (min-width:1024px){.hero-ed__lede{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:400;max-width:40rem}}
.hero-ed__actions{margin-top:var(--s-40);display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-16);align-items:center}
.hero-ed__foot{position:relative;z-index:1}
@media (max-width:640px){.hero-ed{padding-top:calc(var(--nav-h) + var(--s-24))}.hero-ed__kicker{margin-bottom:var(--s-20)}}
/* 첫 화면 사진은 처음 한 번 아주 천천히 다가온다(2.4초). 모션 축소면 그대로 */
.hero-ed > .photo-bg img{animation:hero-photo-in 2.4s var(--ease-out) both}
@keyframes hero-photo-in{from{transform:scale(1.07);opacity:.35}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-ed > .photo-bg img{animation:none}}
/* 사진 첫 화면의 픽셀 필드는 휴대폰에서 끈다(사진 띠가 작아 얼굴 위로 칸이 겹친다) */
@media (max-width:639px){.hero-ed > .photo-bg ~ .pixelfield{display:none}}
/* 휴대폰: 사진을 위쪽 띠로 또렷하게 보이고, 글은 그 아래 무대 위에 둔다(사진 전체를 어둡게 덮으면 사진이 거의 보이지 않는다) */
@media (max-width:767px){
  .hero-ed > .photo-bg{bottom:auto;height:min(62%,560px)}
  .hero-ed > .photo-bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 58%,transparent) 0%,color-mix(in srgb,var(--deep) 8%,transparent) 26%,color-mix(in srgb,var(--deep) 30%,transparent) 58%,var(--deep) 100%)}
  .hero-ed > .photo-bg img{filter:saturate(.85) brightness(.92)}
  .hero-ed__main{justify-content:flex-end;padding-top:var(--s-160)}
}

/* 첫 화면 바닥 바로가기 줄: 번호 · 이름 · 한 줄 · 화살표. 위에 가는 선, 올리면 선이 강조색으로 차오른다 */
.ed-links{display:grid;gap:0;border-top:1px solid var(--line);padding:0;list-style:none}
@media (min-width:768px){.ed-links{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.ed-links__item{position:relative}
.ed-links__a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-4) var(--s-16);align-items:start;
  padding:var(--s-20) 0;color:var(--ink);min-height:44px}
@media (min-width:768px){.ed-links__a{padding:var(--s-24) var(--s-24) var(--s-28) 0}.ed-links__item + .ed-links__item .ed-links__a{padding-left:var(--s-24)}
  .ed-links__item + .ed-links__item{border-left:1px solid var(--line)}}
@media (max-width:767px){.ed-links__item + .ed-links__item{border-top:1px solid var(--line)}}
.ed-links__a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent-text);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d-5) var(--ease-out)}
.ed-links__no{font-size:var(--t-caption);line-height:var(--t-body-md-lh);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.ed-links__title{font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:650}
.ed-links__desc{grid-column:2;font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh);color:var(--ink-muted);word-break:keep-all}
.ed-links__arrow{grid-row:1 / span 2;grid-column:3;align-self:center;color:var(--ink-muted);transition:transform var(--d-3) var(--ease-out),color var(--d-3) var(--ease-out)}
@media (hover:hover){
  .ed-links__a:hover::before{transform:scaleX(1)}
  .ed-links__a:hover .ed-links__arrow{transform:translateX(4px);color:var(--ink)}
}
.ed-links__a:focus-visible::before{transform:scaleX(1)}
@media (max-width:767px){.ed-links__desc{display:none}.ed-links__a{align-items:center}.ed-links__arrow{grid-row:1}}

/* 아래로 안내 */
.scroll-cue{display:inline-flex;align-items:center;gap:var(--s-10);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.scroll-cue__bar{position:relative;width:1px;height:36px;background:var(--line-strong);overflow:hidden}
.scroll-cue__bar::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){.scroll-cue__bar::after{animation:cue-run calc(var(--d-7) * 2.2) var(--ease-inout) infinite}
  [data-fx-idle] .scroll-cue__bar::after{animation-play-state:paused}}
@keyframes cue-run{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* ══ 화살표 링크 ═════════════════════════════════════════ */
.arrow-link{display:inline-flex;align-items:center;gap:var(--s-8);min-height:44px;font-weight:600;color:var(--ink);
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition:background-size var(--d-4) var(--ease-out)}
.arrow-link .ico{transition:transform var(--d-3) var(--ease-out)}
@media (hover:hover){.arrow-link:hover{background-size:calc(100% - 28px) 1px}.arrow-link:hover .ico{transform:translateX(4px)}}
.arrow-link--accent{color:var(--accent-text)}

/* ══ 로고 마스크 ═════════════════════════════════════════
   여러 기관 로고를 한 색(--ink-muted)으로 맞춰 흐르는 띠(코어 .logos·.ticker)에 둔다. 올리면 진해진다.
   <span class="logo-mark" role="img" aria-label="기관 이름" style="--logo:url("...");--ar:4.99"></span> */
.logo-mark{display:block;height:calc(var(--logo-h,34px) * var(--logo-k,1));aspect-ratio:var(--ar,4);background:var(--ink-muted);
  -webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat;
  transition:background-color var(--d-3) var(--ease-inout);flex:none}
.logo-mark--tall{--logo-h:44px}
@media (hover:hover){.logos__item:hover .logo-mark{background:var(--ink)}}
/* 좁은 화면은 비율로 줄인다(헬퍼가 로고마다 --logo-h 를 넘겨도 따라오게) */
@media (max-width:640px){.logo-mark{--logo-k:.76}}
/* 로고 띠(editorial/_logos): 제목 없이 로고만, 위아래 가는 선 사이에서 흐른다 */
.ed-logos{padding-block:var(--s-40);border-bottom:1px solid var(--line)}
.ed-logos .ticker{margin-top:0}
.ed-logos .logos__group{gap:var(--s-80);padding-right:var(--s-80)}
.ed-logos .logos__item{height:var(--s-56)}
@media (max-width:640px){.ed-logos{padding-block:var(--s-28)}.ed-logos .logos__group{gap:var(--s-48);padding-right:var(--s-48)}}
/* 로고 줄(흐르지 않는 격자) */
.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;list-style:none;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (min-width:768px){.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.logo-grid__item{display:grid;place-items:center;min-height:132px;padding:var(--s-24);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:1024px){.logo-grid__item{min-height:168px}}
.logo-grid .logo-mark{width:min(calc(var(--logo-h) * var(--logo-k,1) * var(--ar)),100%);height:auto}

/* ══ 펼치는 패널 .xpanels ═══════════════════════════════════
   넓은 화면: 가로로 놓인 칸 중 하나가 넓게 펼쳐지고 나머지는 좁게 접힌다(올리거나 초점이 오면 그 칸이 펼쳐진다).
   좁은 화면: 위아래로 쌓이고 모두 펼친 모습. 칸 전체가 링크다. */
.xpanels{display:grid;gap:var(--s-12);padding:0;list-style:none}
.xpanel{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--surface);color:var(--ink-body);isolation:isolate;
  box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--d-3) var(--ease-inout)}
.surface-base .xpanel{background:var(--surface-alt);box-shadow:none}
.xpanel__a{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:var(--s-28) var(--s-28) 0;color:inherit}
.xpanel__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.xpanel__no{font-size:var(--t-caption);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.xpanel__en{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.xpanel__title{margin:var(--s-32) 0 0;color:var(--ink);word-break:keep-all}
.xpanel__desc{margin:var(--s-12) 0 0;color:var(--ink-muted);max-width:30rem;word-break:keep-all}
.xpanel__list{margin:var(--s-20) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-8)}
.xpanel__list li{display:flex;gap:var(--s-10);align-items:baseline;color:var(--ink-body);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.xpanel__list li::before{content:"";flex:none;width:5px;height:5px;translate:0 -3px;background:var(--accent-text)}
.xpanel__more{display:inline-flex;align-items:center;gap:var(--s-8);margin-top:var(--s-24);min-height:44px;font-weight:600;color:var(--ink);white-space:nowrap}
.xpanel__more .ico{transition:transform var(--d-3) var(--ease-out)}
/* 그림은 칸 바닥에 붙는 띠. 흐름 안에 있어 글·링크와 겹치지 않는다 */
.xpanel__visual{position:relative;flex:none;margin:var(--s-16) calc(var(--s-28) * -1) 0;height:200px;overflow:hidden}
.xpanel--deep{background:var(--deep)}
/* 사진이 깔린 칸: 사진 위에 무대 색을 덮고 글을 흰색으로 */
.xpanel--photo{background:var(--deep);color:var(--deep-ink-body);
  --ink:var(--deep-ink);--ink-body:var(--deep-ink-body);--ink-muted:var(--deep-ink-body);--accent-text:var(--deep-ink);--line:var(--deep-line)}
.xpanel--photo .xpanel__no{opacity:.88}
.xpanel__photo{position:absolute;inset:0;z-index:0}
.xpanel__photo img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);filter:saturate(.8);transition:transform calc(var(--d-7) * 1.4) var(--ease-out)}
.xpanel__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 70%,transparent) 0%,color-mix(in srgb,var(--deep) 25%,transparent) 22%,color-mix(in srgb,var(--deep) 45%,transparent) 50%,color-mix(in srgb,var(--deep) 94%,transparent) 100%)}
@media (min-width:1024px){
  .xpanel--photo:not(.is-active) .xpanel__photo::after{background:color-mix(in srgb,var(--deep) 72%,transparent)}
  .xpanel--photo.is-active .xpanel__photo img{transform:scale(1.03)}
  .xpanel--photo .xpanel__a{justify-content:flex-end;padding-bottom:var(--s-32)}
  .xpanel--photo .xpanel__body{flex:0 0 auto;margin-top:auto}
  .xpanel--photo .xpanel__top{position:absolute;top:var(--s-32);left:var(--s-32);right:var(--s-32)}
}
@media (max-width:1023px){.xpanel--photo .xpanel__a{min-height:460px;justify-content:flex-end;padding-bottom:var(--s-28)}.xpanel--photo .xpanel__top{margin-bottom:auto}
  .xpanel--photo .xpanel__photo::after{background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 70%,transparent) 0%,color-mix(in srgb,var(--deep) 20%,transparent) 20%,color-mix(in srgb,var(--deep) 60%,transparent) 50%,color-mix(in srgb,var(--deep) 96%,transparent) 78%)}}
@media (hover:hover){.xpanel__a:hover .xpanel__more .ico{transform:translateX(4px)}.xpanel:hover{box-shadow:0 0 0 1px var(--line-strong)}}
@media (min-width:1024px){
  .xpanels{display:flex;gap:var(--s-12);min-height:600px}
  .xpanel{flex:1 1 0;min-width:0;transition:flex-grow var(--d-7) var(--ease-out),box-shadow var(--d-3) var(--ease-inout)}
  .xpanel.is-active{flex-grow:2.3}
  .xpanel__a{padding:var(--s-32) var(--s-32) 0}
  .xpanel__body{flex:1;width:min(30rem,calc(var(--xw,600px) - 64px))}
  .xpanel__visual{margin-inline:calc(var(--s-32) * -1);height:220px}
  .xpanel__desc,.xpanel__list,.xpanel__visual,.xpanel__more{transition:opacity var(--d-4) var(--ease-out),transform var(--d-5) var(--ease-out)}
  .xpanel__detail{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--d-6) var(--ease-out)}
  .xpanel__detail > div{min-height:0;overflow:hidden}
  .xpanel:not(.is-active) .xpanel__detail{grid-template-rows:0fr}
  .xpanel:not(.is-active) .xpanel__desc,.xpanel:not(.is-active) .xpanel__list{opacity:0;transform:translateY(12px);pointer-events:none}
  .xpanel:not(.is-active) .xpanel__visual{opacity:.4}
  .xpanel.is-active .xpanel__desc,.xpanel.is-active .xpanel__list{transition-delay:200ms}
}
@media (prefers-reduced-motion:reduce){.xpanel,.xpanel__desc,.xpanel__list,.xpanel__visual{transition:none}}

/* ══ 스크롤 진행 단계 .track ══════════════════════════════════
   왼쪽 머리는 붙어 따라오고, 오른쪽 단계 목록 옆 세로선이 스크롤만큼 차오른다. 화면 가운데를 지난 단계가 켜진다.
   <div class="track" data-track><div class="track__head">…</div><ol class="track__list"><li class="track__step">…</li></ol></div> */
.track{display:grid;gap:var(--s-48)}
.track__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-24)}
.track__head :where(h2){margin:0}
.track__lede{margin:0;max-width:26rem;color:var(--ink-body);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all}
@media (min-width:1024px){.track{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-80)}
  .track__head{position:sticky;top:calc(var(--nav-h) + var(--s-48));align-self:start}}
.track__list{position:relative;padding:0 0 0 var(--s-40);list-style:none;display:grid;gap:var(--s-48)}
@media (min-width:768px){.track__list{padding-left:var(--s-64);gap:var(--s-64)}}
.track__list::before,.track__fill{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-strong)}
.track__fill{background:var(--accent-text);transform-origin:top;transform:scaleY(var(--p,0));width:2px;left:4.5px}
.track__step{position:relative;transition:opacity var(--d-5) var(--ease-out)}
html.js .track[data-track] .track__step:not(.is-on){opacity:.38}
.track__step::before{content:"";position:absolute;left:calc(var(--s-40) * -1);top:6px;width:11px;height:11px;background:var(--canvas);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background-color var(--d-4) var(--ease-out),box-shadow var(--d-4) var(--ease-out)}
@media (min-width:768px){.track__step::before{left:calc(var(--s-64) * -1)}}
.track__step.is-on::before{background:var(--accent-text);box-shadow:inset 0 0 0 1.5px var(--accent-text)}
.track__no{font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;color:var(--accent-text);letter-spacing:.04em}
.track__title{margin:var(--s-8) 0 0;color:var(--ink);word-break:keep-all}
.track__desc{margin:var(--s-12) 0 0;color:var(--ink-muted);max-width:34rem;word-break:keep-all}
.track__tags{margin:var(--s-16) 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-6)}
.track__tags li{padding:var(--s-4) var(--s-10);border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-body)}
@media (prefers-reduced-motion:reduce){html.js .track[data-track] .track__step:not(.is-on){opacity:1}.track__fill{transform:none}}

/* ══ 원칙 목록 .tenets ════════════════════════════════════
   큰 번호 + 제목 + 한 줄. 가로줄로 나눈다(카드가 아니다). 넓은 화면 2열·4열 */
.tenets{display:grid;padding:0;list-style:none;border-top:1px solid var(--line)}
@media (min-width:768px){.tenets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.tenets--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.tenets--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tenets--3 > .tenet{padding-left:var(--s-28);padding-right:var(--s-28);border-left:0}
  .tenets--3 > .tenet:first-child{padding-left:0}
  .tenets--3 > .tenet + .tenet{border-left:1px solid var(--line)}}
.tenet{padding:var(--s-32) 0 var(--s-40);border-bottom:1px solid var(--line)}
/* 좁은 화면: 두 칸으로 촘촘하게(번호를 작게) */
@media (max-width:767px){
  .tenets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tenet{padding:var(--s-24) var(--s-16) var(--s-24) 0}
  .tenets > .tenet:nth-child(2n){padding-left:var(--s-16);padding-right:0;border-left:1px solid var(--line)}
  .tenet__no{font-size:var(--t-heading-md)}
  .tenet__title{margin-top:var(--s-12)}
  .tenet__desc{font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh)}
}
@media (max-width:479px){
  .tenets{grid-template-columns:minmax(0,1fr)}
  .tenet,.tenets > .tenet:nth-child(2n){padding:var(--s-24) 0;border-left:0}
  .tenet__desc{font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
}
@media (min-width:768px){.tenet{padding:var(--s-40) var(--s-32) var(--s-48) 0}
  .tenets > .tenet:nth-child(2n){padding-left:var(--s-32);border-left:1px solid var(--line)}}
@media (min-width:1200px){.tenets--4 > .tenet{padding-left:var(--s-24);padding-right:var(--s-24)}
  .tenets--4 > .tenet:first-child{padding-left:0}
  .tenets--4 > .tenet + .tenet{border-left:1px solid var(--line)}}
.tenet__no{display:block;font-size:var(--t-display-sm);line-height:1;font-weight:300;letter-spacing:-.03em;color:var(--accent-text)}
.tenet__title{margin:var(--s-24) 0 0;color:var(--ink);word-break:keep-all}
.tenet__desc{margin:var(--s-10) 0 0;color:var(--ink-muted);word-break:keep-all}

/* ══ 두 칸 설명 줄 .ed-rows ══════════════════════════════════
   왼쪽 이름, 오른쪽 설명. 회사 정보·서비스 범위처럼 짧은 정의를 나열할 때 */
.ed-rows{border-top:1px solid var(--line)}
.ed-rows__row{display:grid;gap:var(--s-8);padding:var(--s-24) 0;border-bottom:1px solid var(--line)}
@media (min-width:768px){.ed-rows__row{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-32);padding:var(--s-28) 0}}
.ed-rows__key{margin:0;color:var(--ink);font-weight:650}
.ed-rows__val{margin:0;color:var(--ink-muted);word-break:keep-all}

/* ══ 큰 숫자 띠 .figures ═════════════════════════════════════ */
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
@media (min-width:1024px){.figures{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.figures__item{padding:var(--s-28) var(--s-16) var(--s-32) 0;border-bottom:1px solid var(--line)}
.figures__item + .figures__item{padding-left:var(--s-16)}
@media (max-width:1023px){.figures__item:nth-child(2n){border-left:1px solid var(--line);padding-left:var(--s-16)}.figures__item:nth-child(2n+1){padding-left:0}}
@media (min-width:1024px){.figures__item + .figures__item{border-left:1px solid var(--line);padding-left:var(--s-24)}}
.figures__value{margin:0;font-size:var(--t-display-md);line-height:1;font-weight:650;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.figures__label{margin:var(--s-12) 0 0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}

/* ══ 어두운 마지막 권유 .cta-deep ══════════════════════════════ */
.cta-deep{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-2xl);padding:var(--s-64) var(--s-24)}
@media (min-width:768px){.cta-deep{padding:var(--s-96) var(--s-64)}}
@media (min-width:1280px){.cta-deep{padding:var(--s-120) var(--s-80)}}
.cta-deep > :not(.pixelfield,.deep-glow,.gridlines,.photo-bg){position:relative;z-index:1}
.cta-deep__title{margin:0;max-width:20em;color:var(--ink);word-break:keep-all;text-wrap:balance}
.cta-deep__lede{margin:var(--s-20) 0 0;max-width:34rem;color:var(--ink-body);word-break:keep-all}
.cta-deep__actions{margin-top:var(--s-40);display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-16);align-items:center}
/* 주버튼 + 화살표 링크 줄: 링크는 테두리가 없어 버튼 안쪽 여백(22px)보다 넓게 띄운다. 좁은 화면은 360px 에서 한 줄에 들도록 16 */
@media (min-width:640px){.hero-ed__actions,.cta-deep__actions{column-gap:var(--s-32)}}
.cta-deep__note{margin:var(--s-20) 0 0;color:var(--ink-muted);font-size:var(--t-body-xs)}

/* ══ 하위 페이지 머리(어두운 무대) .page-hero-ed ════════════════ */
.page-hero-ed{position:relative;overflow:clip;display:flex;align-items:flex-end;min-height:min(640px,calc(var(--fx-vh,100svh) * .78));padding:calc(var(--nav-h) + var(--s-80)) 0 var(--s-64)}
@media (min-width:1024px){.page-hero-ed{min-height:min(720px,calc(var(--fx-vh,100svh) * .82));padding:calc(var(--nav-h) + var(--s-120)) 0 var(--s-96)}}
.page-hero-ed > .container{position:relative;z-index:1}
.page-hero-ed__title{margin:0;max-width:16em;color:var(--ink);word-break:keep-all;text-wrap:balance}
.page-hero-ed__lede{margin:var(--s-24) 0 0;max-width:38rem;color:var(--ink-body);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all;text-wrap:pretty}
@media (min-width:1024px){.page-hero-ed__lede{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:400}}
.page-hero-ed__aside{color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
/* 하위 페이지 안 목차(붙어 따라오는 알약 줄) */
.ed-toc{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);background:color-mix(in srgb,var(--canvas) 95%,transparent);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);box-shadow:inset 0 -1px 0 var(--line)}
.ed-toc__list{display:flex;gap:var(--s-4);margin:0;padding:var(--s-8) 0;list-style:none;overflow-x:auto;scrollbar-width:none}
.ed-toc__list::-webkit-scrollbar{display:none}
@media (max-width:1023px){.ed-toc__list{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--s-40)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--s-40)),transparent);padding-right:var(--s-32)}}
.ed-toc__a{display:inline-flex;align-items:center;height:36px;padding-inline:var(--s-12);border-radius:var(--r-full);white-space:nowrap;
  font-size:var(--t-body-xs);font-weight:500;color:var(--ink-muted);transition:background-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout)}
.ed-toc__a:is([aria-current="true"],[aria-current="page"]){background:var(--ink);color:var(--canvas)}
@media (hover:hover){.ed-toc__a:not([aria-current="true"]):hover{background:var(--tint);color:var(--ink)}}

/* ══ 큰 목록 링크 .index-list ════════════════════════════════
   번호 · 큰 이름 · 한 줄 · 화살표가 한 줄씩. 올리면 면이 아래에서 차오르고 화살표가 밀린다. 사업 분야·직무 목록처럼 갈 곳이 서너 개일 때 */
.index-list{padding:0;list-style:none;border-top:1px solid var(--line)}
.index-list__a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-8) var(--s-20);align-items:center;
  padding:var(--s-28) 0;border-bottom:1px solid var(--line);color:var(--ink);isolation:isolate}
/* 호버 띠는 글자 칸보다 좌우로 16px 넓게(글자가 띠 끝에 붙지 않게). 줄의 글자 정렬선은 장 제목과 그대로 맞춘다 */
.index-list__a::before{content:"";position:absolute;inset:0 calc(var(--s-16) * -1);z-index:-1;background:var(--tint);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--d-4) var(--ease-out)}
.index-list__no{grid-column:1;grid-row:1;align-self:start;padding-top:var(--s-6);font-size:var(--t-caption);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.index-list__title{grid-column:2;grid-row:1;margin:0;color:var(--ink);word-break:keep-all}
.index-list__desc{grid-column:2;margin:0;color:var(--ink-muted);word-break:keep-all}
.index-list__tags{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--s-6);margin:var(--s-4) 0 0;padding:0;list-style:none}
.index-list__tags li{font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
.index-list__tags li + li::before{content:"";display:inline-block;width:3px;height:3px;margin:0 var(--s-8) 3px 0;background:var(--line-strong)}
.index-list__arrow{grid-row:1 / span 3;grid-column:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);transition:transform var(--d-4) var(--ease-out),background-color var(--d-3) var(--ease-inout),color var(--d-3) var(--ease-inout)}
@media (min-width:1024px){
  /* 첫 칸 = 장 머리의 장 번호 칸(3/12, 간격 40)과 같은 폭 → 제목이 장 제목과 같은 세로선 */
  .index-list__a{grid-template-columns:calc(25% - 10px) minmax(0,4fr) minmax(0,5fr) auto;padding:var(--s-40) 0;gap:var(--s-8) var(--s-40)}
  .index-list__no{padding-top:var(--s-10)}
  .index-list__desc,.index-list__tags{grid-column:3}
  .index-list__desc{grid-row:1;align-self:start;padding-top:var(--s-4)}
  .index-list__tags{grid-row:2;align-self:start}
  .index-list__title{grid-column:2;grid-row:1 / span 2;align-self:start}
  .index-list__arrow{grid-column:4;grid-row:1 / span 2;align-self:center}
}
@media (hover:hover){
  .index-list__a:hover::before{transform:scaleY(1)}
  .index-list__a:hover .index-list__arrow{background:var(--accent);color:var(--accent-ink);box-shadow:none;transform:translateX(4px)}
}
.index-list__a:focus-visible::before{transform:scaleY(1)}

/* ══ CI 그림 .ci-figure ═════════════════════════════════════
   큰 로고 위에 요소마다 설명 선을 단다. 보일 때 로고가 조립되고 설명이 차례로 나타난다(줄이기면 완성 모습). */
.ci-figure{position:relative;display:grid;gap:var(--s-32)}
.ci-figure__logo{padding:var(--s-48) var(--s-24);border-radius:var(--r-2xl);background:var(--surface-alt);display:grid;place-items:center}
.surface-alt .ci-figure__logo{background:var(--surface)}
.ci-figure__logo .logo{--logo-h:auto;width:min(560px,100%);height:auto}
.ci-figure__logo .logo__svg{width:100%;height:auto}
@media (min-width:1024px){.ci-figure__logo{padding:var(--s-96) var(--s-64)}}
.ci-figure__notes{display:grid;gap:var(--s-24);margin:0;padding:0;list-style:none}
@media (min-width:768px){.ci-figure__notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ci-note{display:flex;flex-direction:column;gap:var(--s-10)}
.ci-note__swatch{display:flex;align-items:center;gap:var(--s-10);font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.ci-note__swatch i{flex:none;width:28px;height:28px;border-radius:var(--r-xs);background:var(--sw);box-shadow:inset 0 0 0 1px var(--line)}
.ci-note__shape{flex:none;width:44px;height:28px;background:var(--brand-accent)}
.ci-note__shape--bar{clip-path:var(--motif-clip,polygon(58% 0,100% 0,42% 100%,0 100%))}
.ci-note__shape--dot{width:28px}
.ci-note__shape--ink{width:14px;background:var(--brand-ink)}
.ci-note__title{margin:0;color:var(--ink)}
.ci-note__desc{margin:0;color:var(--ink-muted);word-break:keep-all}

/* ══ 두 방식 비교 .vs ════════════════════════════════════════
   항목 · 흔한 방식 · 우리 방식 세 칸 표. 우리 방식 열만 진하게(체크 아이콘 + 글자), 흔한 방식은 흐리게. 좁은 화면은 항목마다 카드로 쌓인다. */
.vs{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.vs caption{caption-side:top;text-align:left}
.vs th,.vs td{padding:var(--s-20) var(--s-16) var(--s-20) 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all}
.vs thead th{padding-block:var(--s-16);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--ink-muted)}
.vs thead th.vs__ours{color:var(--accent-text)}
.vs tbody th{font-weight:650;color:var(--ink);width:22%}
.vs__theirs{color:var(--ink-subtle);width:36%}
.vs td.vs__ours{color:var(--ink);font-weight:500}
.vs__ours .ico{color:var(--accent-text);margin-right:var(--s-8);vertical-align:-3px}
@media (max-width:767px){
  .vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto}
  .vs tr{padding:var(--s-20) 0;border-bottom:1px solid var(--line)}
  .vs th,.vs td{padding:0;border:0}
  .vs tbody th{margin-bottom:var(--s-10)}
  .vs td + td{margin-top:var(--s-8)}
  .vs td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:var(--t-micro);font-weight:600;color:var(--ink-muted)}
}

/* ══ 업종 카드 .sectors ═════════════════════════════════════
   업종 이름 + 대표 과제 세 줄. 넓은 화면 3열, 올리면 면이 떠오른다 */
.sectors{display:grid;gap:var(--s-12);padding:0;list-style:none}
@media (min-width:640px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sector{display:flex;flex-direction:column;gap:var(--s-16);padding:var(--s-28);border-radius:var(--r-xl);background:var(--surface);box-shadow:0 0 0 1px var(--line);
  transition:box-shadow var(--d-3) var(--ease-inout),transform var(--d-4) var(--ease-out)}
.surface-base .sector{background:var(--surface-alt);box-shadow:none}
.sector__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12)}
.sector__name{margin:0;color:var(--ink)}
.sector__icon{color:var(--accent-text)}
.sector__list{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-8)}
.sector__list li{display:flex;gap:var(--s-10);align-items:baseline;color:var(--ink-body);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.sector__list li::before{content:"";flex:none;width:5px;height:5px;translate:0 -3px;background:var(--accent-text)}
@media (hover:hover){.sector:hover{transform:translateY(-3px);box-shadow:var(--sh-lg),0 0 0 1px var(--line)}}

/* ══ 흐름 줄 .pipeline ═══════════════════════════════════════
   단계 칸을 가로로 잇고, 연결선 위로 정사각 신호가 흘러간다. 좁은 화면은 세로. 모션 축소면 신호 없이 선만 */
.pipeline{position:relative;display:grid;gap:var(--s-16);padding:0;list-style:none}
@media (min-width:1024px){.pipeline{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s-20)}}
.pipeline__step{position:relative;display:flex;flex-direction:column;gap:var(--s-10);padding:var(--s-24);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.pipeline__node{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)}
.pipeline__no{font-size:var(--t-caption);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.pipeline__title{margin:0;color:var(--ink)}
.pipeline__desc{margin:0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);word-break:keep-all}
.pipeline__list{margin:var(--s-6) 0 0;padding:var(--s-12) 0 0;list-style:none;border-top:1px solid var(--line);display:grid;gap:var(--s-4);
  font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-body)}
/* 이음선과 신호(넓은 화면: 칸 사이 가로선) */
@media (min-width:1024px){
  .pipeline__step + .pipeline__step::before{content:"";position:absolute;top:44px;right:100%;width:var(--s-20);height:1px;background:var(--line-strong)}
  .pipeline__wire{position:absolute;left:var(--s-24);right:var(--s-24);top:43px;height:3px;pointer-events:none;overflow:hidden}
  /* 선 전체 폭의 가상 요소 오른쪽 끝에 신호 칸을 그리고, 가상 요소를 -100% → 0 으로 민다(transform 만 쓴다) */
  .pipeline__wire::after{content:"";position:absolute;inset:0;opacity:0;
    background:linear-gradient(90deg,transparent calc(100% - 40px),color-mix(in srgb,var(--accent-text) 30%,transparent) calc(100% - 40px),var(--accent-text) calc(100% - 8px))}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  html.js .pipeline.is-in .pipeline__wire::after{animation:pipe-run calc(var(--d-7) * 5) linear infinite}
  [data-fx-idle] .pipeline__wire::after{animation-play-state:paused}
}
@keyframes pipe-run{0%{transform:translateX(-100%);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(0);opacity:0}}

/* ══ 어두운 푸터 .footer--deep ═══════════════════════════════
   로고·소개(왼쪽 4칸) + 메뉴 세 묶음(오른쪽 8칸) / 아래: 회사 정보·저작권·법무 한 줄. 위 권유 줄(.footer__top)은 페이지 끝 권유가 없을 때만.
   바닥 큰 심볼은 화면 폭에 맞춰 아래가 살짝 잘리며 끝난다(장식, 아주 옅게). */
.footer--deep{position:relative;overflow:hidden;padding:var(--s-24) 0 0}
.footer__top{display:grid;gap:var(--s-24);align-items:end;padding-bottom:var(--s-56);border-bottom:1px solid var(--line)}
@media (min-width:1024px){.footer__top{grid-template-columns:minmax(0,1fr) auto;padding-bottom:var(--s-64)}}
.footer__headline{margin:0;color:var(--ink);word-break:keep-all;text-wrap:balance}
.footer__headline .motif-dot{--dot:.16em}
.footer--deep .footer__grid{display:grid;gap:var(--s-48);grid-template-columns:minmax(0,1fr);padding:var(--s-56) 0}
@media (min-width:1024px){.footer--deep .footer__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-64)}}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32) var(--s-16)}
@media (min-width:768px){.footer__cols{gap:var(--s-32) var(--s-24)}}
.footer--deep .footer__title{margin:0 0 var(--s-12);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:600;color:var(--ink-muted)}
.footer--deep ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.footer--deep .footer__link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-body);font-size:var(--t-body-sm);transition:color var(--d-2) var(--ease-inout)}
@media (hover:hover){.footer--deep .footer__link:hover{color:var(--ink)}}
.footer__claim{margin:var(--s-20) 0 0;max-width:22rem;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);word-break:keep-all}
.footer__bottom{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-32);align-items:center;justify-content:space-between;padding:var(--s-24) 0;border-top:1px solid var(--line);
  font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-muted)}
.footer__info{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-20);margin:0}
.footer__info div{display:flex;gap:var(--s-6)}
.footer__info dt{margin:0}
.footer__info dd{margin:0;color:var(--ink-body)}
.footer__legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-20)}
.footer__legal-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-body)}
.footer__info a{display:inline-flex;align-items:center;min-height:44px;margin-block:calc((44px - 1lh) / -2)}
.footer__legal-links .btn{margin-right:calc(var(--c-sm-px) * -1)}
.footer__giant{display:block;margin:var(--s-16) 0 0;color:var(--ink);opacity:.045;line-height:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}
.footer__giant .logo{display:block;width:100%;height:auto}
.footer__giant .logo__svg{width:100%;height:auto;margin-bottom:-8%}
.footer__giant .logo__svg :is(path,rect,circle,polygon,ellipse){fill:currentColor}

/* ══ 기술 그림 .viz ══════════════════════════════════════════
   카드 안에서 기술이 하는 일을 짧은 움직임으로 보여 주는 작은 그림. 장식이라 aria-hidden, 뜻은 곁의 제목·설명이 말한다.
   그림이 화면에 35% 들어오면 .is-play 로 시작하고(editorial.js), 화면 밖이면 [data-fx-idle] 로 멈춘다. 모션 축소면 완성된 모습. */
.viz{position:relative;width:100%;height:100%;min-height:180px;overflow:hidden;font-size:var(--t-caption);line-height:var(--t-caption-lh);color:var(--ink-body)}
.viz *{box-sizing:border-box}
.viz__card{position:absolute;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--sh-md),0 0 0 1px var(--line)}

/* 대화(생성형 AI): 질문 말풍선 → 답이 한 줄씩 → 근거 칩 */
.viz-chat{display:flex;flex-direction:column;gap:var(--s-10);padding:var(--s-20)}
/* 대화 그림 머리 막대(선택): 어시스턴트 이름 + 연결 상태. 있으면 위에 붙고 대화는 아래로 모인다 */
.viz-chat__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);margin-bottom:auto;padding-bottom:var(--s-12);border-bottom:1px solid var(--line)}
.viz-chat__bar b{display:flex;align-items:center;gap:var(--s-8);font-weight:600;color:var(--ink)}
.viz-chat__bar b .motif-dot{--dot:8px;margin:0}
.viz-chat__bar span{display:flex;align-items:center;gap:var(--s-6);color:var(--ink-muted)}
.viz-chat__bar span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good)}
.viz-chat__q{align-self:flex-end;max-width:82%;padding:var(--s-10) var(--s-12);border-radius:var(--r-md) var(--r-md) var(--r-xs) var(--r-md);background:var(--accent);color:var(--accent-ink)}
.viz-chat__a{align-self:flex-start;max-width:92%;padding:var(--s-12) var(--s-12);border-radius:var(--r-md) var(--r-md) var(--r-md) var(--r-xs);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.viz-chat__who{display:flex;align-items:center;gap:var(--s-6);margin-bottom:var(--s-6);font-weight:600;color:var(--ink)}
.viz-chat__who .motif-dot{--dot:7px;margin:0}
.viz-chat__line{display:block;height:8px;border-radius:var(--r-full);background:var(--tint-active);margin-top:var(--s-6);transform-origin:left}
.viz-chat__line--short{width:64%}
.viz-chat__list{margin:var(--s-8) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-6)}
.viz-chat__list li{display:flex;gap:var(--s-8);color:var(--ink-body)}
.viz-chat__list li b{flex:none;font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums}
.viz-chat__src{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-top:var(--s-10)}
.viz-chat__src span{padding:2px var(--s-8);border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.viz-chat__text{margin:0;color:var(--ink-body)}

/* 문서 검색(RAG): 겹친 문서 + 형광 줄 + 찾은 부분이 답으로 */
.viz-docs{display:grid;place-items:center}
.viz-docs__stack{position:relative;width:46%;max-width:190px;aspect-ratio:.76;margin-top:var(--s-8)}
.viz-docs__page{position:absolute;inset:0;padding:var(--s-16);background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--sh-md),0 0 0 1px var(--line)}
.viz-docs__page:nth-child(1){transform:rotate(-7deg) translate(-14%,4%)}
.viz-docs__page:nth-child(2){transform:rotate(5deg) translate(12%,2%)}
.viz-docs__page i{display:block;height:5px;margin-bottom:8px;border-radius:var(--r-full);background:var(--tint-active)}
.viz-docs__page i:nth-child(3n){width:72%}
.viz-docs__page i.is-hit{position:relative;background:var(--tint-active)}
.viz-docs__page i.is-hit::after{content:"";position:absolute;inset:-3px -4px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--accent) 26%,transparent);transform-origin:left}
.viz-docs__tag{position:absolute;right:-22%;bottom:16%;box-shadow:var(--sh-md);padding:var(--s-6) var(--s-10);border-radius:var(--r-sm);background:var(--ink);color:var(--canvas);font-weight:600;white-space:nowrap}

/* 에이전트: 단계 노드가 차례로 켜지는 흐름 */
.viz-flow{display:flex;flex-direction:column;justify-content:center;gap:var(--s-8);padding:var(--s-20)}
.viz-flow__node{position:relative;display:flex;align-items:center;gap:var(--s-10);padding:var(--s-10) var(--s-12);border-radius:var(--r-sm);
  background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--ink-muted)}
.viz-flow__node::before{content:"";flex:none;width:8px;height:8px;background:var(--line-strong)}
.viz-flow__node b{font-weight:600;color:var(--ink)}
.viz-flow__node em{margin-left:auto;font-style:normal;font-size:var(--t-micro);color:var(--good-text)}
.viz-flow__node + .viz-flow__node::after{content:"";position:absolute;left:calc(var(--s-12) + 3.5px);top:calc(var(--s-8) * -1);width:1px;height:var(--s-8);background:var(--line-strong)}

/* 비전: 칸 위에 찾은 상자가 그려진다 */
.viz-vision{display:grid;place-items:center;padding:var(--s-16)}
.viz-vision__frame{position:relative;width:100%;max-width:360px;aspect-ratio:16 / 10;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(135deg,var(--surface-alt),var(--surface));box-shadow:0 0 0 1px var(--line)}
.viz-vision__frame::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:20px 20px;opacity:.7}
.viz-vision__obj,.viz-vision__box{left:var(--x,0);top:var(--y,0);width:var(--w,20%);height:var(--h,50%)}
/* 검사 대상: 진한 금속 몸체 + 창 + 아래 단자. 흠집은 <i class="viz-vision__flaw"></i> 를 대상 안에 */
.viz-vision__obj{position:absolute;border-radius:var(--r-sm);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-invert) 78%,var(--surface)) 0%,var(--surface-invert) 100%);
  box-shadow:0 8px 16px -10px color-mix(in srgb,var(--ink) 55%,transparent),inset 0 1px 0 color-mix(in srgb,var(--canvas) 20%,transparent)}
.viz-vision__obj::before{content:"";position:absolute;inset:14% 16% 36%;border-radius:var(--r-xs);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 38%,var(--surface-invert)) 0%,var(--surface-invert) 85%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--canvas) 14%,transparent)}
.viz-vision__obj::after{content:"";position:absolute;left:24%;right:24%;bottom:13%;height:7%;border-radius:var(--r-full);background:color-mix(in srgb,var(--canvas) 24%,transparent)}
.viz-vision__flaw{position:absolute;z-index:1;left:44%;top:66%;width:38%;height:2px;border-radius:2px;background:color-mix(in srgb,var(--canvas) 78%,transparent);transform:rotate(-24deg);transform-origin:left center;
  box-shadow:0 0 6px color-mix(in srgb,var(--canvas) 50%,transparent)}
.viz-vision__box{position:absolute;border:1.5px solid var(--accent-text);border-radius:var(--r-xs)}
.viz-vision__box span{position:absolute;left:-1.5px;bottom:100%;margin-bottom:2px;padding:1px var(--s-6);border-radius:var(--r-xs);background:var(--accent);color:var(--accent-ink);font-weight:600;white-space:nowrap;font-size:var(--t-nano)}
.viz-vision__box--warn{border-color:var(--bad)}
.viz-vision__box--warn span{background:var(--danger);color:var(--danger-ink)}
.viz-vision__scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent));border-bottom:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}

/* 음성: 막대 파형 + 받아 적은 글 */
.viz-wave{display:flex;flex-direction:column;justify-content:center;gap:var(--s-16);padding:var(--s-20)}
.viz-wave__bars{display:flex;align-items:center;gap:3px;height:56px}
.viz-wave__bars i{flex:1;max-width:5px;height:calc(var(--h,.5) * 100%);border-radius:var(--r-full);background:var(--accent-text);transform-origin:center}
.viz-wave__text{margin:0;color:var(--ink-body)}
.viz-wave__text mark{background:var(--accent-soft);color:var(--accent-text);border-radius:var(--r-xs);padding:0 3px}

/* 예측: 지난 값 막대 + 예측 막대(빗금) + 오늘 선 */
.viz-chart{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-10);padding:var(--s-20)}
.viz-chart__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-8);color:var(--ink-muted)}
.viz-chart__head b{font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.viz-chart__head em{font-style:normal;font-weight:600;color:var(--good-text)}
.viz-chart__bars{position:relative;display:flex;align-items:flex-end;gap:5px;height:96px;margin-top:var(--s-20)}
.viz-chart__bars i{flex:1;height:calc(var(--h,.5) * 100%);border-radius:3px 3px 0 0;background:var(--accent);opacity:.85;transform-origin:bottom}
.viz-chart__bars i.is-fc{opacity:1;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--accent)}
.viz-chart__now{position:absolute;top:-6px;bottom:0;left:var(--at,66%);width:0;border-left:1px dashed var(--ink-muted)}
.viz-chart__now span{position:absolute;top:-6px;left:5px;font-size:var(--t-nano);color:var(--ink-muted);white-space:nowrap}
.viz-chart__axis{display:flex;justify-content:space-between;color:var(--ink-subtle);font-size:var(--t-nano)}

/* 보안: 겹 테두리 안의 서버 칸 */
.viz-vault{display:grid;place-items:center;padding:var(--s-20)}
.viz-vault__ring{position:relative;display:grid;place-items:center;width:min(220px,80%);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong)}
.viz-vault__ring::before,.viz-vault__ring::after{content:"";position:absolute;inset:14%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong)}
.viz-vault__ring::after{inset:-14%;opacity:.5}
.viz-vault__core{position:relative;z-index:1;display:grid;gap:5px;width:42%;padding:var(--s-10);border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--sh-md),0 0 0 1px var(--line)}
.viz-vault__core i{display:flex;align-items:center;justify-content:space-between;height:14px;padding-inline:6px;border-radius:3px;background:var(--tint)}
.viz-vault__core i::after{content:"";width:5px;height:5px;background:var(--good)}
.viz-vault__lock{position:absolute;z-index:2;right:8%;top:8%;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-md)}

/* 움직임: 보일 때(.is-in) 한 번 또는 반복. 모션 축소면 완성 모습 그대로 */
@media (prefers-reduced-motion:no-preference){
  html.js .viz-anim .viz-chat__q,html.js .viz-anim .viz-chat__a,html.js .viz-anim .viz-chat__src{opacity:0;transform:translateY(8px)}
  html.js .viz-anim.is-play .viz-chat__q{animation:viz-in var(--d-5) var(--ease-out) 200ms both}
  html.js .viz-anim.is-play .viz-chat__a{animation:viz-in var(--d-5) var(--ease-out) 900ms both}
  html.js .viz-anim.is-play .viz-chat__line{animation:viz-grow var(--d-7) var(--ease-out) calc(1100ms + var(--i,0) * 260ms) both}
  html.js .viz-anim .viz-chat__list li{opacity:0}
  html.js .viz-anim.is-play .viz-chat__list li{animation:viz-in var(--d-5) var(--ease-out) calc(1300ms + var(--i,0) * 300ms) both}
  html.js .viz-anim.is-play .viz-chat__src{animation:viz-in var(--d-5) var(--ease-out) 2100ms both}

  html.js .viz-anim.is-play .viz-docs__page i.is-hit::after{animation:viz-grow var(--d-7) var(--ease-out) 700ms both}
  html.js .viz-anim .viz-docs__tag{opacity:0}
  html.js .viz-anim.is-play .viz-docs__tag{animation:viz-pop var(--d-5) var(--ease-spring) 1300ms both}

  html.js .viz-anim .viz-flow__node em{opacity:0}
  html.js .viz-anim.is-play .viz-flow__node::before{animation:viz-node calc(var(--d-7) * 4) steps(1,end) calc(var(--i,0) * 700ms + 300ms) infinite}
  html.js .viz-anim.is-play .viz-flow__node em{animation:viz-done calc(var(--d-7) * 4) steps(1,end) calc(var(--i,0) * 700ms + 300ms) infinite}

  html.js .viz-anim .viz-vision__box{opacity:0;transform:scale(1.15)}
  html.js .viz-anim.is-play .viz-vision__box{animation:viz-box calc(var(--d-7) * 5) var(--ease-out) calc(600ms + var(--i,0) * 420ms) infinite}
  html.js .viz-anim.is-play .viz-vision__scan{animation:viz-scan calc(var(--d-7) * 5) linear infinite}

  html.js .viz-anim.is-play .viz-wave__bars i{animation:viz-bar calc(var(--d-7) * 1.3) var(--ease-inout) calc(var(--i,0) * -90ms) infinite alternate}

  html.js .viz-anim.is-play .viz-vault__ring::after{animation:viz-pulse calc(var(--d-7) * 3) var(--ease-out) infinite}
  html.js .viz-anim .viz-chart__bars i{transform:scaleY(0)}
  html.js .viz-anim.is-play .viz-chart__bars i{animation:viz-rise var(--d-6) var(--ease-out) calc(300ms + var(--i,0) * 60ms) both}

  [data-fx-idle] .viz-anim *,[data-fx-idle].viz-anim *{animation-play-state:paused !important}
}
@keyframes viz-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes viz-grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes viz-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes viz-node{0%{background:var(--line-strong)}8%{background:var(--accent-text)}85%{background:var(--accent-text)}100%{background:var(--line-strong)}}
@keyframes viz-done{0%,20%{opacity:0}21%,85%{opacity:1}100%{opacity:0}}
@keyframes viz-box{0%{opacity:0;transform:scale(1.15)}6%,70%{opacity:1;transform:none}80%,100%{opacity:0;transform:none}}
@keyframes viz-scan{0%{transform:translateY(-100%)}60%,100%{transform:translateY(340%)}}
@keyframes viz-rise{from{transform:scaleY(0)}to{transform:none}}
@keyframes viz-bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes viz-pulse{0%{transform:scale(.86);opacity:.7}100%{transform:scale(1.08);opacity:0}}

/* ══ 자석 버튼(data-magnetic) ═══════════════════════════════
   마우스 기기에서 버튼이 포인터 쪽으로 살짝 끌린다. 값은 editorial.js 가 --mx·--my 로 준다. 첫 화면 주버튼 한 곳에만 */
[data-magnetic]{translate:var(--mx,0) var(--my,0);transition:translate var(--d-4) var(--ease-out),background-color var(--d-2) var(--ease-inout)}
@media (prefers-reduced-motion:reduce){[data-magnetic]{translate:none}}

/* ══ 글자 풀림(data-scramble) ══════════════════════════════
   영문 표식 글자가 처음 보일 때 한 번 풀려 나온다. 글자 폭이 흔들리지 않게 고정폭 숫자·대문자에만 */
[data-scramble]{font-variant-numeric:tabular-nums}

/* 화면 사이 부드러운 전환(같은 사이트 이동, 지원 브라우저만) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--d-3) var(--ease-in) both}
::view-transition-new(root){animation:vt-in var(--d-5) var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ══ 블로그: 목록 · 대표 글 · 글 카드 · 글 머리 · 본문 · 목차 · 공유 (docs/18_editorial.md '블로그') ══════════════
   목록 <ul class="post-grid"><li><a class="post-card">…</a></li></ul>, 대표 글 <a class="post-feature">,
   글 <article class="post"><header class="post-head">…</header><figure class="post-cover">…</figure>
       <div class="post-layout"><div class="article">본문</div><aside class="post-toc">…</aside></div></article>
   본문 너비는 --post-measure(760px). 머리·본문이 같은 왼쪽 선에 선다. */
:root{--post-measure:760px}
.blog-cats{display:flex;gap:var(--s-8);margin:0;padding:var(--s-4) 0;list-style:none;overflow-x:auto;scrollbar-width:none}
.blog-cats::-webkit-scrollbar{display:none}
.blog-cats a{display:inline-flex;align-items:center;gap:var(--s-6);height:var(--s-40);padding-inline:var(--s-16);border:1px solid var(--line);border-radius:var(--r-full);
  color:var(--ink-body);font-size:var(--t-body-sm);font-weight:600;white-space:nowrap;
  transition:background-color var(--d-2) var(--ease-inout),border-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout)}
.blog-cats a span{color:var(--ink-subtle);font-weight:500;font-variant-numeric:tabular-nums}
.blog-cats a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.blog-cats a[aria-current="page"] span{color:color-mix(in srgb,var(--canvas) 64%,transparent)}
@media (hover:hover){.blog-cats a:not([aria-current="page"]):hover{border-color:var(--line-strong);color:var(--ink)}}

/* 글 카드 */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-48) var(--s-24)}:where(.post-grid){margin:0;padding:0;list-style:none}
@media (min-width:640px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.post-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-64) var(--s-32)}}
.post-card{display:flex;flex-direction:column;gap:var(--s-20);height:100%;color:inherit;text-decoration:none}
.post-card__media{position:relative;display:block;aspect-ratio:3 / 2;overflow:hidden;border-radius:var(--r-lg);background:var(--surface-alt);isolation:isolate}
.post-card__media img,.post-feature__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
  transition:transform var(--d-6) var(--ease-out)}
.post-card__body{display:flex;flex:1;flex-direction:column;gap:var(--s-8)}
.post-kicker{margin:0;color:var(--accent-text);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:700;letter-spacing:.02em}
.post-card__title{margin:0;color:var(--ink);font-size:var(--t-heading-sm);line-height:1.45;font-weight:700;letter-spacing:-.012em;word-break:keep-all;text-wrap:pretty}
.post-card__title span{background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;transition:background-size var(--d-4) var(--ease-out)}
.post-card__excerpt{margin:0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:1.7;word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-8);margin:0;color:var(--ink-subtle);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-variant-numeric:tabular-nums}
.post-meta > * + *::before{content:"";display:inline-block;width:3px;height:3px;margin-right:var(--s-8);border-radius:50%;background:currentColor;vertical-align:middle;opacity:.6}
.post-card .post-meta{margin-top:auto;padding-top:var(--s-8)}
.post-meta__author{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
@media (hover:hover){.post-meta__author:hover{color:var(--ink)}}
@media (hover:hover){
  .post-card:hover .post-card__media img,.post-feature:hover .post-feature__media img{transform:scale(1.035)}
  .post-card:hover .post-card__title span,.post-feature:hover .post-feature__title span{background-size:100% 1px}
}
.post-card:focus-visible,.post-feature:focus-visible{outline:2px solid var(--accent);outline-offset:var(--s-8);border-radius:var(--r-lg)}

/* 대표 글: 넓은 화면은 사진 7 : 글 5 */
.post-feature{display:grid;gap:var(--s-24);color:inherit;text-decoration:none}
@media (min-width:1024px){.post-feature{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-56);align-items:center}}
.post-feature__media{display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--r-xl);background:var(--surface-alt);isolation:isolate}
/* 표지가 아직 없는 글: 회색 면이 같은 색 구역(관련 글의 surface-alt)에 묻혀 빈 구멍처럼 보이지 않게 강조색 옅은 면으로 */
.post-card__media:empty,.post-feature__media:empty{background:var(--accent-soft)}
.post-feature__body{display:flex;flex-direction:column;gap:var(--s-12)}
.post-feature__title{margin:0;color:var(--ink);font-size:var(--t-heading-lg);line-height:1.35;font-weight:700;letter-spacing:-.02em;word-break:keep-all;text-wrap:balance}
@media (min-width:1024px){.post-feature__title{font-size:var(--t-heading-xl);line-height:1.3}}
.post-feature__title span{background:linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat;transition:background-size var(--d-5) var(--ease-out)}
.post-feature__excerpt{margin:0;color:var(--ink-muted);font-size:var(--t-body-md);line-height:1.75;word-break:keep-all}
.post-feature .post-meta{margin-top:var(--s-8)}

/* 글 머리 · 표지 */
.post-head{padding:var(--s-56) 0 var(--s-40)}
@media (min-width:1024px){.post-head{padding:var(--s-96) 0 var(--s-56)}}
.post-head__in{max-width:var(--post-measure);margin-inline:auto}
.post-head__kicker{display:inline-flex;align-items:center;gap:var(--s-8);color:var(--accent-text);font-size:var(--t-body-sm);font-weight:700;text-decoration:none}
@media (hover:hover){.post-head__kicker:hover{text-decoration:underline;text-underline-offset:.25em}}
.post-head__title{margin:var(--s-16) 0 0;color:var(--ink);font-size:clamp(30px,5.2vw,48px);line-height:1.28;font-weight:740;letter-spacing:-.03em;word-break:keep-all;text-wrap:balance}
.post-head__lede{margin:var(--s-20) 0 0;color:var(--ink-muted);font-size:var(--t-body-lg);line-height:1.7;word-break:keep-all;text-wrap:pretty}
.post-head .post-meta{margin-top:var(--s-28);padding-top:var(--s-20);border-top:1px solid var(--line);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.post-cover{max-width:var(--w-base);margin:0 auto}
.post-cover .media-frame{--ar:16 / 9}
.post-cover figcaption{max-width:var(--post-measure);margin:var(--s-12) auto 0;color:var(--ink-subtle);font-size:var(--t-caption);line-height:var(--t-caption-lh)}

/* 본문 + 목차 */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr);padding-block:var(--s-56) var(--s-80)}
@media (min-width:1024px){.post-layout{padding-block:var(--s-80) var(--s-96)}}
.post-layout > .article,.post-layout > .post-sources,.post-layout > .post-foot{width:100%;max-width:var(--post-measure);margin-inline:auto}
.post-toc{display:none}
@media (min-width:1280px){
  .post-layout{grid-template-columns:minmax(0,1fr) minmax(0,var(--post-measure)) minmax(0,1fr);column-gap:var(--s-48)}
  .post-layout > .article,.post-layout > .post-sources,.post-layout > .post-foot{grid-column:2}
  .post-toc{display:block;grid-column:3;grid-row:1 / span 2;align-self:start;position:sticky;top:calc(var(--nav-h) + var(--s-40));max-width:240px}
  .post-toc-m{display:none}
}
.post-toc__title{margin:0 0 var(--s-12);color:var(--ink);font-size:var(--t-caption);font-weight:700;letter-spacing:.04em}
.post-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.post-toc a{display:block;margin-left:-1px;padding:var(--s-6) 0 var(--s-6) var(--s-16);border-left:2px solid transparent;color:var(--ink-muted);
  font-size:var(--t-body-sm);line-height:1.5;text-decoration:none;word-break:keep-all;transition:color var(--d-2) var(--ease-inout),border-color var(--d-2) var(--ease-inout)}
.post-toc a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
@media (hover:hover){.post-toc a:hover{color:var(--ink)}}
.post-toc-m{width:100%;max-width:var(--post-measure);margin:0 auto var(--s-40);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.post-toc-m summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--s-48);padding:0 var(--s-16);color:var(--ink);font-size:var(--t-body-sm);font-weight:650;cursor:pointer;list-style:none}
.post-toc-m summary::-webkit-details-marker{display:none}
.post-toc-m summary .ico{transition:transform var(--d-3) var(--ease-out)}
.post-toc-m[open] summary .ico{transform:rotate(180deg)}
.post-toc-m ol{margin:0;padding:0 var(--s-16) var(--s-16) calc(var(--s-16) + 1.2em);color:var(--ink-muted);font-size:var(--t-body-sm);line-height:1.6}
.post-toc-m li + li{margin-top:var(--s-6)}
.post-toc-m a{color:inherit;text-decoration:none}

/* 본문 글꼴: 한 줄 40자 안팎, 행간 1.85 */
.article{color:var(--ink-body);font-size:var(--t-body-md);line-height:1.85;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
@media (min-width:768px){.article{font-size:var(--t-body-lg)}}
.article > *{margin:0}
.article > * + *{margin-top:1.25em}
.article :is(h2,h3){color:var(--ink);font-weight:700;word-break:keep-all;text-wrap:balance;scroll-margin-top:var(--s-8)} /* + html 의 scroll-padding(내비 + 16) */
.article h2{margin-top:2.6em;font-size:var(--t-heading-md);line-height:1.4;letter-spacing:-.02em}
@media (min-width:768px){.article h2{font-size:var(--t-heading-lg)}}
.article h3{margin-top:2em;font-size:var(--t-heading-sm);line-height:1.5;letter-spacing:-.01em}
.article :is(h2,h3) + *{margin-top:.75em}
.article strong{color:var(--ink);font-weight:650}
.article a{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
@media (hover:hover){.article a:hover{text-decoration-thickness:2px}}
.article ul{padding-left:1.3em;list-style:disc}
.article ol{padding-left:1.4em;list-style:decimal}
.article li + li{margin-top:.45em}
.article li::marker{color:var(--ink-subtle)}
.article ol > li::marker{color:var(--accent-text);font-weight:700;font-variant-numeric:tabular-nums}
.article blockquote{margin-block:2em;padding:var(--s-4) 0 var(--s-4) var(--s-24);border-left:2px solid var(--accent);color:var(--ink);font-size:1.12em;line-height:1.7;font-weight:600}
.article blockquote p + p{margin-top:.6em}
.article > .article__figure{margin-block:2.4em}
.article__figure img{display:block;width:100%;height:auto;border-radius:var(--r-lg);background:var(--surface-alt)}
.article__figure figcaption{margin-top:var(--s-12);color:var(--ink-subtle);font-size:var(--t-caption);line-height:1.6}
.article__table{margin-block:2em;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.article__table--wide table{min-width:520px}.article__table:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.article table{width:100%;border-collapse:collapse;font-size:var(--t-body-sm);line-height:1.65}
.article :is(th,td){padding:var(--s-12) var(--s-16);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article th{background:var(--surface-alt);color:var(--ink);font-weight:650;white-space:nowrap}
.article tr:last-child td{border-bottom:0}
.article code{padding:.12em .38em;border-radius:var(--r-xs);background:var(--surface-alt);color:var(--ink);font-family:var(--font-mono);font-size:.86em}
.article pre{padding:var(--s-20);overflow-x:auto;border-radius:var(--r-lg);background:var(--surface-invert);color:var(--ink-invert);font-size:var(--t-body-sm);line-height:1.7}
.article pre code{padding:0;background:none;color:inherit}
.article hr{height:var(--s-8);margin-block:3em;border:0;background:radial-gradient(circle,var(--line-strong) 1.5px,transparent 2px) center / var(--s-16) var(--s-8) repeat-x;max-width:var(--s-56);margin-inline:auto}
.article .footnotes{margin-top:3em;padding-top:var(--s-20);border-top:1px solid var(--line);color:var(--ink-muted);font-size:var(--t-body-sm)}

/* 글 끝: 꼬리표 · 공유 */
/* 글 끝 '참고한 자료'(출처 목록): 본문보다 한 단계 작게, 번호와 출처 사이트 이름을 함께 */
.post-sources{margin-top:var(--s-56);padding-top:var(--s-28);border-top:1px solid var(--line)}
.post-sources__title{margin:0 0 var(--s-16);color:var(--ink);font-size:var(--t-body-md);line-height:var(--t-body-md-lh);font-weight:700}
.post-sources ol{display:grid;gap:var(--s-10);margin:0;padding-left:var(--s-20);color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.post-sources ol{list-style:decimal}
.post-sources li{padding-left:var(--s-4);word-break:keep-all;overflow-wrap:anywhere}
.post-sources li::marker{color:var(--ink-subtle);font-size:var(--t-caption);font-variant-numeric:tabular-nums}
.post-sources a{color:var(--ink-body);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
@media (hover:hover){.post-sources a:hover{color:var(--accent-text);text-decoration-color:currentColor}}
.post-sources__host{margin-left:var(--s-6);color:var(--ink-subtle);font-size:var(--t-caption)}
.post-sources + .post-foot{margin-top:var(--s-40)}
.post-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-20);margin-top:var(--s-56);padding-top:var(--s-28);border-top:1px solid var(--line)}
.post-tags{display:flex;flex-wrap:wrap;gap:var(--s-8);margin:0;padding:0;list-style:none}
.post-tags li{display:inline-flex;align-items:center;height:var(--s-32);padding-inline:var(--s-12);border-radius:var(--r-full);background:var(--surface-alt);color:var(--ink-body);font-size:var(--t-caption);font-weight:600}
.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8)}
.post-share__label{margin-right:var(--s-4);color:var(--ink-subtle);font-size:var(--t-caption);font-weight:600}
/* 좁은 화면: '공유' 글자를 빼야 링크 복사·LinkedIn·Facebook·X 가 한 줄에 들어간다(마지막 버튼만 줄바꿈되지 않게) */
@media (max-width:479px){.post-share__label{display:none}}
/* 목록 머리 줄(갈래 + 구독) · 쪽 이동 */
.blog-index__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-16) var(--s-24);padding-bottom:var(--s-24);border-bottom:1px solid var(--line)}
.blog-index__bar nav{min-width:0;max-width:100%}
.blog-index__grid{margin-top:var(--s-64);padding-top:var(--s-64);border-top:1px solid var(--line)}
@media (min-width:1024px){.blog-index__grid{margin-top:var(--s-80);padding-top:var(--s-80)}}
.blog-pager{display:flex;align-items:center;justify-content:center;gap:var(--s-16);margin-top:var(--s-80)}
.blog-pager__now{color:var(--ink-muted);font-size:var(--t-body-sm);font-variant-numeric:tabular-nums}
.blog-related__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-16)}
.blog-related__head h2{margin:0}

/* 본문 도표(글자로 된 흐름도). 블로그 마크다운의 ```diagram 블록이 부분 템플릿으로 바뀐다.
   <figure class="article-flow"><figcaption class="article-flow__head">…</figcaption><ol class="article-flow__steps"><li class="article-flow__step [is-key]">…</li></ol></figure> */
.article > .article-flow{margin-block:2.4em}
.article-flow{padding:var(--s-24) var(--s-16);border-radius:var(--r-xl);background:var(--surface-alt);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:768px){.article-flow{padding:var(--s-40) var(--s-40) var(--s-32)}}
.article-flow__head{display:flex;flex-direction:column;gap:var(--s-6);margin-bottom:var(--s-28)}
.article-flow__kicker{display:inline-flex;align-items:center;gap:var(--s-8);color:var(--ink-muted);font-size:var(--t-caption);font-weight:700;letter-spacing:.02em}
.article-flow__kicker::before{content:"";width:var(--s-16);height:6px;background:var(--brand-accent);clip-path:polygon(28% 0,100% 0,72% 100%,0 100%)}
.article-flow__title{color:var(--ink);font-size:var(--t-heading-sm);line-height:1.45;font-weight:700;letter-spacing:-.015em;word-break:keep-all}
.article .article-flow__steps{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:var(--s-12)}
.article-flow__steps::before{content:"";position:absolute;left:15.5px;top:var(--s-32);bottom:var(--s-32);width:1px;background:var(--line-strong)}
.article .article-flow__step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--s-12);margin:0;padding:0}
.article-flow__step > div{padding:var(--s-12) var(--s-16);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
@media (min-width:768px){
  .article-flow__steps::before{left:19.5px}
  .article .article-flow__step{grid-template-columns:40px minmax(0,1fr);gap:var(--s-16)}
  .article-flow__step > div{padding:var(--s-16) var(--s-20)}
}
.article-flow__step.is-key > div{box-shadow:0 0 0 1.5px var(--accent),0 0 0 5px var(--accent-soft)}
.article-flow__no{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin-top:var(--s-10);border-radius:var(--r-sm);background:var(--surface);
  box-shadow:0 0 0 1px var(--line-strong);color:var(--accent-text);font-size:var(--t-caption);font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:768px){.article-flow__no{width:40px;height:40px;margin-top:var(--s-12)}}
.article-flow__step.is-key .article-flow__no{background:var(--accent);box-shadow:none;color:var(--accent-ink)}
.article-flow__step strong{display:block;color:var(--ink);font-size:var(--t-body-md);line-height:1.5;font-weight:700}
.article .article-flow__step p{margin:var(--s-4) 0 0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:1.7}
.article .article-flow__step .article-flow__sample{margin-top:var(--s-12);padding:var(--s-12) var(--s-16);border-radius:var(--r-md);background:var(--surface-alt);color:var(--ink);font-weight:600}
.article-flow__sample span{display:block;margin-top:var(--s-6);color:var(--accent-text);font-size:var(--t-caption);font-weight:600}
.article .article-flow__docs{display:grid;gap:var(--s-6);margin:var(--s-12) 0 0;padding:0;list-style:none}
.article .article-flow__docs li{display:flex;justify-content:space-between;gap:var(--s-12);margin:0;padding:var(--s-8) var(--s-12);border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);font-size:var(--t-caption);color:var(--ink-body)}
.article-flow__docs b{color:var(--accent-text);font-variant-numeric:tabular-nums}
.article-flow__docs li:last-child{color:var(--ink-subtle)}.article-flow__docs li:last-child b{color:var(--ink-subtle);font-weight:500}
.article .article-flow__note{margin:var(--s-20) 0 0;color:var(--ink-subtle);font-size:var(--t-caption);line-height:1.6}
.blog-index{padding-top:var(--s-48)}
@media (min-width:1024px){.blog-index{padding-top:var(--s-64)}}

/* ══ 본문 보여 주는 블록: 그래프 · 큰 숫자 · 점검표 · 알림 · 자주 묻는 질문 (18_editorial '블로그 블록') ══════════
   블로그 마크다운의 ```chart · stats · checklist · callout · faq 가 이 마크업이 된다. 그래프는 글자·막대가 HTML 이라 좁은 화면에서도 선명하다. */
:root{--chart-1:var(--accent);--chart-2:color-mix(in srgb,var(--accent) 52%,var(--surface));--chart-3:var(--ink-subtle);
  --chart-4:color-mix(in srgb,var(--ink-subtle) 42%,var(--surface));--chart-5:var(--line-strong)}
.article > .article-chart,.article > .article-stats,.article > .article-checklist,.article > .article-callout{margin-block:2.2em}
.article-chart{padding:var(--s-24) var(--s-20) var(--s-20);border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:768px){.article-chart{padding:var(--s-32) var(--s-32) var(--s-24)}}
.article-chart__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-4) var(--s-16);margin-bottom:var(--s-24)}
.article-chart__title{color:var(--ink);font-size:var(--t-body-md);line-height:1.5;font-weight:700;word-break:keep-all}
.article-chart__unit{color:var(--ink-subtle);font-size:var(--t-caption)}
.article .article-chart__note{margin:var(--s-16) 0 0;color:var(--ink-subtle);font-size:var(--t-caption);line-height:1.6}
.article .article-chart ol,.article .article-chart ul{margin:0;padding:0;list-style:none}
.article .article-chart li{margin:0}
/* 가로 막대 */
.article-chart__rows{display:grid;gap:var(--s-12)}
.article-chart__rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "track track";gap:var(--s-6) var(--s-12);align-items:baseline}
@media (min-width:640px){.article-chart__rows li{grid-template-columns:minmax(88px,30%) minmax(0,1fr) auto;grid-template-areas:"label track value";align-items:center}}
.article-chart__rows .article-chart__label{grid-area:label;color:var(--ink-body);font-size:var(--t-body-sm);line-height:1.45;word-break:keep-all}
.article-chart__track{grid-area:track;display:block;height:12px;border-radius:var(--r-full);background:var(--surface-alt);overflow:hidden}
.article-chart__fill{display:block;height:100%;width:calc(var(--v) * 100%);border-radius:inherit;background:var(--chart-4);transform-origin:left;animation:chart-grow var(--d-7) var(--ease-out) both}
.article-chart__rows li.is-hl .article-chart__fill{background:var(--chart-1)}
.article-chart__rows .article-chart__value{grid-area:value;color:var(--ink);font-size:var(--t-body-sm);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:6em;text-align:right}
.article-chart__rows li.is-hl .article-chart__label{color:var(--ink);font-weight:650}
/* 세로 막대 */
.article-chart__cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--s-8);align-items:end;height:220px}
.article-chart__cols li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s-6);height:100%;min-width:0}
.article-chart__col{display:block;width:min(100%,56px);height:calc(var(--v) * (100% - 52px));min-height:2px;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--chart-4);transform-origin:bottom;animation:chart-rise var(--d-7) var(--ease-out) both}
.article-chart__cols li.is-hl .article-chart__col{background:var(--chart-1)}
.article-chart__cols .article-chart__value{color:var(--ink);font-size:var(--t-caption);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.article-chart__cols .article-chart__label{max-width:100%;color:var(--ink-muted);font-size:var(--t-caption);line-height:1.35;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
/* 꺾은선 */
.article-chart__plot{position:relative;height:220px}
.article-chart__svg{display:block;width:100%;height:100%;overflow:visible}
.article-chart__grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.article-chart__area{fill:color-mix(in srgb,var(--accent) 10%,transparent);stroke:none}
.article-chart__line{fill:none;stroke:var(--chart-1);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.article-chart__dot{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--chart-1)}
.article-chart__dot b{position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 0;color:var(--ink-muted);font-size:var(--t-caption);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0}
.article-chart__dot.is-hl{background:var(--chart-1)}
.article-chart__dot.is-hl b{opacity:1;color:var(--ink);font-weight:700}
@media (hover:hover){.article-chart__dot:hover b{opacity:1}}
.article .article-chart__axis{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:var(--s-8);color:var(--ink-subtle);font-size:var(--t-caption)}
.article-chart__axis li{text-align:center;word-break:keep-all}
.article-chart__axis li:first-child{text-align:left}.article-chart__axis li:last-child{text-align:right}
/* 도넛 */
.article-chart__donut-wrap{display:grid;gap:var(--s-24);align-items:center}
@media (min-width:640px){.article-chart__donut-wrap{grid-template-columns:200px minmax(0,1fr);gap:var(--s-40)}}
.article-chart__donut-box{position:relative;display:grid;place-items:center;width:200px;max-width:100%;margin-inline:auto}
.article-chart__donut{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:var(--seg);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 58%);mask:radial-gradient(circle,transparent 57%,#000 58%)}
.article-chart__donut-box b{position:absolute;color:var(--ink);font-size:var(--t-heading-sm);font-weight:750;font-variant-numeric:tabular-nums}
.article-chart__legend{display:grid;gap:var(--s-10)}
.article-chart__legend li{display:flex;align-items:center;gap:var(--s-10);color:var(--ink-body);font-size:var(--t-body-sm);word-break:keep-all}
.article-chart__legend li::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;background:var(--c)}
.article-chart__legend b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes chart-grow{from{transform:scaleX(0)}}
@keyframes chart-rise{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.article-chart__fill,.article-chart__col{animation:none}}
/* 큰 숫자 */
.article-stats{display:grid;gap:var(--s-12)}
@media (min-width:640px){.article-stats{grid-template-columns:repeat(min(var(--n),3),minmax(0,1fr))}}
.article-stats__item{display:flex;flex-direction:column;gap:var(--s-6);padding:var(--s-20);border-radius:var(--r-lg);background:var(--surface-alt)}
.article-stats__value{color:var(--ink);font-size:var(--t-heading-lg);line-height:1.25;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;word-break:keep-all}
.article-stats__label{color:var(--ink-body);font-size:var(--t-body-sm);line-height:1.55;word-break:keep-all}
.article-stats__note{color:var(--ink-subtle);font-size:var(--t-caption)}
/* 점검표 */
.article-checklist{padding:var(--s-24) var(--s-20);border-radius:var(--r-xl);background:var(--surface-alt)}
@media (min-width:768px){.article-checklist{padding:var(--s-28) var(--s-32)}}
.article .article-checklist__title{margin:0 0 var(--s-16);color:var(--ink);font-size:var(--t-body-md);font-weight:700}
.article .article-checklist ul{display:grid;gap:var(--s-12);margin:0;padding:0;list-style:none}
.article .article-checklist li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-10);margin:0;color:var(--ink-body);font-size:var(--t-body-sm);line-height:1.65}
.article-checklist li .ico{width:22px;height:22px;padding:3px;margin-top:1px;border-radius:6px;background:var(--surface);color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--line)}
/* 알림 */
.article-callout{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-12);padding:var(--s-20);border-radius:var(--r-lg);background:var(--accent-soft)}
.article-callout--warn{background:var(--warn-soft)}
.article-callout--info{background:var(--surface-alt)}
.article-callout__icon{color:var(--accent-text);padding-top:3px}
.article-callout--warn .article-callout__icon{color:var(--warn-text)}
.article-callout--info .article-callout__icon{color:var(--ink-muted)}
.article .article-callout__title{margin:0 0 var(--s-4);color:var(--ink);font-size:var(--t-body-md);font-weight:700}
.article-callout__text{color:var(--ink-body);font-size:var(--t-body-sm);line-height:1.7}
.article .article-callout__text > * + *{margin-top:.6em}
.article .article-callout__text p{margin:0}
/* 자주 묻는 질문 */
.article > .article-faq{margin-top:3em}
.article .article-faq__title{margin:0 0 var(--s-12)}
.article-faq__item{border-bottom:1px solid var(--line)}
.article-faq__item:first-of-type{border-top:1px solid var(--line)}
/* 펼쳐 둔 질문(h3)과 답: 질문은 굵게, 답은 한 단계 작게. 접는 칸(details·summary)으로 쓴 예전 글도 그대로 보인다 */
.article .article-faq__q{margin:0;padding:var(--s-20) 0 var(--s-8);color:var(--ink);font-size:var(--t-body-md);font-weight:650;line-height:1.5;word-break:keep-all}
.article-faq__q + .article-faq__a{padding-bottom:var(--s-20)}
.article-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);min-height:var(--s-56);padding:var(--s-16) 0;color:var(--ink);font-size:var(--t-body-md);font-weight:650;line-height:1.5;cursor:pointer;list-style:none;word-break:keep-all}
.article-faq__item summary::-webkit-details-marker{display:none}
.article-faq__item summary .ico{flex:none;color:var(--ink-subtle);transition:transform var(--d-3) var(--ease-out)}
.article-faq__item[open] summary .ico{transform:rotate(180deg)}
.article-faq__a{padding:0 0 var(--s-20);color:var(--ink-body);font-size:var(--t-body-sm);line-height:1.75}
.article .article-faq__a p{margin:0}
.article .article-faq__a > * + *{margin-top:.6em}