/* 살아 있는 화면(2026-10-15) — live.js 의 짝. 모든 규칙은 스크립트가 붙인 표식(html.lv-js · [data-lv] · .sxt-on · .lv-auto · .lv-run · .lv-glow · .press-row[data-line]) 아래에만 있다. 소식 줄의 흐름 자체는 2026-10-26 부터 공용 엔진(ark2026.css .mq-*)이다.
 * 스크립트가 없으면 이 파일은 아무 화면도 바꾸지 않는다(소식 한 줄 배치만 예외 — 원래도 가로 줄이었다). 모션 줄이기면 ark2026.css 의 전역 규칙이 전환·애니메이션을 끈다. */

:root{--lv-ease:cubic-bezier(.22,1,.36,1)}

/* A) 스크롤 등장 — 아래에서 18px 떠오르며 나타난다(형제는 70ms 간격, 최대 5칸). 끝나면 live.js 가 표식을 떼어 평소 상태 */
html.lv-js [data-lv]{opacity:0;transform:translate3d(0,18px,0)}
html.lv-js [data-lv].lv-in{opacity:1;transform:none;transition:opacity .6s var(--lv-ease),transform .6s var(--lv-ease);transition-delay:var(--lv-d,0ms)}

/* B) 소식 한 줄 — 2줄 접기 대신 한 줄 가로 스크롤(3j 는 data-line 이면 붙지 않는다). 카드 폭: 휴대폰 화면의 74%, 넓은 화면은 한 줄에 4장 남짓 */
/*   .press-sec .press-row 의 2·3열 격자(ark2026.css, 2줄 접기용)보다 구체적으로 — 같은 구간 선택자 + data-line */
.press-sec .press-row[data-line],.press-row[data-line]{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:auto;overscroll-behavior-x:contain;padding-bottom:10px}
.press-sec .press-row[data-line] .press-card,.press-row[data-line] .press-card{display:grid;flex:0 0 auto;width:min(74vw,272px);scroll-snap-align:start}
@media (min-width:1100px){.press-sec .press-row[data-line] .press-card,.press-row[data-line] .press-card{width:251px;width:calc((100cqw - 3 * 14px) / 4.15)}}   /* 줄 상자(.mq-rail = 컨테이너) 폭 기준 — 트랙이 max-content 라 % 가 없다(2026-10-26 통일). 앞의 px 는 cqw 모르는 옛 브라우저 폴백 */
.press-row[data-line] + .press-more,.mq-rail + .press-more,.hs-wrap + .hs-cue + .press-more,.hs-wrap + .press-more{margin-top:14px}   /* 줄 상자(.mq-rail) 다음에 올 때도 같은 14px(2026-10-26) */
/* 흐름은 공용 엔진(ark2026.js 3g, [data-mq])으로 옮겼다(2026-10-26 통일) — .is-flow 규칙 제거 */

/* C) 특허·인증 자동 전환 — 고른 상자 아래 선이 다음 전환까지 차오른다(진행 과정 레일과 같은 표기). 마우스·초점이 머물면 막대도 선다 */
[data-cert].lv-auto .cert-card{overflow:hidden}
[data-cert].lv-auto .cert-card.lv-run::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal,#347BF7);transform-origin:left;transform:scaleX(0);animation:lvFill var(--lv-dur,4800ms) linear forwards}
[data-cert].lv-hold .cert-card.lv-run::after{animation-play-state:paused}
/* 휴대폰(640px 미만)은 탭 줄 카드 — 남은 시간을 진행 과정 탭과 같은 테두리 빛 선으로(아래 막대 대신, 2026-10-26). 그 이상 폭은 아래 막대 그대로 */
[data-cert] .lv-trace{display:none}
@media (max-width:639px){
  [data-cert] .lv-trace{display:block}
  [data-cert].lv-auto .cert-card.lv-run::after{display:none}
  [data-cert].lv-auto .cert-card.lv-run .lv-trace rect{opacity:1;animation:lvTrace var(--lv-dur,4800ms) linear forwards}
  [data-cert].lv-hold .cert-card.lv-run .lv-trace rect{animation-play-state:paused}
}
@keyframes lvFill{to{transform:scaleX(1)}}

