@charset "utf-8";

/* ==========================================================================
   Content Responsive — 서브페이지 (BP 1024 / 600)
   ========================================================================== */

@media (max-width: 1024px) {
  .sub-visual { min-height: 300px; }
  .applist { grid-template-columns: repeat(2, 1fr); }
  .ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .wl-subhead { margin-top: 80px; }
  .wl-band { grid-template-columns: repeat(2, 1fr); }
  .wl-col { padding: 34px 28px; }
  .wl-col:nth-child(2n+1) { border-right: 1px solid var(--border); }
  .wl-col:nth-child(2n) { border-right: none; }
  .wl-col:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 600px) {
  .sub-visual { min-height: 240px; }
  .sub-breadcrumb { display: none; }
  .applist { grid-template-columns: 1fr 1fr; }
  .spec-row { flex-direction: column; gap: 4px; align-items: flex-start; }
  .ct-form-wrap { padding: 24px; }
  .wl-subhead { margin-top: 56px; }
  .wl-band { grid-template-columns: 1fr; }
  .wl-col { padding: 26px 0; border-right: none; border-bottom: 1px solid var(--border); }
  .wl-col:last-child { border-bottom: none; }
  .wl-ico { width: 58px; height: 58px; margin-bottom: 16px; border-radius: 15px; }
  .wl-ico svg { width: 32px; height: 32px; }
  .wl-emph { gap: 14px; padding: 22px; }
  .wl-emph__badge { width: 32px; height: 32px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   Technology Foundation — 반응형
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .tf-head{margin-bottom:44px}
  .tf-tagline{font-size:16px}
  .tf-cc__compare{grid-template-columns:1fr;gap:20px}   /* §3 아키텍처 대비 2단→1단 */
  .tf-key .adv-grid{grid-template-columns:repeat(2,1fr)}   /* §3-2 5→2열 */
  .tf-key .adv-cell:nth-child(3n),.tf-key .adv-cell:nth-child(5n){border-right:1px solid var(--border);padding-right:34px}
  .tf-key .adv-cell:nth-child(2n){border-right:0;padding-right:0}
  .tf-key .adv-cell:nth-child(-n+8){border-bottom:1px solid var(--border)}
  .tf-key .adv-cell:nth-child(n+9){border-bottom:0}

  /* 다이어그램은 흐름이 핵심 → 줄바꿈 대신 가로 스크롤 + 스크롤 힌트 */
  .tf-scrollhint{display:flex}
  .tf-rail{padding:34px 26px 30px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tf-flow{min-width:900px}
  .tf-blk{scroll-snap-align:center}

  .tf-detail{grid-template-columns:repeat(2,1fr)}
  .tf-col{padding:26px 20px 24px}
  .tf-col:first-child,.tf-col:nth-child(3),.tf-col:nth-child(5){padding-left:0}
  .tf-col:nth-child(2n){border-right:0;padding-right:0}
  .tf-col:nth-child(n+3){border-top:1px solid var(--border)}
  .tf-col::after{display:none}          /* 2열부터는 상단바 비활성 */

  .tf-ben{grid-template-columns:repeat(2,1fr);gap:34px 24px;margin-top:24px}

  /* §2 지표 밴드 · §3 figure */
  .tf-stats{grid-template-columns:repeat(2,1fr);row-gap:34px;padding:36px 20px}
  .tf-stat:nth-child(2n){border-right:0}
  .tf-figs{grid-template-columns:1fr}
  .tf-fig--wide .tf-fig__img img{width:min(400px,90%)}
}

@media (max-width:600px){
  .tf-rail{padding:28px 20px 24px;border-radius:var(--radius)}
  .tf-flow{min-width:840px;gap:24px}
  .tf-blk{padding:20px 16px 16px}
  .tf-vs__row{grid-template-columns:1fr;gap:10px;text-align:center;padding:20px 18px}
  .tf-vs__mid{order:-1;min-width:0;flex-direction:row;justify-content:center;gap:10px}
  .tf-vs__mid b{font-size:15px}
  .tf-vs__arrow{display:none}
  .tf-vs__from{padding:9px;background:var(--l-bg-2);border-radius:9px}
  .tf-vs__to{padding:9px;background:var(--primary-soft);border-radius:9px}
  /* §3 아키텍처 대비 블록도 — 모바일 세로 흐름(↓) */
  .tf-cc__flow{flex-direction:column;gap:6px}
  .tf-cc__flow .tf-cc__arrow{transform:rotate(90deg)}
  .tf-key .adv-grid{grid-template-columns:1fr}   /* §3-2 → 1열 */
  .tf-key .adv-cell{padding:30px 0;border-right:0;border-bottom:1px solid var(--border)}
  .tf-key .adv-cell:nth-child(3n),.tf-key .adv-cell:nth-child(5n){border-right:0;padding-right:0}
  .tf-key .adv-cell:nth-child(-n+3),.tf-key .adv-cell:nth-child(-n+5),.tf-key .adv-cell:nth-child(-n+8){border-bottom:1px solid var(--border)}
  .tf-key .adv-cell:last-child{border-bottom:0}

  .tf-detail{grid-template-columns:1fr}
  .tf-col{padding:22px 0;border-right:0;border-top:1px solid var(--border)}
  .tf-col:first-child{border-top:0;padding-top:16px}
  .tf-col__tit{min-height:0}

  .tf-ben{grid-template-columns:1fr;gap:28px}
  .tf-ben__ico{width:56px;height:56px;border-radius:16px;margin-bottom:12px}
  .tf-ben__ico svg{width:36px;height:36px}

  /* §2 지표 밴드 · §3 figure */
  .tf-vlsi__head{font-size:26px}
  .tf-stats{grid-template-columns:1fr 1fr;padding:26px 12px;row-gap:24px}
  .tf-stat{padding:6px 8px}
  .tf-fig{padding:26px 22px 18px}
  .tf-fig__img,.tf-fig--wide .tf-fig__img{min-height:0}
}
/* ═══════════════════════════════════════════════════════════════
   Advantages — 반응형  (3열→2열→1열 순서로 nth-child 덮어쓰기)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .adv-cell{padding:34px 26px 32px}
  /* 3열 규칙 초기화 후 2열 규칙 재적용 */
  .adv-cell:nth-child(3n){border-right:1px solid var(--border);padding-right:26px}
  .adv-cell:nth-child(3n+1){padding-left:26px}
  .adv-cell:nth-child(2n){border-right:0;padding-right:0}
  .adv-cell:nth-child(-n+4){border-bottom:1px solid var(--border)}
  .adv-cell:nth-child(n+5){border-bottom:0}
  .adv-cell::after{display:none}      /* 2열부터는 상단바 비활성 */
}

@media (max-width:600px){
  .adv-grid{grid-template-columns:1fr}
  .adv-cell{padding:30px 0 28px;border-right:0}
  .adv-cell:nth-child(3n),
  .adv-cell:nth-child(3n+1),
  .adv-cell:nth-child(2n),
  .adv-cell:nth-child(2n+1){border-right:0;padding-left:0;padding-right:0}
  .adv-cell{border-bottom:1px solid var(--border)}
  .adv-cell:last-child{border-bottom:0}
  .adv-cell__tit{min-height:0}
  .adv-cell__ico{width:56px;height:56px;border-radius:16px;margin-bottom:16px}
  .adv-cell__ico svg{width:38px;height:38px}
}

/* 800px 이하 애니메이션 자동 비활성화는 기존 animate.js 규칙을 따름 */


/* ═══════════════════════════════════════════════════════════════
   IP Portfolio — 반응형
   ─ 이 블록을 content_responsive.css 맨 아래에 그대로 붙여넣는다.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ip-tm { grid-template-columns: 1fr; gap: 40px; }
  .ip-dm { grid-template-columns: repeat(2, 1fr); }
  .ip-inv { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
  .ip-vis { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px) {
  .ip-tm__list { grid-template-columns: 1fr; gap: 0; }
  .ip-tm__item:nth-child(-n+2) { border-top: 0; }
  .ip-tm__item:first-child { border-top: 1px solid var(--border); }
  .ip-dm { grid-template-columns: 1fr; }
  .ip-inv { grid-template-columns: 1fr; gap: 32px; }
  .ip-tm__mark { padding: 40px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   Platform IP Coverage — 반응형
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ip-plat { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .ip-plat__core { grid-column: 1 / -1; order: -1; aspect-ratio: auto; max-width: 100%;
    padding: 30px 20px; margin-bottom: 12px; }
  .ip-plat__core::before { border-radius: var(--radius-lg); }
  .ip-plat__core::after { inset: 9px; border-radius: var(--radius); }
}
@media (max-width: 600px) {
  .ip-plat { grid-template-columns: 1fr; }
  .ip-plat__core { padding: 36px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   Patent Portfolio 보강 블록 — 반응형
   ─ content_responsive.css 맨 아래에 붙여넣는다.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ip-subhead { margin-top: 80px; }

  /* ① 출원 현황 */
  .ip-stat { grid-template-columns: repeat(2, 1fr); }
  .ip-stat__c { padding: 28px 24px 26px; }
  .ip-stat__c:nth-child(3n) { border-right: 1px solid var(--border); padding-right: 24px; }
  .ip-stat__c:nth-child(3n+1) { padding-left: 24px; }
  .ip-stat__c:nth-child(2n) { border-right: 0; padding-right: 0; }
  .ip-stat__c:nth-child(2n+1) { padding-left: 0; }

  /* ② 타임라인 */
  .ip-tl { padding-left: 72px; }
  .ip-tl::before { left: 23px; }
  .ip-tl__row { grid-template-columns: 48px 1fr; gap: 16px; }
  .ip-tl__yr { position: static; width: auto; text-align: left; font-size: 19px;
    grid-column: 1 / -1; margin-bottom: 12px; }
  .ip-tl__dot { left: -56px; top: 30px; }
  .ip-tl__ico { width: 48px; height: 48px; border-radius: 13px; }
  .ip-tl__ico svg { width: 30px; height: 30px; }

  /* ③ FTO */
  .ip-fto { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 600px) {
  .ip-stat { grid-template-columns: 1fr; }
  .ip-stat__c,
  .ip-stat__c:nth-child(3n),
  .ip-stat__c:nth-child(3n+1),
  .ip-stat__c:nth-child(2n),
  .ip-stat__c:nth-child(2n+1) { border-right: 0; padding: 24px 0; }

  .ip-tl { padding-left: 52px; }
  .ip-tl::before { left: 15px; }
  .ip-tl__dot { left: -44px; }
  .ip-tl__row { grid-template-columns: 1fr; gap: 14px; }
  .ip-tl__t { font-size: 17px; }

  .ip-fto__hd,
  .ip-fto__r { grid-template-columns: 1fr 84px; padding-left: 18px; padding-right: 18px; }
  .ip-fto__hd span:last-child { font-size: 11px; }
  .ip-fto__ft { padding-left: 18px; padding-right: 18px; flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   모바일 타이포그래피 하이어라키 (≤600) — 크기·줄높이 최적화
   L1 페이지제목 28 · L2 섹션제목 20 · L3 항목제목 17 · L4 리드 14 · 본문 14
   (다이어그램 내부 라벨 tf-blk__* 등은 수정요청서 작업 대상이라 제외)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* L1 — 페이지 대제목 (sub-visual) : cm-tit(28)과 통일 */
  .sub-visual-tit { font-size: 28px; line-height: 1.22; }

  /* L2 — 섹션 제목 */
  .wl-subtit,
  .tf-sigtit,
  .ct-form-wrap h3,
  .ip-dm__url { font-size: 20px; line-height: 1.3; }
  .tf-vlsi__head { font-size: 24px; line-height: 1.2; }

  /* L3 — 항목/카드 제목 */
  .wl-title,
  .wl-emph__text { font-size: 17px; line-height: 1.35; }

  /* L4 — 리드 문단 */
  .sub-visual-txt,
  .wl-lead { font-size: 14px; line-height: 1.6; }
  .lead-p { font-size: 15px; line-height: 1.6; }

  /* L5 — 본문 (소폭 정리) */
  .wl-desc { font-size: 14px; }

  /* 리드 강조(.emph)·섹션제목(.ip-subtit)·페이지제목(h2.title) 계층 통일 */
  .emph { font-size: 17px; line-height: 1.5; }
  .ip-subtit { font-size: 20px; line-height: 1.3; }
  h2.title { font-size: 28px; line-height: 1.15; }
}