/* =========================================================================
   Single Article — 논문형 2단 레이아웃 (.arts-*)  [공홈 articles.css 556~747 이식]
   - 좌측 sticky 사이드바(목차·저자·Sources) + 우측 본문 + 액션(링크복사).
   - 다크/편하게보기(웜) 모드 제외 (reading-mode 미로드).
   - 토큰: capsule-site.css 의 --c-star · --fs-star · --radius-star 토큰 사용. --ent 는 아래 자체 정의.
   ========================================================================= */

/* ============================================================
   SINGLE ARTICLE — 논문형 2단 레이아웃 (.arts-*)
   좌측 sticky 사이드바(목차·저자·Sources) + 우측 본문(.entry-content는 blog.css).
   ============================================================ */
/* 캡슐 토큰에 없는 값 로컬 폴백 (공홈 variables.css 값 + design-hs green 브랜드 토큰).
   green 브랜드 토큰(--color-accent-green*)은 아직 라이브 capsule-site.css에 없어서 여기서 정의 —
   design-hs 홈 재설계가 main에 합쳐지면 :root 정의가 이걸 덮어써도 값 동일(무해). */
.arts {
    --fs-xs: 13px; --fs-3xs: 11px; --radius-lg: 12px;
    --color-accent-green: #0D9488; --color-accent-green-strong: #0F766E;
}
/* 상단 패딩 = 투명 헤더 클리어런스 포함(블로그·뉴스 싱글과 동일 규칙). 모바일은 아래 768 블록에서 92px. */
.arts { padding: clamp(64px, 8vw, 104px) 0 clamp(64px, 8vw, 104px); }
.arts { --ent: var(--color-accent-green, #0D9488); }
.arts[data-entity="ai-ready-data"]           { --ent: var(--color-accent-green); }
.arts[data-entity="sensitive-workflow"]      { --ent: var(--color-accent-green); }
.arts[data-entity="ai-ready-transformation"] { --ent: var(--color-accent-green); }
.arts[data-entity="decision"]                { --ent: var(--color-accent-green); }

/* 헤더 — 레이아웃 풀폭 좌측 정렬, 논문 표제처럼 */
.arts-head { margin: 0 0 clamp(28px, 4vw, 44px); }
.arts-head__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: var(--fs-xs); color: var(--c-text-muted); margin-bottom: 14px;
}
.arts-head__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.arts-head__meta a:hover { border-bottom-color: currentColor; }
.arts-head__meta a.arts-head__ent, .arts-head__ent { color: var(--ent); font-weight: 600; }
.arts-head__t { margin: 0; max-width: none; overflow-wrap: anywhere; }

/* 레이아웃 — 사이드바 + 본문 (좌측 넓게, 우측 액션은 좁게) */
.arts-layout { display: flex; align-items: flex-start; gap: clamp(28px, 3.5vw, 48px); }
.arts-rail {
    flex: 0 0 272px; position: sticky; top: 92px;
    /* 내용이 뷰포트보다 길면 사이드바 안에서 스크롤(스크롤바는 숨김). Lenis 충돌은 smooth-scroll.js가 data-lenis-prevent로 처리 */
    max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
}
.arts-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }
.arts-main { flex: 1 1 auto; min-width: 0; }   /* 풀폭 — 사이드바·액션 레일 사이를 채움 */

/* 사이드바 공통 — 섹션 구분 헤어라인 */
.arts-rail > * + * { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--c-border-light); }
.arts-rail__h {
    margin: 0 0 12px; font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--c-text-subtle);
}

/* 목차 (TOC) — 번호 매김 + 스크롤 스파이 */
.arts-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.arts-toc__item { margin: 0; }
.arts-toc__lnk {
    display: block; padding: 6px 0 6px 14px;
    border-left: 2px solid var(--c-border-light);
    line-height: 1.4; color: var(--c-text-muted);
    text-decoration: none; transition: color .18s, border-color .18s;
}
/* 레벨 위계: h2(상위)=14.5px 세미볼드 / h3(하위)=12.5px 레귤러 + 텍스트만 들여쓰기(세로선은 연속 레일) */
.arts-toc__item--h2 .arts-toc__lnk { font-size: 14.5px; font-weight: 500; color: var(--c-text-body); }
.arts-toc__item--h3 .arts-toc__lnk { padding-left: 28px; font-size: 12.5px; }
.arts-toc__lnk:hover { color: var(--c-text-heading); }
.arts-toc__lnk.is-active {
    color: var(--ent); font-weight: 600; border-left-color: var(--ent);
}