/* D) 기술력 탭 — 위 6칸 카드가 탭, 아래엔 고른 솔루션 한 장. 높이는 live.js 가 가장 큰 장으로 잡아 둔다(넘길 때 아래가 들썩이지 않게) */
.sxt-on .sxr>.sx{display:none}
.sxt-on .sxr>.sx.on,.sxt-on.sxt-measure .sxr>.sx{display:grid}
.sxt-on.sxt-measure .sxr>.sx:not(.on){position:absolute;visibility:hidden;left:0;right:0}
.sxt-on .sxr{position:relative;margin-top:0}
.sxt-on .sxr>.sx.on{animation:lvPanel .5s var(--lv-ease)}
@keyframes lvPanel{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
/* 손가락으로 민 장(live.js D, 휴대폰 2026-10-28): 민 방향에서 들어온다 — 왼쪽으로 밀면(다음) 오른쪽에서, 오른쪽으로 밀면(이전) 왼쪽에서 */
.sxt-on .sxr>.sx.on.sw-l{animation:lvSwL .3s var(--lv-ease)}
.sxt-on .sxr>.sx.on.sw-r{animation:lvSwR .3s var(--lv-ease)}
@keyframes lvSwL{from{opacity:.3;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}}
@keyframes lvSwR{from{opacity:.3;transform:translate3d(-48px,0,0)}to{opacity:1;transform:none}}
.sxt-on .sxn li{position:relative}
.sxt-on .sxn a{position:relative;overflow:hidden;cursor:pointer}
.sxt-on .sxn-arr{visibility:hidden}
.sxt-on .sxn li.on a{background:rgba(52,123,247,.18);border-color:rgba(143,179,255,.75)}
.sxt-on .sxn li.on b{color:#fff}
/*   진행 표시(2026-10-19 대표 '진행 순서에 따라서 테두리에 색칠'): 고른 카드의 테두리를 빛 선이 왼쪽 위부터 시계 방향으로 한 바퀴 — 다 그리면 다음 솔루션.
     svg 선(pathLength 100)은 카드 테두리 위에 겹친다(카드가 overflow:hidden 이라 바깥 절반은 잘려 테두리 두께와 같아진다). 멈춤이면 선도 선다 */
.lv-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lv-trace rect{fill:none;stroke:#8FB3FF;stroke-width:3;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0}
.sxt-on .sxn li.lv-run .lv-trace rect{opacity:1;animation:lvTrace var(--lv-dur,10800ms) linear forwards}
.sxt-on.lv-hold .sxn li.lv-run .lv-trace rect{animation-play-state:paused}
@keyframes lvTrace{to{stroke-dashoffset:0}}

/* E) SBS 인터뷰 문장 — 테두리를 따라 빛이 한 바퀴. @property 가 없는 브라우저는 빛이 멈춘 채 테두리만 밝아진다 */
@property --lv-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.sbs-step{position:relative;isolation:isolate}
.sbs-step::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .45s;
  background:conic-gradient(from var(--lv-a),transparent 0 58%,rgba(143,179,255,.35) 70%,#8FB3FF 82%,#fff 86%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sbs-step.lv-glow::after{opacity:1;animation:lvSpin 2.6s linear infinite}
.sbs-step.lv-glow{border-color:rgba(143,179,255,.42);background:rgba(52,123,247,.07)}
@keyframes lvSpin{to{--lv-a:360deg}}

/* F) 휴대폰 시안 ?mob=b(html.mob-b, 2026-10-26) — 장 끝 이전·다음(live.js D ①). 표식 없으면 live.js 가 만들지도 않고, 만들어도 한 열 배치(899px 이하)에서만 보인다.
     단추 색은 자리의 글자색을 따른다(홈 어두운 장 = 밝은 선, 가이드 밝은 장 = 남색 선) */
.sxt-nav{display:none}
@media (max-width:899px){
  html.mob-b .sxt-on .sxr>.sx>.sxt-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;order:9;min-width:0;padding:0 clamp(24px,3.4vw,44px) clamp(22px,3.4vw,30px)}
  .sxt-nav-b{display:grid;gap:2px;align-content:center;min-height:56px;min-width:0;padding:8px 12px;border-radius:12px;border:1px solid currentColor;background:transparent;color:inherit;opacity:.85;text-align:left;font:inherit;line-height:1.3;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sxt-nav-next{text-align:right}
  .sxt-nav-next:only-child{grid-column:2}
  .sxt-nav-k{font-size:11.5px;letter-spacing:.06em;opacity:.75}
  .sxt-nav-prev .sxt-nav-k::before{content:"‹ "}
  .sxt-nav-next .sxt-nav-k::after{content:" ›"}
  .sxt-nav-b b{font-size:14px;font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
  .sxt-nav-b:hover,.sxt-nav-b:focus-visible{opacity:1;background:rgba(127,127,127,.12)}
  html.mob-b .sxt-on .sx h3[tabindex]:focus:not(:focus-visible){outline:none}   /* 단추로 옮긴 초점(live.js jump) — 손가락·마우스엔 테두리 없음, 키보드엔 평소 초점 표시 */
}

@media (prefers-reduced-motion:reduce){.lv-trace{display:none}html.lv-js [data-lv]{opacity:1;transform:none}.sbs-step::after{display:none}.sxt-on .sxr>.sx.on{animation:none}}