/*
Theme Name:   STrade Child
Template:     generatepress
Theme URI:    https://strade-ai.com
Author:       STrade
Author URI:   https://strade-ai.com
Description:  STrade child theme — 디자인 토큰(:root) + archive 카드 + Style B + 동적 layout + 16:9 grid + 글로벌 sidebar styling.
Version:      1.4.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  strade-child
*/

/* IMPL-872 — 글로벌 sidebar styling (D2) (2026-06-01)
   Trigger: STrade HANDOFF v6 §5 — page 페이지 sidebar GP/Block 기본 노출 (P=0.92)
   Parent: v1.3.0 IMPL-845b 16:9 grid + GP override (불변)
   Change: §E 신설 — --strade-sidebar-* 토큰 + widget/title/search/latest-posts/CIO dark variant (~180 라인)
   Scope: 전 페이지 (archive/page/single/home) — v2.1 body.category-cio-flash 게이트 제거
   Naming: --strade-sidebar-* (IMPL-871 §1 strict) */

/* IMPL-845b — 16:9 동적 layout + archive 카드 강화 (2026-05-29)
   Trigger: 사용자 진단 "좌우 여백 과대 1:1 하드코딩" + 컨텐츠 박스 스타일 보강
   Spec: HANDOFF_TO_STRADE_WP_v4.md §3
   Sync STrade 진본: 없음 (CSS-only) — apply_design_css 비경유, child theme 직접 PR
   R1 cross-repo: STrade 진본 변경 0 (publisher.py / run_market_flash.py 무관)

   Version 정정 (분석가 결정):
   - HANDOFF v4 §3.1.1 "v1.1.0 → v1.2.0"이라 명시하나, 실제 base는 commit 8ce6fd8 v1.2.0 (utility class 포함)
   - HANDOFF v4 §9 "8ce6fd8 = 본 PR 기준점" 명시와 정합 위해 v1.2.0 → v1.3.0 으로 진행
   - 본 PR 결과 = v1.2.0 utility class + IMPL-845b 16:9 layout 통합 */

/* ============================================================
   STrade Design Tokens v1.0 (single source of truth)
   2026-05-29 — Phase 1 통합 (HANDOFF_TO_STRADE_WP_v2.md §3.3)
   ------------------------------------------------------------
   채택 근거: about 페이지(page id=12) inline :root 정의를 base로 채택.
   기존 Customizer Additional CSS의 --strade-* prefix 변수와 별개 namespace
   (cascade 충돌 없음). 향후 Customizer CSS도 점진적으로 이 토큰으로 통합 권고.
   ============================================================ */
:root {
  /* Color */
  --bg: #fafbfc;
  --bg-alt: #f4f5f8;
  --text: #1a1a2e;
  --text-2: #374151;
  --text-muted: #6b7280;
  --accent: #c9a96e;
  --accent-d: #b8943d;
  --accent-dim: rgba(201,169,110,.11);
  --accent-glow: rgba(201,169,110,.18);
  --border: #e2e8f0;
  --card: #ffffff;
  --dark: #1a1a2e;

  /* Shadow */
  --shadow-xs: 0 1px 3px rgba(26,26,46,.05);
  --shadow-sm: 0 2px 8px rgba(26,26,46,.07);
  --shadow-md: 0 6px 20px rgba(26,26,46,.09);

  /* Radius + Spacing */
  --r: 10px;
  --r-sm: 6px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;

  /* Typography */
  --font-base: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --font-s: 'Noto Serif KR', serif;
  --font-b: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --lh-base: 1.6;

  /* === IMPL-845b 신규 (v1.3.0) — 동적 layout token ===
     clamp(min, fluid, max): 1280px 이하 안정 / 1920px 최적 / 2560px+ 가독 cap */
  --container-max: clamp(960px, 78vw, 1600px);
  --container-pad-x: clamp(16px, 2.5vw, 32px);
  --card-padding: clamp(20px, 1.75vw, 36px);
  --card-gap: clamp(16px, 1.25vw, 28px);
  --card-cols: minmax(0, 1fr) minmax(0, 1.78fr);  /* 16:9 sideways */
  --measure: min(75ch, 100%);
}

/* IMPL-845b: GeneratePress --gp-content-width: 1200px 고정 override
   archive/single 모든 페이지에 clamp 적용. cascade 우선순위: child > 부모.

   주의: 1920×945 진단 결과 GP 부모는 .site.grid-container.container.hfeed 자체에
   max-width: 1200px를 inline으로 적용 (--gp-content-width var 미사용). 또한 header/footer
   inside-* container도 동일. 따라서 child theme에서 직접 selector override 필요. */