/* 저자 — 아코디언(이름·직위만 보이고 클릭 시 소개) */
.arts-auth__d { }
.arts-auth__sum {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    cursor: pointer; list-style: none;
}
.arts-auth__sum::-webkit-details-marker { display: none; }
.arts-auth__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arts-auth__name { font-size: 15px; font-weight: 700; color: var(--c-text-heading); transition: color .15s ease; }
.arts-auth__role { font-size: 12.5px; color: var(--c-text-muted); }
.arts-auth__sum:hover .arts-auth__name { color: var(--ent); }
.arts-auth__chev { flex: 0 0 auto; margin-top: 3px; color: var(--c-text-subtle); transition: transform .2s ease; }
.arts-auth__d[open] .arts-auth__chev { transform: rotate(180deg); color: var(--ent); }
.arts-auth__more { margin-top: 12px; }
.arts-auth__bio  { margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text-body); }
.arts-auth__mail {
    display: inline-block; margin-top: 10px; font-size: 12.5px;
    color: var(--ent); text-decoration: none; border-bottom: 1px solid transparent;
}
.arts-auth__mail:hover { border-bottom-color: currentColor; }

/* Sources — 논문형 번호 참고문헌 */
.arts-src__list { list-style: none; margin: 0; padding: 0; counter-reset: src; }
.arts-src__item {
    position: relative; padding-left: 24px; margin: 0 0 10px;
    font-size: 12.5px; line-height: 1.5; color: var(--c-text-body);
}
.arts-src__item:last-child { margin-bottom: 0; }
.arts-src__item::before {
    counter-increment: src; content: "[" counter(src) "]";
    position: absolute; left: 0; top: 0; color: var(--c-text-subtle);
    font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.arts-src__item a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(13, 148, 136, 0.4); }
.arts-src__item a:hover { color: var(--ent); border-bottom-color: var(--ent); }

/* 본문 */
.arts-main__fig { margin: 0 0 clamp(24px, 3vw, 36px); border-radius: var(--radius-lg, 12px); overflow: hidden; }
.arts-main__fig img { width: 100%; height: auto; display: block; }

/* prose 타이포 — blog.css(.blog-single__content)와 동일 톤을 아티클에 이식
   (blog prose가 .blog-single 스코프라 .arts-main엔 안 먹어서 행간·이미지여백이 깨졌던 것 수정) */
