/* /test/insight — 콘텐츠(콘텐츠룸). 이 페이지에서만 로드된다. 클래스는 전부 insight- 접두.
   2026-10-14 대표 시안으로 재구성: 밝은 머리 + 말머리 탭(전체 없음) · 검색 · 같은 크기 카드 9개 · 더 보기 · 공식 채널 4장.
   (종전 글자 수 계기판·말머리 막대·편 격자·선두 큰 카드 규칙은 화면에서 빠져 같이 지웠다.)
   말머리 색 t1~t5 = 컨트롤러 $cats 순서(소식·칼럼·인터뷰·캠페인·리포트), t0 = 알 수 없는 말머리. */
.insight{--c1:#347BF7;--c2:#5B8DEF;--c3:#7C93B8;--c4:#2BA58C;--c5:#D69E1E;--c0:#8FA2BD}
.insight .t1{--c:var(--c1)}.insight .t2{--c:var(--c2)}.insight .t3{--c:var(--c3)}
.insight .t4{--c:var(--c4)}.insight .t5{--c:var(--c5)}.insight .t0{--c:var(--c0)}
.insight-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── 머리(밝은 바탕) ─────────────────────────────────────── */
.insight-top{background:#fff;padding-block:clamp(36px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.insight-top .crumbs{font-size:13px;color:var(--mute);display:flex;gap:6px;flex-wrap:wrap}
.insight-top .crumbs a{color:var(--mute);text-decoration:none}
.insight-top h1{margin-top:14px;font-size:clamp(30px,4.4vw,46px);line-height:1.2;color:var(--navy);letter-spacing:-.02em}
.insight-lede{margin-top:12px;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:var(--mute);max-width:40em}
.insight-tabs{display:flex;gap:4px;margin-top:clamp(24px,3vw,36px);overflow-x:auto;scrollbar-width:none}
.insight-tabs::-webkit-scrollbar{display:none}
.insight-tabs a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;font-size:16px;font-weight:600;color:var(--mute);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.insight-tabs a:hover{color:var(--navy)}
.insight-tabs a[aria-current]{color:var(--signal);border-bottom-color:var(--signal)}

/* ── 목록 ─────────────────────────────────────────────────── */
.insight-list{background:var(--paper);scroll-margin-top:72px}
.insight-list-head{display:flex;justify-content:flex-end;margin-bottom:20px}
.insight-search{position:relative;width:min(100%,360px)}
.insight-search input{width:100%;min-height:48px;padding:0 50px 0 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--navy)}
.insight-search input:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
.insight-search input::-webkit-search-cancel-button{display:none}
.insight-search button{position:absolute;right:2px;top:2px;bottom:2px;width:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:10px}
.insight-search button span{width:18px;height:18px;background:var(--mute);-webkit-mask:var(--ic-search) center/contain no-repeat;mask:var(--ic-search) center/contain no-repeat}
.insight-search button:hover span{background:var(--signal)}
.insight{--ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E")}
.insight-empty{padding:40px 0;color:var(--mute)}
.insight-empty a{color:var(--signal)}
.insight-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.insight-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.insight-card{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--navy);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;min-width:0}
.insight-card:hover{transform:translateY(-3px);border-color:var(--frost);box-shadow:0 18px 36px -24px rgba(15,30,51,.45)}
.insight-card:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.insight-thumb{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,var(--ink),#16304F);overflow:hidden}
.insight-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.insight-card:hover .insight-thumb img{transform:scale(1.04)}
.insight-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(22px,3vw,28px);font-weight:700;color:#fff;letter-spacing:.04em;opacity:.85}
.insight-body{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:16px 18px 18px;min-width:0}
.insight-meta b{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.insight-card h3{font-size:17px;line-height:1.45;font-weight:600;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.insight-d{font-size:13px;color:var(--mute)}

/* ── 아크링크 공식 채널 4장 ─────────────────────────────── */
.insight-hub{background:#fff;border-top:1px solid var(--line)}
.insight-hubs{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.insight-hubs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.insight-hubs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.insight-site{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;text-decoration:none;color:var(--navy);min-width:0;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.insight-site:hover{border-color:var(--signal);transform:translateY(-2px);box-shadow:0 18px 36px -26px rgba(15,30,51,.45)}
.insight-site:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.insight-site-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.insight-ic{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--signal) 10%,#fff);display:grid;place-items:center;flex:0 0 auto}
.insight-ic::before{content:"";width:22px;height:22px;background:var(--signal);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.insight-site-go{color:var(--mute);font-size:18px;line-height:1}
.insight-site:hover .insight-site-go{color:var(--signal)}
.insight-site-k{font-size:18px;font-weight:700;margin-top:4px}
.insight-site-d{font-size:14px;color:var(--mute);line-height:1.6;overflow-wrap:anywhere}
.insight-site-dom{font-size:12.5px;color:var(--signal);overflow-wrap:anywhere;padding-top:10px;border-top:1px solid var(--line)}
/* 아이콘(CSS 마스크 — 인라인 SVG 는 조판 필터 허용 목록 밖, C23) */
.insight .ic-mag{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E")}
.insight .ic-ins{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M7 16v-4M12 16V8M17 16v-7'/%3E%3C/svg%3E")}
.insight .ic-gui{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.4 3.1 8 7.5 9.5 4.4-1.5 7.5-5.1 7.5-9.5V6z'/%3E%3Cpath d='m8.8 12 2.2 2.2 4.2-4.4'/%3E%3C/svg%3E")}
.insight .ic-lab{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M9 3h6M10 3v6L4.8 18.2A1.8 1.8 0 0 0 6.4 21h11.2a1.8 1.8 0 0 0 1.6-2.8L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){
  .insight-card,.insight-card:hover,.insight-site:hover,.insight-card:hover .insight-thumb img{transform:none}
}

/* 모바일: 카드는 가로형 목록(사진 왼쪽) — 스크롤 길이 절반. 읽는 글자 바닥 12px(2026-10-01 전면 평가) */
@media (max-width:639px){
  .insight-list-head .insight-search{width:100%}
  .insight-card{grid-template-rows:none;grid-template-columns:116px minmax(0,1fr);align-items:start}
  .insight-thumb{margin:14px 0 14px 12px;border-radius:8px}
  .insight-ph{font-size:15px}
  .insight-body{padding:12px 14px 14px;gap:6px}
  .insight-card h3{font-size:15.5px}
  .insight-tabs a{padding:0 14px;font-size:15px}
}
/* 공식 채널 카드 — 휴대폰은 아이콘 옆에 채널 이름(매거진·인사이트·가이드·아크링크 연구소, 대표 2026-10-27) */
@media (max-width:699px){
  .insight-site{grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto;column-gap:12px;row-gap:10px;align-items:center;padding:18px 18px 16px}
  .insight-site-top{display:contents}
  .insight-ic{grid-column:1;grid-row:1}
  .insight-site-k{grid-column:2;grid-row:1;margin-top:0}
  .insight-site-go{grid-column:3;grid-row:1}
  .insight-site-d,.insight-site-dom{grid-column:1 / -1}
}

/* ── 휴대폰·태블릿(899px 이하) 가로 흐르는 줄(대표 2026-10-28 "모바일에 맞게 슬라이드 되게") — 소식 글 목록·공식 채널 4장.
   흐름·멈춤·복제·손 밀기 = 공용 엔진(ark2026.js 3g, insight.php .insight-mq[data-mq]>.mq-rail>.mq-track). 검색 결과가 줄 안에 다 들어가면 엔진이 고정(.mq-fit).
   900px 이상은 원래 격자 — 트랙 폭을 풀어 넘침 0(복제 0) */
@media (max-width:899px){
  .insight-mq .mq-track{display:flex;gap:12px}
  .insight-mq .mq-rail{scroll-snap-type:x mandatory}
  .insight-mq .mq-track>*{flex:0 0 auto;scroll-snap-align:start}
  .insight-grid.mq-track>*{width:280px;width:min(300px,80cqw)}
  .insight-hubs.mq-track>*{width:260px;width:min(280px,76cqw)}
}
@media (min-width:900px){
  .insight-mq .mq-track{width:auto}
  .insight-mq .mq-track>[data-mq-clone]{display:none}
}