/* =====================================================================
   워크플립 — 트렌드 리포트(인사이트) 공용 스타일
   메인 사이트(index.html)의 디자인 토큰/네비게이션과 톤앤매너를 그대로 계승
   ===================================================================== */

:root{
  --primary:#1b72ff; --primary-700:#0162ff; --primary-050:#f1f6ff; --secondary:#ffcd58; --notice-red:#f23a5c;
  --navy-top:#0c1d3c; --navy-mid:#081530; --navy-deep:#05070d;
  --navy-card:rgba(255,255,255,.035); --navy-border:rgba(255,255,255,.10);
  --ink:#111418; --ink-2:#4d4d4d; --ink-3:#808080; --on-dark:#fff; --on-dark-soft:#aebfdc; --line:#e9edf2;
  --foot-bar:#3b3e42; --foot-bg:#f5f6f8;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --sh-card:0 4px 16px rgba(0,0,0,.10); --sh-lg:0 16px 48px rgba(0,0,0,.22);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}

.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-weight:700;font-size:15px;border-radius:8px;border:1px solid transparent;padding:13px 24px;cursor:pointer;transition:.18s;letter-spacing:-.2px}
.btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-700);transform:translateY(-1px);box-shadow:var(--sh-card)}
.btn-yellow{background:var(--secondary);color:#1a1a1a} .btn-yellow:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:var(--sh-card)}
.btn-dark{background:#15171c;color:#fff} .btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)} .btn-ghost:hover{background:var(--primary-050)}
.btn-white{background:#fff;color:var(--primary)} .btn-white:hover{transform:translateY(-1px);box-shadow:var(--sh-card)}
.btn-sm{padding:9px 18px;font-size:14px}

/* ===================== NAV (메인과 동일) ===================== */
header.nav{position:sticky;top:0;z-index:90;background:#fff;transition:box-shadow .2s}
header.nav.scrolled{box-shadow:0 1px 0 var(--line),0 6px 18px rgba(10,20,40,.06)}
.nav-in{display:flex;align-items:center;height:56px;justify-content:space-between}
.logo{display:flex;align-items:center;gap:8px;font-size:22px;letter-spacing:-.5px}
.logo b{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--primary)} .logo span{color:var(--ink-3);font-weight:700;font-size:16px}
.nav-menu{display:flex;gap:24px;align-items:center} .nav-menu a{font-size:18px;font-weight:600;color:#333;letter-spacing:-0.2px} .nav-menu a:hover{color:var(--primary)}
.nav-right{margin-left:0} .burger{display:none;margin-left:auto;background:none;border:0;font-size:24px;cursor:pointer}
.nav-divider{color:#e2e8f0;font-size:14px;font-weight:300;user-select:none}
.nav-item-badge{position:relative;display:inline-flex;align-items:center}
.badge-tag{position:absolute;top:-7px;right:-28px;background:var(--notice-red);color:#fff;font-size:9px;font-weight:800;padding:1px 4px;border-radius:4px;line-height:1.2;letter-spacing:0}
.nav-item-badge.active{color:var(--primary)}
.nav-item-dropdown{position:relative;display:inline-block}
.dropdown-trigger{display:inline-flex;align-items:center;gap:5px;font-weight:800 !important;color:#333 !important}
.dropdown-trigger .chevron-icon{transition:transform .25s ease;stroke:#333}
.dropdown-trigger.trigger-enterprise{color:var(--primary) !important}
.dropdown-trigger.trigger-enterprise .chevron-icon{stroke:var(--primary)}
.dropdown-trigger.trigger-academic{color:#333 !important}
.dropdown-trigger.trigger-academic .chevron-icon{stroke:#333}
.nav-item-dropdown:hover .dropdown-trigger.trigger-academic{color:var(--primary) !important}
.nav-item-dropdown:hover .dropdown-trigger.trigger-academic .chevron-icon{stroke:var(--primary)}
  /* 강의 클래스 / 회사소개 트리거 */
  .dropdown-trigger.trigger-class,.dropdown-trigger.trigger-about{color:#333 !important}
  .dropdown-trigger.trigger-class .chevron-icon,.dropdown-trigger.trigger-about .chevron-icon{stroke:#333}
  .nav-item-dropdown:hover .dropdown-trigger.trigger-class,.nav-item-dropdown:hover .dropdown-trigger.trigger-about{color:var(--primary) !important}
  .nav-item-dropdown:hover .dropdown-trigger.trigger-class .chevron-icon,.nav-item-dropdown:hover .dropdown-trigger.trigger-about .chevron-icon{stroke:var(--primary)}
  /* 메뉴가 5개로 늘어난 만큼 태블릿 폭에서 간격/크기 축소 */
  @media (max-width:1180px){.nav-menu{gap:16px}.nav-menu a{font-size:16px}}
  @media (max-width:980px){.nav-menu{gap:11px}.nav-menu a{font-size:15px}.nav-divider{display:none}}
  @media (max-width:900px){.nav-menu{gap:8px}.nav-menu a{font-size:14px}}
.nav-item-dropdown:hover .dropdown-trigger .chevron-icon{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:100%;left:0;transform:translateY(10px);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:24px;min-width:260px;display:flex;flex-direction:column;gap:18px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:100}
.nav-item-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(4px)}
.dropdown-section{display:flex;flex-direction:column;gap:8px;text-align:left;transition:transform .18s ease;transform-origin:left center}
.nav-menu .dropdown-menu a.dropdown-item{font-size:15px;font-weight:700;color:var(--ink);transition:color .15s}
.nav-menu .dropdown-menu a.dropdown-item:hover{color:var(--primary)}
.dropdown-sub-items{display:flex;flex-direction:column;gap:8px;padding-left:4px}
.nav-menu .dropdown-menu a.dropdown-sub-item{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .15s,padding-left .15s;white-space:nowrap}
.nav-menu .dropdown-menu a.dropdown-sub-item:hover{color:var(--primary)}
.dropdown-section:hover{transform:scale(1.04)}
.dropdown-section:hover a.dropdown-item{color:var(--primary)}
.dropdown-section:hover a.dropdown-sub-item{color:var(--primary)}
@media (max-width:760px){
  .dropdown-menu{position:static;transform:none !important;box-shadow:none;border:none;padding:10px 14px;opacity:1;visibility:visible;display:flex;min-width:unset;gap:12px;background:#f8fafc;margin-top:4px;border-radius:var(--r-sm)}
  .nav-item-dropdown:hover .dropdown-menu{transform:none}
  .dropdown-trigger::after{display:none}
  .nav-divider{display:none}
}

/* ===================== 리포트 HERO (페이지 상단 배너) ===================== */
.report-hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(900px 600px at 80% 20%,rgba(40,110,255,.55),transparent 60%),
             linear-gradient(118deg,#0b1f47 0%,#163f8f 52%,#1b6bf5 120%)}
.report-hero::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
.report-hero .wrap{position:relative;z-index:2;padding:74px 24px 64px}
.breadcrumb{font-size:13.5px;color:#9dc2ff;font-weight:600;display:flex;gap:8px;align-items:center;margin-bottom:18px}
.breadcrumb a:hover{color:#fff} .breadcrumb span{opacity:.55}
.report-hero .eyebrow{display:inline-block;font-family:'Montserrat',sans-serif;letter-spacing:1.5px;font-size:12.5px;font-weight:800;color:#bcd6ff;margin-bottom:14px;text-transform:uppercase}
.report-hero h1{font-size:42px;font-weight:800;line-height:1.28;letter-spacing:-1px}
.report-hero p{margin-top:18px;color:#c8d8f3;font-size:17px;max-width:680px;line-height:1.65}

/* ===================== 카테고리 필터 ===================== */
.filter-bar{position:sticky;top:66px;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.filter-bar .wrap{display:flex;gap:10px;flex-wrap:wrap;padding:18px 24px;align-items:center}
.chip{font-size:14px;font-weight:700;color:var(--ink-2);background:#f4f6fa;border:1px solid transparent;border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;transition:.16s;white-space:nowrap}
.chip:hover{color:var(--primary);background:var(--primary-050)}
.chip.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(27,114,255,.28)}

/* ===================== 본문 레이아웃 ===================== */
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.section-head h2{font-size:24px;font-weight:800;letter-spacing:-.4px}
.section-head .sub{color:var(--ink-3);font-size:14.5px;margin-top:6px}

/* 카드 썸네일(이미지 대체용 그라데이션 + 카테고리 라벨) */
.thumb{position:relative;overflow:hidden;background:linear-gradient(135deg,#dfe9ff,#aac4ff)}
.thumb::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120px 120px at 78% 22%,rgba(255,255,255,.45),transparent 60%),
            repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 12px,transparent 12px 24px)}
.thumb .cat{position:absolute;left:16px;top:14px;z-index:2;font-size:12px;font-weight:800;color:var(--primary);background:#fff;padding:5px 12px;border-radius:var(--r-pill);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.thumb .motif{position:absolute;right:-10px;bottom:-14px;z-index:1;opacity:.9}
.thumb .kw{position:absolute;left:18px;bottom:16px;z-index:2;color:#0a2a66;font-weight:800;font-size:19px;letter-spacing:-.4px;line-height:1.3;text-shadow:0 1px 0 rgba(255,255,255,.35);max-width:80%}
/* 카테고리별 색감 */
.thumb.c-trend{background:linear-gradient(135deg,#cfe0ff,#5e93ff)}
.thumb.c-hrd{background:linear-gradient(135deg,#e6e0ff,#9b8cff)}
.thumb.c-skill{background:linear-gradient(135deg,#d8f3ee,#5fd6c4)}
.thumb.c-public{background:linear-gradient(135deg,#ffe9cf,#ffc46b)}
.thumb.c-guide{background:linear-gradient(135deg,#ffe0e6,#ff8aa3)}

/* FEATURED 카드 */
.featured{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-card);transition:.2s}
.featured:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.featured .thumb{min-height:340px}
.featured .thumb .kw{font-size:26px;max-width:88%}
.featured .fbody{padding:40px 40px;display:flex;flex-direction:column}
.featured .ribbon{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:800;color:#fff;background:var(--notice-red);padding:5px 12px;border-radius:var(--r-pill);margin-bottom:16px}
.featured h3{font-size:28px;font-weight:800;line-height:1.34;letter-spacing:-.6px;margin-bottom:14px}
.featured p{color:var(--ink-2);font-size:15.5px;line-height:1.7;flex-grow:1}
.featured .meta{display:flex;gap:14px;align-items:center;color:var(--ink-3);font-size:13.5px;margin-top:22px}
.featured .meta b{color:var(--primary)}

/* 카드 그리드 */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard-link{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:.2s;height:100%}
.pcard-link:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:#dbe6fb}
.pcard-link .thumb{height:188px}
.pcard-link .pbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex-grow:1}
.pcard-link h3{font-size:18.5px;font-weight:800;line-height:1.4;letter-spacing:-.3px;margin-bottom:10px;transition:color .15s}
.pcard-link:hover h3{color:var(--primary)}
.pcard-link p{color:var(--ink-2);font-size:14px;line-height:1.62;flex-grow:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-link .meta{display:flex;gap:12px;align-items:center;color:var(--ink-3);font-size:12.5px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.pcard-link .meta .dot{width:3px;height:3px;border-radius:50%;background:#cbd3df}
.card-hidden{display:none !important}

/* CTA 밴드 */
.cta-band{background:linear-gradient(118deg,#0b1f47 0%,#163f8f 60%,#1b6bf5 130%);color:#fff;border-radius:var(--r-lg);padding:54px 48px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;overflow:hidden;position:relative}
.cta-band::after{content:"";position:absolute;right:-40px;top:-40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.cta-band h3{font-size:26px;font-weight:800;line-height:1.4;letter-spacing:-.5px;position:relative;z-index:2}
.cta-band p{color:#c8d8f3;font-size:15.5px;margin-top:12px;position:relative;z-index:2}
.cta-band .actions{display:flex;gap:10px;position:relative;z-index:2}

/* ===================== 아티클(상세) 페이지 ===================== */
.article-hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(800px 500px at 82% 12%,rgba(40,110,255,.5),transparent 60%),
             linear-gradient(118deg,#0b1f47 0%,#15356f 55%,#1b5fe0 125%)}
.article-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
.article-hero .wrap{position:relative;z-index:2;max-width:860px;padding:64px 24px 56px}
.article-hero .cat-pill{display:inline-block;font-size:12.5px;font-weight:800;color:#0a2a66;background:#cfe0ff;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:18px}
.article-hero h1{font-size:38px;font-weight:800;line-height:1.32;letter-spacing:-.9px}
.article-hero .sub{margin-top:16px;color:#cfdcf5;font-size:18px;line-height:1.6}
.article-hero .amETA,.article-hero .ameta{display:flex;gap:14px;align-items:center;margin-top:26px;color:#a9c1ec;font-size:14px;flex-wrap:wrap}
.article-hero .ameta .dot{width:3px;height:3px;border-radius:50%;background:#7d97c8}
.article-hero .author{display:flex;align-items:center;gap:10px}
.article-hero .author .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#9bc0ff,#1b72ff);display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px}

.article-wrap{max-width:760px;margin:0 auto;padding:56px 24px 20px}
.lead-summary{font-size:18px;line-height:1.8;color:#27324a;background:var(--primary-050);border-left:4px solid var(--primary);border-radius:0 var(--r-md) var(--r-md) 0;padding:22px 26px;margin-bottom:40px}

.prose h2{font-size:25px;font-weight:800;letter-spacing:-.5px;line-height:1.4;margin:46px 0 16px;padding-top:8px;color:var(--ink)}
.prose h2 .idx{color:var(--primary);font-family:'Montserrat',sans-serif;margin-right:10px}
.prose p{font-size:16.5px;line-height:1.95;color:#2b3340;margin:0 0 18px}
.prose strong{color:var(--ink);font-weight:700}
.prose ul{margin:6px 0 22px;padding-left:0;list-style:none;display:grid;gap:11px}
.prose ul li{position:relative;padding-left:28px;font-size:16px;line-height:1.7;color:#2b3340}
.prose ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:2px;background:var(--primary);transform:rotate(45deg)}

.callout{border:1px solid #dbe6fb;background:#f6f9ff;border-radius:var(--r-md);padding:22px 24px;margin:26px 0 30px}
.callout .clabel{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--primary);margin-bottom:10px;text-transform:none}
.callout .clabel::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.callout p{font-size:15.5px;line-height:1.75;color:#33405a;margin:0}

.pullquote{margin:40px 0;padding:8px 0 8px 28px;border-left:5px solid var(--secondary);font-size:22px;line-height:1.55;font-weight:800;letter-spacing:-.5px;color:#16223b}

.takeaways{margin:48px 0 8px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.takeaways .tk-head{background:var(--ink);color:#fff;padding:16px 24px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px}
.takeaways .tk-body{padding:22px 26px;display:grid;gap:14px}
.takeaways .tk-item{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.65;color:#2b3340}
.takeaways .tk-item .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--primary-050);color:var(--primary);font-weight:800;font-size:13px;display:grid;place-items:center;margin-top:1px}

.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 8px}
.tagrow .tg{font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-050);padding:7px 14px;border-radius:var(--r-pill)}

.article-foot{border-top:1px solid var(--line);margin-top:40px;padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.article-foot .back{font-weight:700;color:var(--ink-2)} .article-foot .back:hover{color:var(--primary)}

/* 아티클 하단 CTA */
.inline-cta{max-width:760px;margin:54px auto 0;padding:0 24px}
.inline-cta .box{background:linear-gradient(118deg,#0b1f47,#1b5fe0 130%);color:#fff;border-radius:var(--r-lg);padding:40px 40px;text-align:center;position:relative;overflow:hidden}
.inline-cta .box::after{content:"";position:absolute;left:-30px;bottom:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%)}
.inline-cta h3{font-size:23px;font-weight:800;line-height:1.45;position:relative;z-index:2}
.inline-cta p{color:#c8d8f3;font-size:15px;margin:12px 0 22px;position:relative;z-index:2}
.inline-cta .actions{display:flex;gap:10px;justify-content:center;position:relative;z-index:2;flex-wrap:wrap}

/* 관련 글 */
.related{background:var(--foot-bg)}
.related .wrap{padding:64px 24px}
.related h2{font-size:22px;font-weight:800;margin-bottom:24px}

/* 진행바 (아티클 읽기) */
.read-prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--primary);z-index:200;transition:width .1s linear}

/* ===================== FOOTER (메인과 동일) ===================== */
.foot-bar{background:var(--foot-bar);color:#fff} .foot-bar .wrap{display:flex;gap:22px;height:54px;align-items:center;font-size:14px;font-weight:600} .foot-bar a:hover{color:var(--secondary)}
footer{background:var(--foot-bg);color:#555;padding:36px 0 32px;font-size:14px}
.legal{color:#8a909a;line-height:1.9} .legal strong{color:#555;font-weight:700}

/* ===================== 반응형 ===================== */
@media (max-width:1024px){
  .featured{grid-template-columns:1fr} .featured .thumb{min-height:240px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr;text-align:left}
  .report-hero h1{font-size:34px}
}
@media (max-width:760px){
  .nav-menu,.nav-right{display:none} .burger{display:block}
  .card-grid{grid-template-columns:1fr}
  .filter-bar .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .filter-bar .wrap::-webkit-scrollbar{display:none}
  .report-hero h1{font-size:28px} .article-hero h1{font-size:27px}
  .featured .fbody{padding:28px 24px} .featured h3{font-size:22px}
  .cta-band{padding:36px 26px} .prose h2{font-size:21px} .prose p{font-size:16px}
  .pullquote{font-size:19px}
}