.arts-main__content.entry-content {
    font-size: 17px; line-height: 1.8; letter-spacing: -0.1px;
    color: rgba(28, 28, 28, 0.75);
    scroll-margin-top: 92px;
}
.arts-main__content.entry-content > * { margin-bottom: 1.1em; }
.arts-main__content.entry-content :is(h2, h3, h4) {
    color: var(--c-text-heading);
    font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.4px !important;
    margin: 2em 0 0.7em; scroll-margin-top: 92px;
}
.arts-main__content.entry-content h2 { font-size: 24px !important; }
.arts-main__content.entry-content h3 { font-size: 20px !important; }
.arts-main__content.entry-content h4 { font-size: 18px !important; }
.arts-main__content.entry-content a:not(.glossary-link):not(.product-link) {
    color: var(--color-accent-green-strong); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: rgba(13, 148, 136, 0.35);
    transition: text-decoration-color 0.15s ease;
}
.arts-main__content.entry-content a:hover { text-decoration-color: currentColor; }
/* 글로서리·제품 autolink — blog/news/glossary와 동일 점선 밑줄(아티클에 누락됐던 스타일 보강) */
.arts-main__content.entry-content a.glossary-link,
.arts-main__content.entry-content a.product-link {
    color: var(--c-text-dark); text-decoration: none;
    border-bottom: 1px dotted rgba(28, 28, 28, 0.3);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.arts-main__content.entry-content a.glossary-link:hover,
.arts-main__content.entry-content a.product-link:hover {
    color: var(--color-accent-green-strong);
    border-bottom-style: solid; border-bottom-color: currentColor;
}
.arts-main__content.entry-content img {
    display: block; margin: 32px auto; max-width: 100%; height: auto;
    border-radius: 8px; border: 1px solid var(--c-border-light);
}
.arts-main__content.entry-content figure { margin: 32px auto; text-align: center; }
.arts-main__content.entry-content figure img { margin: 0 auto; }
.arts-main__content.entry-content figcaption {
    font-size: var(--fs-xs); color: var(--c-text-subtle); margin-top: 10px; text-align: center;
}
.arts-main__content.entry-content ul,
.arts-main__content.entry-content ol { padding-left: 24px; margin-bottom: 1.1em; }
.arts-main__content.entry-content li { margin-bottom: 0.4em; }

/* 푸터 — 헤어라인 없이 태그(#topics)만 */
.arts-main__foot {
    margin-top: clamp(28px, 4vw, 44px);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.arts-main__topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.arts-main__dot { color: var(--c-text-subtle); }

/* 우측 액션 레일 — sticky 링크복사 동그란 버튼 (그림자 없음, __btn 트랩 회피) */
.arts-actions { flex: 0 0 44px; position: sticky; top: 92px; }
.arts-actions__copy {
    width: 44px; height: 44px; border-radius: 50% !important;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border-light);
    background: #fff; color: var(--c-text-muted); cursor: pointer;
    padding: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.arts-actions__copy svg { display: block; }
.arts-actions__copy:hover { border-color: var(--color-accent-green); color: var(--color-accent-green); }
.arts-actions__copy:active { transform: scale(0.94); }
.arts-actions__copy.is-copied { color: var(--color-accent-green); border-color: var(--color-accent-green); }
.arts-actions__copy .arts-actions__ico-ok { display: none; }
.arts-actions__copy.is-copied .arts-actions__ico-link { display: none; }
.arts-actions__copy.is-copied .arts-actions__ico-ok { display: block; }

/* 반응형 — 사이드바를 본문 아래로, 목차 숨김, 액션 레일은 우하단 플로팅 */
@media (max-width: 960px) {
    .arts { overflow-x: hidden; }           /* 모바일 가로 오버플로 봉인 (sticky 사이드바 비활성 상태라 안전; 액션바는 fixed라 클립 안 됨) */
    .arts-layout { flex-direction: column; gap: 0; }
    .arts-main { order: 1; max-width: 100%; }
    .arts-rail {
        order: 2; position: static; flex-basis: auto; width: 100%;
        max-height: none; overflow: visible;   /* 모바일은 본문 아래 자연 흐름 — 내부 스크롤 해제 */
        margin-top: clamp(40px, 6vw, 56px); padding-top: clamp(28px, 4vw, 36px);
        border-top: 1px solid var(--c-border-light);
    }
    .arts-toc { display: none; }            /* 모바일엔 목차 숨김(본문 아래라 의미 약함) */
    .arts-rail > * + * { margin-top: 24px; padding-top: 24px; }
    .arts-head__t { max-width: 100%; }
    /* 액션바 위치(우하단 세로 + auto-hide)는 reading-mode.css의 .read-actbar가 담당 */
}

/* 모바일: 투명 헤더 클리어런스 — 블로그 싱글(.blog-single 92px)과 동일 */
@media (max-width: 768px) {
    .arts { padding-top: 92px; }
}

/* ── 인용/코드/표 — arts-main 프로세 보강 (blog.css .blog-single 스코프라 안 먹던 것 이식) ── */
.arts-main__content.entry-content blockquote {
    border-left: 3px solid var(--ent);
    padding: 4px 0 4px 20px; margin: 1.6em 0;
    color: var(--c-text-muted); font-style: normal;
}
.arts-main__content.entry-content blockquote p:last-child { margin-bottom: 0; }
.arts-main__content.entry-content code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: rgba(28, 28, 28, 0.05); padding: 2px 6px; border-radius: 4px; color: var(--c-text-dark);
}
.arts-main__content.entry-content pre {
    background: #fafafc; border: 1px solid var(--c-border-light);
    padding: 16px 20px; border-radius: 8px; overflow-x: auto;
    font-family: var(--font-mono); font-size: 14px; line-height: 1.6; margin: 1.6em 0;
}
.arts-main__content.entry-content pre code { background: none; padding: 0; }
.arts-main__content.entry-content table {
    width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px;
}
.arts-main__content.entry-content :is(th, td) {
    border: 1px solid var(--c-border-light); padding: 10px 14px; text-align: left; vertical-align: top;
}
.arts-main__content.entry-content th { background: var(--c-bg-light-alt, #f7f7f6); font-weight: 600; color: var(--c-text-heading); }

/* ── 모바일: 액션(링크복사)은 reading-mode.css 미사용이라 본문 흐름에 정적 배치 ── */
@media (max-width: 960px) {
    .arts-actions { position: static; order: 3; flex-basis: auto; margin-top: 24px; }
}


/* ── 본문 삽입 SVG 다이어그램 (.ds-figure) — sjkang 라이브 규칙 이식, arts 스코프 ── */
.arts-main__content .ds-figure {
    margin: 28px 0; padding: 20px;
    background-color: var(--c-bg-light-alt, #f7f8fb); border: 1px solid var(--c-border-light, #e5e7eb);
    border-radius: 8px;
}
.arts-main__content .ds-figure__svg-wrap { width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.arts-main__content .ds-figure__svg-wrap::-webkit-scrollbar { display: none; }
.arts-main__content .ds-figure__svg { display: block; width: 100%; height: auto; min-width: 640px; max-width: 100%; }
.arts-main__content .ds-figure__caption {
    margin-top: 12px; font-family: var(--font-mono, monospace);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--c-text-subtle); text-align: center;
}

/* ── 본문 미디어 방어 — raw svg/img(도식 포함) 컬럼 밖으로 안 넘게 ── */
.arts-main__content svg,
.arts-main__content img { max-width: 100%; height: auto; }
.arts-main__content > svg,
.arts-main__content p > svg { display: block; margin: 24px auto; }