/*
 * coin_series 시리즈 글(wr_content, .fal-ct)이 참조하는 4개 변수 shim.
 * falette.org의 fal_tokens.css "정답" 토큰값이 아니라, falette.org에서
 * 실제로 이 변수들이 정의돼 있지 않아 지금 라이브로 보이는 var() fallback
 * 값(wr_content 안 var(--fal-text-sub,#6a7480) 등)을 그대로 옮김.
 * falette.org 자체가 다크모드에서도 이 fallback을 그대로 쓰므로
 * (별도 정의가 없어 발생하는 기존 버그, 이번 작업 범위 밖) 여기서도
 * 테마 분기 없이 동일하게 고정. 팔레트 디자인 시스템 전체 이식 아님,
 * autotrade 게시판 스킨(이 폴더)에만 로드됨.
 */
:root{
  --fal-text-main:#1d2126;
  --fal-text-sub:#6a7480;
  --fal-border:#e3e1db;
  --fal-bg-card:#fff;
}

/*
 * 2026-08-04 추가, 같은 날 확장: falette.org 원본 theme/blog/css/fal_tokens.css의
 * :root 색상/그림자 토큰 전체(라이트 모드 값)를 통째로 이식. coin_series는 편마다
 * wr_content가 참조하는 --fal-* 변수명이 바뀌어왔고(1편 --fal-border 폴백형
 * → 2편 --fal-rule 폴백없음), 그때마다 fal_vars.css를 손으로 따라가면 다음 편에서
 * 또 같은 문제(폴백 없는 var()가 통째로 무효화되어 border/구분선이 사라짐)가
 * 재발한다. 폰트 스택/타입스케일/간격/모서리/레이아웃 토큰은 wr_content
 * 컴포넌트가 쓰지 않고 코인랩 자체 레이아웃과 충돌 우려가 있어 제외 —
 * 색상·그림자 토큰만 이식. 코인랩은 다크모드 토글이 없어
 * [data-bs-theme="dark"] 값은 이식하지 않음(라이트값만).
 */
:root{
  /* 지면 */
  --fal-paper:      #FAFAF9;
  --fal-surface:    #FFFFFF;
  --fal-surface-2:  #F4F4F3;

  /* 잉크 */
  --fal-ink:        #16191D;
  --fal-ink-2:      #4A5057;
  --fal-ink-3:      #7C838B;
  --fal-ink-4:      #A8AEB4;

  /* 괘선 */
  --fal-rule:       #E3E3E1;
  --fal-rule-2:     #CBCBC8;
  --fal-rule-heavy: #16191D;

  /* 브랜드 */
  --fal-brand:       #0D6E6E;
  --fal-brand-hover: #0A5555;
  --fal-brand-tint:  rgba(13,110,110,0.08);
  --fal-brand-rule:  rgba(13,110,110,0.30);
  --fal-on-brand:    var(--fal-surface);

  /* 시맨틱(티커) */
  --fal-up:         #157F3D;
  --fal-up-tint:    rgba(21,127,61,0.09);
  --fal-down:       #C0322B;
  --fal-down-tint:  rgba(192,50,43,0.09);
  --fal-warn:       #8A6100;
  --fal-warn-tint:  rgba(138,97,0,0.10);
  --fal-new:        #ffb020;

  /* 타임라인 카테고리 도트 */
  --fal-cat-money:   #A7972F;
  --fal-cat-life:    #57A72F;
  --fal-cat-tech:    #2F61A7;
  --fal-cat-health:  #492FA7;
  --fal-cat-society: #952FA7;
  --fal-cat-fun:     #A72F6D;

  /* 그림자 */
  --fal-shadow-none: none;
  --fal-shadow-pop:  0 4px 16px rgba(22,25,29,0.10);
  --fal-shadow-card: 0 1px 4px rgba(0,0,0,.04);
}

/* 2026-08-12 추가: fal-accent/fal-danger/fal-on-accent/fal-text-muted 라이트값 누락분 보강 */
:root{
  --fal-accent: var(--fal-brand);
  --fal-on-accent: var(--fal-on-brand);
  --fal-danger: var(--fal-down);
  --fal-text-muted: var(--fal-ink-2);
}

/* 2026-08-12 추가: coin_series 다크모드 대응. 코인랩 html[data-theme="dark"] 팔레트에 맞춤 */
html[data-theme="dark"]{
  --fal-text-main:#E9ECF1; --fal-text-sub:#8A93A6; --fal-border:#232838; --fal-bg-card:#12151F;
  --fal-paper:#0B0E15; --fal-surface:#12151F; --fal-surface-2:#161A28; --fal-surface-2-dark:#161A28;
  --fal-ink:#E9ECF1; --fal-ink-2:#98A2B3; --fal-ink-3:#8A93A6; --fal-ink-4:#6B7280;
  --fal-rule:#232838; --fal-rule-2:#2D3348; --fal-rule-heavy:#E9ECF1;
  --fal-accent:#E8B04B; --fal-on-accent:#0B0E15; --fal-danger:#FF4D5E; --fal-text-muted:#8A93A6;
}

/* autotrade 게시글 하단 "관련 글" 블록(같은 게시판 최신 3개, 카테고리 미사용). --fal-* 전용,
   --cl-*와 혼용 금지. 다크값은 위 html[data-theme="dark"] 블록으로 자동 대응됨. */
.fal-related{ margin-top:18px; padding:16px 18px; background:var(--fal-bg-card); border:1px solid var(--fal-border); border-radius:12px; }
.fal-related-title{ margin:0 0 10px; font-size:14px; font-weight:700; color:var(--fal-text-main); }
.fal-related-list{ list-style:none; margin:0; padding:0; }
.fal-related-list li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--fal-border); }
.fal-related-list li:first-child{ border-top:none; }
.fal-related-list a{ color:var(--fal-text-main); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fal-related-list a:hover{ color:var(--fal-accent); }
.fal-related-date{ flex-shrink:0; font-size:12px; color:var(--fal-text-sub); }