.site.grid-container,
.site-content,
.inside-article,
.inside-header,
.inside-navigation,
.inside-site-info,
.strade-archive-list {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.site-content,
.inside-article {
  padding-left: var(--container-pad-x);
  padding-right: var(--container-pad-x);
}

@media (max-width: 768px) {
  :root { --card-cols: 1fr; }  /* 모바일 stacked column */
}

/* ============================================================
   Phase 2 — archive.php 카드 표준 (HANDOFF_TO_STRADE_WP_v2.md §4.3)
   ------------------------------------------------------------
   theme/strade-child/archive.php 와 함께 작동. 모든 카테고리 카드 단일 형식.
   Phase 1 :root 토큰 사용.
   ============================================================ */
.strade-archive-list {
  max-width: var(--container-max);  /* IMPL-845b v1.3.0: 동적 layout (was 1200px) */
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}

.strade-archive-title {
  font-family: var(--font-s);
  font-size: var(--fs-h2);
  color: var(--text);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--accent);
}

/* IMPL-845b v1.3.0 — grid 16:9 (figure + body) + hover motion */
.strade-archive-card {
  display: grid;
  grid-template-columns: var(--card-cols);
  gap: var(--card-gap);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--card-padding);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.strade-archive-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .strade-archive-card { grid-template-columns: 1fr; }
}

/* 좌측: featured image 16:9 또는 gradient placeholder */
.strade-card-figure {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--r) - 2px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, var(--card)) 0%,
    var(--card) 100%);
  position: relative;
  display: block;
}
.strade-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* image 없는 카드 (span fallback): crisis label 또는 STrade 워터마크 */
.strade-card-figure:empty::before {
  content: var(--card-crisis-label, "STrade");
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  font-family: var(--font-m);
}

/* 우측: 본문 wrap (header/title/excerpt/more) */
.strade-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;  /* grid overflow 방지 */
}

