/* ============================================================
   cubig.ai/learn — Learn Hub (3단 매거진)
   레이아웃 전용. 카드 타이포(art-card·blog-card·glossary-item)는
   articles.css / blog.css / glossary.css에서 상속 → 라이브와 동일.
   스코프 = .learn-page
   ============================================================ */

/* 엔티티 색 계약 (articles.css와 동일 — art-card --ent 공급) */
.learn-page [data-entity="ai-ready-data"]           { --ent: #8A77E0; }
.learn-page [data-entity="sensitive-workflow"]      { --ent: #12A150; }
.learn-page [data-entity="ai-ready-transformation"] { --ent: #D9730D; }
.learn-page [data-entity="decision"]                { --ent: #175DFF; }
/* --art-radius는 .cubig-articles 스코프에만 정의돼 있어 learn 페이지에선 미정의 → art-card 썸네일이 각졌었음.
   blog-card(12px)와 통일되게 .learn-page에도 공급. */
.learn-page { --ent: var(--c-accent-violet, #8A77E0); --art-radius: var(--r-lg); }

/* ── 히어로: 미니멀 마스트헤드 (타이틀만) ───────────────────── */
.learn-hero {
    /* top padding = 블로그 아카이브(.blog-archive)와 동일 → 타이틀 시작 위치 일치 */
    padding: clamp(72px, 9vw, 120px) 0 clamp(40px, 4.5vw, 56px);
    background:
        radial-gradient(90% 120% at 88% -25%, color-mix(in srgb, var(--c-accent-violet) 26%, transparent), transparent 60%),
        linear-gradient(180deg, var(--c-accent-violet-soft, #f3f0fc) 0%, transparent 70%);
}
.learn-hero__t {
    /* 아티클(.art-hd__name)·블로그(.blog-archive__hd) 히어로 타이틀과 동일.
       굵기는 ibm-overrides가 모든 h1에 강제하는 700에 맞춤(블로그/아티클 실제 렌더값). */
    font-size: clamp(36px, 4.5vw, 56px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
    color: var(--c-text-heading);
    margin: 0;
}
/* "Hub"도 제목 본문과 동일한 검정(ibm가 h1에 강제하는 --c-text-dark) + 굵기 700 */
.learn-hero__t .accent { color: var(--c-text-dark) !important; font-weight: 700 !important; }
/* 진입 애니메이션 — 히어로는 reveal 시스템의 첫 섹션 제외(cv-first) 대상이라,
   단일 아티클 히어로(.art-hd)와 동일한 artEnter keyframe(articles.css에서 enqueue됨)으로 페이드업. */
.learn-hero__t { animation: artEnter .55s cubic-bezier(.22, .61, .36, 1) both; }
.learn-hero__sub {
    margin: clamp(12px, 1.4vw, 18px) 0 0; max-width: 560px;
    font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: var(--c-text-muted);
    animation: artEnter .55s cubic-bezier(.22, .61, .36, 1) .08s both;
}
@media (prefers-reduced-motion: reduce) { .learn-hero__t, .learn-hero__sub { animation: none; } }

/* ── 스포트라이트: 큰 카드 2(1번=Start Here) + 다크 글로서리 키워드 패널 ──
   클래스명은 ibm-overrides 트랩(__card=흰박스 강제 / __title=다크색·600 강제) 회피용 trap-free(__feat·__name). */
.learn-spot { padding: clamp(6px, 1vw, 14px) 0 clamp(26px, 3vw, 40px); }
.learn-spot__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 16px;
}
/* 큰 이미지 카드 */
.learn-spot__feat {
    position: relative; display: block; overflow: hidden;
    height: clamp(260px, 27vw, 340px);
    border-radius: var(--r-lg);
    text-decoration: none; isolation: isolate;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.learn-spot__feat:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(23, 23, 25, 0.4); }
.learn-spot__media {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #6f5cd6, #8A77E0);  /* 썸네일 없을 때 보라 폴백 */
    background-size: cover; background-position: center;
    transition: transform 0.45s ease;
}
.learn-spot__feat:hover .learn-spot__media { transform: scale(1.045); }
.learn-spot__feat::after {  /* 하단 가독 그라데이션 */
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(16, 16, 22, 0.84) 0%, rgba(16, 16, 22, 0.34) 40%, transparent 66%);
}
.learn-spot__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(18px, 2vw, 26px);
}
/* Start Here 뱃지 — 카드 왼쪽 위 고정(이미지 위, 그라데이션보다 위 z-index) */
/* 커밍순 뱃지(.art-soon)와 동일 — 솔리드 엔티티색 pill + 흰 글씨.
   클래스명은 ibm-overrides [class*="__badge"] 트랩(회색 chip 강제) 회피 위해 __start 사용. */
.learn-spot__start {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center;
    padding: 6px 13px; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--c-text-dark) !important;
    font-size: 12px; font-weight: 700 !important; letter-spacing: 0.02em; line-height: 1;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}
.learn-spot__name {
    font-size: clamp(17px, 1.4vw, 21px); font-weight: 700 !important; line-height: 1.32;
    letter-spacing: -0.01em; color: #fff !important;
}
.learn-spot__date { margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
/* 2열 — 엔티티 = 풀컬러 그라데이션 바(Halo Lab 산업 선택 톤). 엔티티 색 → 짙은 보라톤. 큰 카드 높이를 3등분 */
.learn-spot__mid { display: flex; flex-direction: column; gap: 14px; height: clamp(260px, 27vw, 340px); }
.learn-spot__row {
    flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 12px;
    padding: 0 clamp(18px, 1.8vw, 24px); border-radius: var(--r-lg);
    text-decoration: none; overflow: hidden;
    background: linear-gradient(120deg, var(--ent, #8A77E0) 0%, color-mix(in srgb, var(--ent, #8A77E0) 72%, #fff) 100%);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.learn-spot__row:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--ent, #8A77E0) 55%, transparent); }
.learn-spot__row-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.learn-spot__row-name { font-size: clamp(15px, 1.35vw, 18px); font-weight: 600 !important; line-height: 1.25; letter-spacing: -0.01em; color: #fff !important; }
.learn-spot__row-layer { font-size: 10.5px; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.learn-spot__row-go { flex: 0 0 auto; font-size: 26px; color: rgba(255, 255, 255, 0.9); line-height: 1; transition: transform 0.15s ease; }
.learn-spot__row:hover .learn-spot__row-go { transform: translateX(3px); }
/* 다크 키워드 패널 (Popular Keywords 룩) */
.learn-spot__kw {
    position: relative; display: flex; flex-direction: column;
    background: #18181b; border-radius: var(--r-lg);
    padding: clamp(18px, 1.6vw, 24px) clamp(20px, 1.8vw, 26px) 0;
    height: clamp(260px, 27vw, 340px); overflow: hidden;
}
/* 제목 고정, 용어 리스트는 자동 스크롤(JS) + 휠/드래그로 직접 조작 가능. 호버 시 자동 정지. */
.learn-spot__kw-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.learn-spot__kw-scroll::-webkit-scrollbar { display: none; }
.learn-spot__kw-scroll.is-dragging { cursor: grabbing; }
.learn-spot__kw-scroll.is-dragging a { pointer-events: none; }
.learn-spot__kw-track { display: flex; flex-direction: column; }
/* 하단 그라데이션 — '아래 더 있음' 어포던스 (다크 패널 색으로 페이드) */
.learn-spot__kw::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: linear-gradient(to top, #18181b 28%, rgba(24, 24, 27, 0));
    pointer-events: none;
}
.learn-spot__kw-h { margin: 0 0 12px; font-size: 16px; flex: 0 0 auto; }
.learn-spot__kw-h a { display: inline-flex; align-items: center; gap: 5px; color: #fff !important; text-decoration: none; transition: opacity 0.12s ease; }
.learn-spot__kw-h a::after { content: "›"; }
.learn-spot__kw-h a:hover { opacity: 0.7; }
.learn-spot__kw-list { list-style: none; margin: 0; padding: 0; }
/* 세트 사이(…10 ↔ 01…) 가운데 구분선 */
.learn-spot__kw-list::after { content: ""; display: block; width: 28px; height: 1px; margin: 16px auto; background: rgba(255, 255, 255, 0.25); }
.learn-spot__kw-list a {
    display: flex; align-items: baseline; gap: 12px; padding: 7px 0;
    color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14px;
    transition: color 0.12s ease;
}
.learn-spot__kw-list a:hover { color: var(--c-accent-violet-text, #a99bf0); }
.learn-spot__kw-n { flex: 0 0 auto; width: 18px; font-family: var(--font-mono, monospace); font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.learn-spot__kw-t { min-width: 0; }
@media (max-width: 900px) {
    .learn-spot__grid { grid-template-columns: 1fr 1fr; }
    .learn-spot__kw { grid-column: 1 / -1; height: auto; max-height: 320px; }
}
@media (max-width: 600px) {
    .learn-spot__grid { grid-template-columns: 1fr; }
    .learn-spot__feat { height: clamp(220px, 56vw, 300px); }
    .learn-spot__mid { height: auto; }   /* 1col에서 엔티티 바 눌림 방지 — 내용 높이로 */
    .learn-spot__row { min-height: 64px; }
}

/* ── 3단 매거진 (비대칭) ───────────────────────────────────── */
.learn-mag { padding: clamp(20px, 2.5vw, 32px) 0 clamp(32px, 4vw, 56px); }
.learn-mag__grid {
    display: grid;
    grid-template-columns: 1fr 1.55fr 1fr;
    gap: clamp(24px, 2.6vw, 40px);
    align-items: start;
}
.learn-col-wrap { position: relative; }
/* 하단 그라데이션 — '더 있음' 옅고 작게 (모바일에선 해제) */
.learn-col-wrap::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    pointer-events: none; z-index: 3;
}
.learn-col {
    max-height: 96vh; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    /* 스크롤 한 번에 다음 카드로 딱 넘어가는 스냅 — mandatory + 카드의 snap-stop:always.
       sticky 헤더(~46px) 뒤로 카드가 가리지 않게 scroll-padding-top을 헤더 높이만큼. */
    scroll-snap-type: y mandatory; scroll-padding-top: 52px;
    padding-bottom: 24px;
}
.learn-col::-webkit-scrollbar { width: 0; height: 0; display: none; }
.learn-col__h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; background: var(--c-bg-white, #fff);
    padding-bottom: 12px; margin-bottom: 16px; z-index: 2;
}
/* 컬럼 제목(h2) = 위계상 hero h1 아래. 제목 자체가 아카이브 링크(별도 '전체' 버튼 없음) */
.learn-col__h h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.learn-col__h h2 a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; transition: color 0.12s ease; }
.learn-col__h h2 a:hover { color: var(--c-accent-violet); }
.learn-col__h h2 a::after { content: "›"; font-weight: 600; }
/* 컬럼 안 카드 간격 */
.learn-col .art-card,
.learn-col .blog-card { margin-bottom: 36px; scroll-snap-align: start; scroll-snap-stop: always; }
/* 좌 아티클 + 우 블로그 카드 타이틀 완전 동일(크기·행간·자간·굵기). Featured는 예외(큼) */
.learn-col:not(.learn-col--feat) .art-card__name,
.learn-col .blog-card__name {
    font-size: 18px !important; font-weight: 600 !important;
    line-height: 1.34 !important; letter-spacing: -0.01em !important;
}
/* 카드 hover 통일 — 3열 전부 동일: 살짝 떠오름 + 썸네일 그림자 (art-card 줌은 끔) */
.learn-col .art-card,
.learn-col .blog-card { transition: transform 0.18s ease; }
.learn-col .art-card:hover,
.learn-col .blog-card:hover { transform: translateY(-3px); }
.learn-col .art-card:hover .art-card__art img { transform: none; }
.learn-col .art-card:hover .art-card__art,
.learn-col .blog-card:hover .blog-card__thumb { box-shadow: 0 16px 32px -16px rgba(23, 23, 25, 0.20); }
/* "최신" 카드 아이브로우 타입 라벨(아티클/블로그) — art-badge 굵기 따라가게(ibm span 400 무력화) */
.learn-type { font-weight: inherit !important; }
/* 컬럼 끝 '전체보기' 버튼 — 스크롤 끝 다음 액션, 아카이브로 */
.learn-col__all {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    margin-top: 8px; padding: 10px 16px; border-radius: var(--r-md);
    font-size: 14px; font-weight: 600;
    color: var(--c-accent-violet-text, #6f5cd6);
    background: var(--c-accent-violet-soft, #f3f0fc); border: 0;
    text-decoration: none;
    scroll-snap-align: start;
    transition: background 0.15s ease;
}
.learn-col__all:hover { background: color-mix(in srgb, var(--c-accent-violet, #8A77E0) 18%, #fff); }
/* Featured(중앙) = 큰 카드 */
.learn-col--feat .art-card__name { font-size: clamp(21px, 2vw, 26px) !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; font-weight: 700; }
.learn-col--feat .art-card__excerpt { -webkit-line-clamp: 3; }

/* ── 소셜/RSS 바닥 (채널별) ────────────────────────────────── */
.learn-floor { background: #fff; }
.learn-floor__inner { padding: 0 0 clamp(56px, 6.5vw, 96px); }
/* 채널 위 헤어라인 — 본문(콘텐츠) 폭. 매거진 그리드 좌우 끝과 정렬 */
.learn-floor__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 3.4vw, 40px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--c-border-light); }
.learn-floor__h h2 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -0.012em; margin: 0; }
/* 채널 피드 — Medium · YouTube 2열, 채널당 최신 2개 */
.learn-floor__feeds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.2vw, 52px); }
.learn-feedrow { min-width: 0; }
.learn-feedrow__h { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.learn-feedrow__name { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2; margin: 0; color: var(--c-text-heading) !important; }
.learn-feedrow__name a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; transition: color 0.12s ease; }
.learn-feedrow__name a:hover { color: var(--c-accent-violet); }
.learn-feedrow__name a::after { content: "›"; font-weight: 600; }
/* 고정 폭 카드 + 좌측 정렬 → 행마다 개수 달라도(Medium 2 / YouTube 4) 카드 크기 동일 */
.learn-feedrow__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.learn-fcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform 0.15s ease; }
.learn-fcard:hover { transform: translateY(-2px); }
.learn-fcard__thumb {
    aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent-violet, #8A77E0) 72%, #fff), var(--c-accent-violet, #8A77E0));
    background-size: cover; background-position: center;
    border: 1px solid var(--c-border-light);
}
.learn-fcard__t {
    margin: 0; font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -0.01em !important; color: var(--c-text-heading);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 0.15s ease;
}
.learn-fcard:hover .learn-fcard__t { color: var(--c-accent-violet-text, #6f5cd6); }
.learn-fcard__d { font-size: 12px; color: var(--c-text-muted); }
/* 팔로우 카드 (RSS 없는 채널) — 아이콘 + 채널명/핸들 + 화살표 */
.learn-floor__follows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(24px, 2.8vw, 36px); }
.learn-follow {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 18px; border-radius: var(--r-lg);
    border: 1px solid var(--c-border-light); background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.learn-follow:hover { border-color: var(--c-accent-violet); box-shadow: 0 12px 26px -16px rgba(23, 23, 25, 0.3); transform: translateY(-2px); }
.learn-follow__ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; object-fit: contain; }
.learn-follow__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.learn-follow__name { font-size: 14px; font-weight: 700; color: var(--c-text-heading); line-height: 1.2; }
.learn-follow__at { font-size: 12px; color: var(--c-text-muted); line-height: 1.2; }
.learn-follow__go { margin-left: auto; font-size: 18px; color: var(--c-text-subtle); }
@media (max-width: 700px) { .learn-floor__follows { grid-template-columns: 1fr; } }

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .learn-mag__grid { grid-template-columns: 1fr; }
    .learn-col { max-height: none; overflow: visible; }
    .learn-col-wrap--feat { order: -1; }
    .learn-col-wrap::after { display: none; }
    .learn-floor__feeds { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .learn-feedrow__grid { grid-template-columns: 1fr; }
}