/* header chip + 메타 */
.strade-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1) 0;
  font-size: 13px;
  line-height: 1.4;
}
.strade-card-category {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
}
.strade-card-meta {
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.strade-card-meta::before {
  content: '·';
  margin-right: var(--space-2);
  color: var(--text-muted);
}

/* chip 강조 — strade_render_card_badges() 출력 강화 */
.strade-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-m);
  letter-spacing: 0.03em;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  background: color-mix(in srgb, currentColor 6%, transparent);
  margin-left: auto;
}
.strade-card-chip[data-level="low"]     { color: #16a34a; }
.strade-card-chip[data-level="caution"] { color: #ca8a04; }
.strade-card-chip[data-level="warn"]    { color: #dc2626; }

/* 기존 v1.1.0 chip-normal/caution/warning 클래스 호환 유지 (strade_render_card_badges 출력) */
.strade-card-chip-normal {
  background: rgba(25,135,84,.10);
  color: #198754;
  border: 1px solid rgba(25,135,84,.25);
}
.strade-card-chip-caution {
  background: rgba(221,143,38,.10);
  color: #b56500;
  border: 1px solid rgba(221,143,38,.30);
}
.strade-card-chip-warning {
  background: rgba(220,53,69,.10);
  color: #c0392b;
  border: 1px solid rgba(220,53,69,.30);
}

/* 제목 — clamp 폰트 + underline reveal */
.strade-card-title {
  margin: 0;
  font-family: var(--font-s);
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.strade-card-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 220ms ease;
}
.strade-card-title a:hover { background-size: 100% 1px; }

/* 발췌 — 3줄 truncate + measure 보존 */
.strade-card-excerpt {
  color: var(--text-2);
  line-height: 1.65;
  font-size: 0.9375rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: var(--measure);
  margin: 0;
}

/* more — 화살표 motion */
.strade-card-more {
  align-self: flex-start;
  margin-top: auto;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  transition: gap 180ms ease, color 180ms ease;
}
.strade-card-more::after {
  content: "→";
  transition: transform 180ms ease;
}
.strade-card-more:hover {
  color: var(--text);
  gap: 10px;
}
.strade-card-more:hover::after { transform: translateX(3px); }

/* archive 페이지 pagination 보정 */
.strade-archive-list .nav-links {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

/* 모바일 */
@media (max-width: 600px) {
  .strade-archive-list { padding: var(--space-3) var(--space-2); }
  .strade-archive-card { padding: var(--space-3); }
  .strade-card-chip { margin-left: 0; }
}

/* ============================================================
   IMPL-845 v1.0 — LLM HTML utility classes
   ------------------------------------------------------------
   sync with STrade scripts/run_market_flash.py _STYLE_TO_CLASS_MAP
   2026-05-29 추가 (HANDOFF_TO_STRADE_WP_v3.md §3.2 spec 100%)

   ⚠️ Cross-repo strong coupling:
     - 매핑 사전 진본: STrade/scripts/run_market_flash.py _STYLE_TO_CLASS_MAP
     - class 정의 진본: 본 파일
     - 사전 변경 시 양측 동기 PR 필수 (IMPL-845 §5 R1)
   ============================================================ */

/* 표 셀 정렬 (LLM table 본문 td/th text-align 대체) */
.strade-text-left   { text-align: left; }
.strade-text-right  { text-align: right; }
.strade-text-center { text-align: center; }

/* Callout — 경고 박스 (LLM 노란 경고 div 시그니처 대체) */
.strade-callout-warning {
  background: var(--bg-alt);
  border: 1px solid var(--accent);
  border-left: 6px solid var(--accent-d);
  padding: var(--space-3);
  border-radius: var(--r);
  margin: var(--space-3) 0;
  color: var(--text-2);
}
.strade-callout-warning > p:first-child {
  font-weight: 700;
  color: var(--text);
  margin: 0 0 var(--space-2) 0;
}
.strade-callout-warning > p:last-child {
  margin: 0;
}

/* ============================================================
 * E. Sidebar — Global widget styling
 * IMPL-872 (Strade_WP D2 글로벌 sidebar styling)
 * 2026-06-01
 *
 * Scope: ALL pages (archive/page/single/home).
 * Replaces v2.1 §3 (body.category-cio-flash 게이트 제거).
 * Naming: --strade-sidebar-* (IMPL-871 §1 strict).
 * ============================================================ */

:root {
  --strade-sidebar-widget-bg: #ffffff;
  --strade-sidebar-widget-border-color: #e2e8f0;
  --strade-sidebar-widget-border-width: 1px;
  --strade-sidebar-widget-radius: 8px;
  --strade-sidebar-widget-pad-x: 24px;
  --strade-sidebar-widget-pad-y: 24px;
  --strade-sidebar-widget-mb: 20px;
  --strade-sidebar-widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);

  --strade-sidebar-title-size: 14px;
  --strade-sidebar-title-weight: 700;
  --strade-sidebar-title-color: #1a1a2e;
  --strade-sidebar-title-tracking: 0.14em;
  --strade-sidebar-title-mb: 16px;
  --strade-sidebar-title-pb: 12px;
  --strade-sidebar-title-border-bottom: 1px solid #e2e8f0;

  --strade-sidebar-accent: #c9a96e;
  --strade-sidebar-accent-hover: #b8943d;
  --strade-sidebar-dark: #1a1a2e;
  --strade-sidebar-dark-hover: #2a2a40;
  --strade-sidebar-link: #1a1a2e;
  --strade-sidebar-link-border: #eef0f4;
  --strade-sidebar-meta: #8b8fa0;

  --strade-sidebar-search-input-bg: #ffffff;
  --strade-sidebar-search-wrap-border: 1.5px solid #1a1a2e;
  --strade-sidebar-search-wrap-radius: 4px;
  --strade-sidebar-search-input-pad: 11px 14px;
  --strade-sidebar-search-input-size: 14px;
  --strade-sidebar-search-btn-pad: 0 18px;
  --strade-sidebar-search-btn-size: 13px;
  --strade-sidebar-search-btn-tracking: 0.10em;
}

#right-sidebar .widget,
#right-sidebar .widget_block {
  background: var(--strade-sidebar-widget-bg) !important;
  border: var(--strade-sidebar-widget-border-width) solid var(--strade-sidebar-widget-border-color) !important;
  border-radius: var(--strade-sidebar-widget-radius) !important;
  padding: var(--strade-sidebar-widget-pad-y) var(--strade-sidebar-widget-pad-x) !important;
  margin-bottom: var(--strade-sidebar-widget-mb) !important;
  box-shadow: var(--strade-sidebar-widget-shadow);
}

#right-sidebar .widget-title,
#right-sidebar .widget > h2,
#right-sidebar .widget_block > h2,
#right-sidebar .widget_block > .wp-block-heading,
#right-sidebar .widget_block .wp-block-heading:first-child {
  font-family: var(--font-b) !important;
  font-size: var(--strade-sidebar-title-size) !important;
  font-weight: var(--strade-sidebar-title-weight) !important;
  letter-spacing: var(--strade-sidebar-title-tracking) !important;
  text-transform: uppercase !important;
  color: var(--strade-sidebar-title-color) !important;
  margin: 0 0 var(--strade-sidebar-title-mb) 0 !important;
  padding-bottom: var(--strade-sidebar-title-pb) !important;
  border-bottom: var(--strade-sidebar-title-border-bottom) !important;
  line-height: 1.4 !important;
}

#right-sidebar .wp-block-search { margin: 0 !important; }

#right-sidebar .wp-block-search .wp-block-search__label {
  font-family: var(--font-b) !important;
  font-size: var(--strade-sidebar-title-size) !important;
  font-weight: var(--strade-sidebar-title-weight) !important;
  letter-spacing: var(--strade-sidebar-title-tracking) !important;
  text-transform: uppercase !important;
  color: var(--strade-sidebar-title-color) !important;
  margin: 0 0 var(--strade-sidebar-title-pb) 0 !important;
  padding-bottom: var(--strade-sidebar-title-pb) !important;
  border-bottom: var(--strade-sidebar-title-border-bottom) !important;
  display: block;
}

#right-sidebar .wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 0 !important;
  border: var(--strade-sidebar-search-wrap-border) !important;
  border-radius: var(--strade-sidebar-search-wrap-radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--strade-sidebar-search-input-bg) !important;
}

#right-sidebar .wp-block-search__input {
  flex: 1 !important;
  border: 0 !important;
  padding: var(--strade-sidebar-search-input-pad) !important;
  font-family: var(--font-b) !important;
  font-size: var(--strade-sidebar-search-input-size) !important;
  outline: none !important;
  color: var(--strade-sidebar-link) !important;
  background: var(--strade-sidebar-search-input-bg) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: auto !important;
}

#right-sidebar .wp-block-search__button {
  background: var(--strade-sidebar-dark) !important;
  border: 0 !important;
  padding: var(--strade-sidebar-search-btn-pad) !important;
  color: var(--strade-sidebar-accent) !important;
  cursor: pointer !important;
  font-family: var(--font-b) !important;
  font-size: var(--strade-sidebar-search-btn-size) !important;
  font-weight: 700 !important;
  letter-spacing: var(--strade-sidebar-search-btn-tracking) !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: background 0.15s ease;
  min-height: auto !important;
}
#right-sidebar .wp-block-search__button:hover {
  background: var(--strade-sidebar-dark-hover) !important;
}

#right-sidebar .wp-block-latest-posts__list,
#right-sidebar ul.wp-block-latest-posts {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#right-sidebar .wp-block-latest-posts__list li,
#right-sidebar ul.wp-block-latest-posts li {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--strade-sidebar-link-border) !important;
  margin: 0 !important;
  list-style: none;
}
#right-sidebar .wp-block-latest-posts__list li:last-child,
#right-sidebar ul.wp-block-latest-posts li:last-child {
  border-bottom: 0 !important;
}
#right-sidebar .wp-block-latest-posts__list a,
#right-sidebar ul.wp-block-latest-posts a {
  color: var(--strade-sidebar-link) !important;
  text-decoration: none !important;
  font-family: var(--font-b) !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  display: block !important;
  font-weight: 500 !important;
  transition: color 0.15s ease;
}
#right-sidebar .wp-block-latest-posts__list a:hover,
#right-sidebar ul.wp-block-latest-posts a:hover {
  color: var(--strade-sidebar-accent) !important;
}

#right-sidebar .widget_categories ul { list-style: none; padding: 0; }
#right-sidebar .widget_categories li {
  padding: 10px 0;
  border-bottom: 1px solid var(--strade-sidebar-link-border);
  font-size: 13.5px;
}
#right-sidebar .widget_categories a {
  color: var(--strade-sidebar-link);
  text-decoration: none;
}
#right-sidebar .widget_categories a:hover { color: var(--strade-sidebar-accent); }

body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) {
  background: var(--strade-sidebar-dark) !important;
  border-color: var(--strade-sidebar-dark) !important;
  color: #f1f1f5 !important;
}
body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) > h2,
body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) > .wp-block-heading,
body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) .wp-block-heading:first-child {
  color: var(--strade-sidebar-accent) !important;
  border-bottom-color: var(--strade-sidebar-dark-hover) !important;
}
body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) .wp-block-latest-posts__list li {
  border-bottom-color: var(--strade-sidebar-dark-hover) !important;
}
body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) .wp-block-latest-posts__list a {
  color: #f1f1f5 !important;
}
body.category-cio-flash #right-sidebar .widget_block:has(.wp-block-latest-posts) .wp-block-latest-posts__list a:hover {
  color: var(--strade-sidebar-accent) !important;
}

@media (max-width: 768px) {
  #right-sidebar .widget,
  #right-sidebar .widget_block {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  #right-sidebar .widget-title,
  #right-sidebar .widget > h2,
  #right-sidebar .widget_block > h2,
  #right-sidebar .widget_block > .wp-block-heading {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
}

/* ============================================================
   참조
   - 부모 테마 + Style B 본문은 WP Customizer Additional CSS 관리 (IMPL-06A §5)
   - 본 파일: 디자인 토큰(:root) + archive 카드 표준 + LLM HTML utility class + 글로벌 sidebar styling
   ============================================================ */