@charset "utf-8";
/* ============================================================
   Falette CoinLab — 전용 오버라이드 스타일  v2
   컨셉: 장부(ledger) 괘선 · 클래식 · 견고
   원칙: 라운드 최소(2px), 그림자 0, 그라데이션 0, 실선 괘선으로 구조를 만든다
   적용: 테마 CSS 뒤에 마지막으로 로드할 것

   v2 변경
   - 수동 다크모드 토글 지원 (html[data-theme])
   - 게시글 본문/제목 좌우 여백 확보
   - 모바일 게시판 목록 카드형 재구성 (제목 크기 확대)
   - tn-* / fal-* 콘텐츠 토큰 다크모드 호환 레이어
   ============================================================ */

/* ============================================================
   1. 토큰 — 라이트
   ============================================================ */
:root{
  /* 지면 */
  --cl-paper:      #ffffff;
  --cl-paper-2:    #f5f4f1;   /* 보조면 (섹션 배경, 카드 헤더) */
  --cl-paper-3:    #ebe9e4;   /* 눌린 면 */

  /* 잉크 */
  --cl-ink:        #1c1c1c;
  --cl-ink-2:      #4a4a48;
  --cl-ink-3:      #85837e;   /* 캡션 · 메타 */

  /* 괘선 */
  --cl-rule:       #d8d5cf;
  --cl-rule-2:     #b9b5ad;

  /* 포인트 */
  --cl-accent:     #17453a;
  --cl-accent-2:   #0e2e26;
  --cl-accent-bg:  #eef2f0;
  --cl-on-accent:  #ffffff;

  /* 시세 색 (국내 관례) */
  --cl-up:         #b8342c;
  --cl-down:       #17458a;

  /* 형태 */
  --cl-radius:     2px;
  --cl-gap:        20px;
  /* 본문 좌우 여백: 모바일 18px → 데스크톱 44px */
  --cl-pad-x:      clamp(18px, 4.5vw, 44px);
  --cl-measure:    760px;     /* 본문 최적 가독 폭 */

  /* 서체 */
  --cl-serif: "Noto Serif KR", "본명조", serif;
  --cl-sans:  "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "맑은 고딕", sans-serif;
  --cl-mono:  "JetBrains Mono", "D2Coding", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

/* ============================================================
   2. 토큰 — 다크
   우선순위: 수동 지정(data-theme) > OS 설정
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cl-paper:     #16181a;
    --cl-paper-2:   #1e2124;
    --cl-paper-3:   #262a2e;
    --cl-ink:       #e8e6e1;
    --cl-ink-2:     #b8b5ae;
    --cl-ink-3:     #8b8880;
    --cl-rule:      #32373c;
    --cl-rule-2:    #464c53;
    --cl-accent:    #6fae9a;
    --cl-accent-2:  #96c9b7;
    --cl-accent-bg: #1c2724;
    --cl-on-accent: #0e2e26;
    --cl-up:        #e2645b;
    --cl-down:      #6f9de0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --cl-paper:     #16181a;
  --cl-paper-2:   #1e2124;
  --cl-paper-3:   #262a2e;
  --cl-ink:       #e8e6e1;
  --cl-ink-2:     #b8b5ae;
  --cl-ink-3:     #8b8880;
  --cl-rule:      #32373c;
  --cl-rule-2:    #464c53;
  --cl-accent:    #6fae9a;
  --cl-accent-2:  #96c9b7;
  --cl-accent-bg: #1c2724;
  --cl-on-accent: #0e2e26;
  --cl-up:        #e2645b;
  --cl-down:      #6f9de0;
  color-scheme: dark;
}

/* ============================================================
   3. 기본 지면
   ============================================================ */
body{
  background: var(--cl-paper-2);
  color: var(--cl-ink);
  font-family: var(--cl-sans);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  transition: background-color .15s ease, color .15s ease;
}
a{ color: var(--cl-accent); text-decoration: none; }
a:hover, a:focus{ color: var(--cl-accent-2); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--cl-accent);
  outline-offset: 2px;
}
hr{ border: 0; border-top: 1px solid var(--cl-rule); }
img, video, table{ max-width: 100%; }
img{ height: auto; }

/* 그림자·라운드·그라데이션 정리 (테마 클래스명을 몰라도 먹는다) */
#wrapper *, #wrapper *::before, #wrapper *::after{
  box-shadow: none !important;
  text-shadow: none !important;
}
#wrapper [class*="card"], #wrapper [class*="box"], #wrapper [class*="panel"],
#wrapper [class*="widget"], #wrapper [class*="hero"], #wrapper [class*="sect"],
#wrapper section, #wrapper article, #wrapper aside{
  border-radius: var(--cl-radius) !important;
  background-image: none !important;
}

/* ============================================================
   4. 타이포
   ============================================================ */
h1, h2, h3, h4,
#wrapper [class*="title"], #wrapper [class*="tit"]{
  font-family: var(--cl-serif);
  font-weight: 700;
  color: var(--cl-ink);
  letter-spacing: -0.02em;
  line-height: 1.35;
}
h1{ font-size: 2.05rem; }
h2{ font-size: 1.4rem; }
h3{ font-size: 1.1rem; }

/* 섹션 헤딩: 좌측 두께선 = 장부 괘선 모티프 (시그니처)
   v3: 원래 flex(space-between)로 짰던 게 forum.css의 .forum-section-head(같은 요소에
   같이 붙는 클래스)와 만나 제목/설명문이 겹쳐 보이는 문제가 있어, 겹칠 여지가 없는
   블록(세로 스택) 레이아웃으로 변경. display:block 이 .forum-section-head 의
   display:flex 를 완전히 대체하므로 space-between 조합 자체가 사라짐. */
.cl-heading{
  display: block;
  margin: 36px 0 14px;
  padding: 0 0 10px 12px;
  border-bottom: 1px solid var(--cl-rule-2);
  border-left: 3px solid var(--cl-accent);
}
.cl-heading > h2{ margin: 0 0 4px; color: var(--cl-ink); }
.cl-heading > .cl-heading-desc,
.cl-heading > p.cl-heading-desc{
  display: block;
  font-size: .82rem; color: var(--cl-ink-3);
  font-family: var(--cl-sans); font-weight: 400;
}

/* 아이브로우(영문 라벨) */
.cl-eyebrow,
#wrapper [class*="eyebrow"], #wrapper [class*="label-en"]{
  font-family: var(--cl-mono);
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cl-ink-3); font-weight: 500;
}

/* 숫자는 항상 등폭 */
#wrapper [class*="count"], #wrapper [class*="num"], #wrapper [class*="stat"],
.cl-num, td.td_num, td.td_num2, .cl-price{
  font-family: var(--cl-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.cl-up{ color: var(--cl-up); }
.cl-down{ color: var(--cl-down); }

/* ============================================================
   5. 컨테이너 / 카드
   ============================================================ */
#wrapper [class*="card"], #wrapper [class*="panel"], #wrapper [class*="widget"],
#wrapper aside > div, .cl-card{
  background: var(--cl-paper);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-radius);
}
#wrapper a[class*="card"]:hover, .cl-card:hover{
  border-color: var(--cl-accent);
  background: var(--cl-paper);
}
#wrapper [class*="card"] > [class*="head"],
#wrapper [class*="panel"] > [class*="head"],
.cl-card__head{
  background: var(--cl-paper-2);
  border-bottom: 1px solid var(--cl-rule);
  padding: 11px 14px;
  font-family: var(--cl-serif); font-weight: 700; font-size: .95rem;
}

/* ============================================================
   6. 히어로
   ============================================================ */
.cl-hero{
  background: var(--cl-paper);
  border: 1px solid var(--cl-rule);
  border-top: 3px solid var(--cl-accent);
  border-radius: var(--cl-radius);
  padding: 34px 30px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 260px;
  gap: 28px; align-items: start;
}
.cl-hero h1{ margin: 10px 0 12px; }
.cl-hero .cl-lede{
  color: var(--cl-ink-2); font-size: .95rem; line-height: 1.75; max-width: 46em;
}
.cl-hero .cl-disclaimer{
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--cl-rule);
  font-size: .78rem; color: var(--cl-ink-3); line-height: 1.7;
}
.cl-status{
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-radius);
  background: var(--cl-paper-2);
}
.cl-status dl{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.cl-status div{
  padding: 12px 14px;
  border-bottom: 1px solid var(--cl-rule);
  border-right: 1px solid var(--cl-rule);
}
.cl-status div:nth-child(2n){ border-right: 0; }
.cl-status div:nth-last-child(-n+2){ border-bottom: 0; }
.cl-status div.cl-status--wide{ grid-column: 1 / -1; border-right: 0; }
.cl-status dt{ font-size: .72rem; color: var(--cl-ink-3); letter-spacing: .02em; }
.cl-status dd{
  margin: 3px 0 0;
  font-family: var(--cl-mono); font-variant-numeric: tabular-nums;
  font-size: 1.4rem; font-weight: 600; color: var(--cl-ink);
}

/* ============================================================
   7. 버튼
   ============================================================ */
.cl-btn, #wrapper [class*="btn"]{
  border-radius: var(--cl-radius) !important;
  font-family: var(--cl-sans); font-weight: 600; letter-spacing: -0.01em;
  background-image: none !important;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cl-btn{
  display: inline-block; padding: 9px 18px; font-size: .88rem;
  border: 1px solid var(--cl-rule-2);
  background: var(--cl-paper); color: var(--cl-ink);
}
.cl-btn:hover{ border-color: var(--cl-accent); color: var(--cl-accent); text-decoration: none; }
.cl-btn--solid{
  background: var(--cl-accent); border-color: var(--cl-accent); color: var(--cl-on-accent);
}
.cl-btn--solid:hover{
  background: var(--cl-accent-2); border-color: var(--cl-accent-2); color: var(--cl-on-accent);
}

/* ============================================================
   8. 헤더 / 네비
   ============================================================ */
#hd, .cl-header{
  background: var(--cl-paper);
  border-bottom: 1px solid var(--cl-rule-2);
}
.cl-header__inner{ display: flex; align-items: center; gap: 20px; padding: 14px 0; }
.cl-logo{
  font-family: var(--cl-serif); font-size: 1.28rem; font-weight: 700;
  color: var(--cl-ink); letter-spacing: -0.02em;
}
.cl-logo:hover{ text-decoration: none; color: var(--cl-accent); }
.cl-tagline{
  display: block; margin-top: 3px; font-size: .75rem;
  color: var(--cl-ink-3); font-weight: 400; letter-spacing: 0;
}

.cl-gnb{ border-top: 1px solid var(--cl-rule); }
.cl-gnb ul{ display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cl-gnb a{
  display: block; padding: 12px 14px; font-size: .88rem; font-weight: 600;
  color: var(--cl-ink-2); border-bottom: 2px solid transparent;
}
.cl-gnb a:hover{ color: var(--cl-accent); border-bottom-color: var(--cl-rule-2); text-decoration: none; }
.cl-gnb a[aria-current="page"], .cl-gnb li.on > a{
  color: var(--cl-accent); border-bottom-color: var(--cl-accent);
}

.cl-search{
  display: flex; border: 1px solid var(--cl-rule-2);
  border-radius: var(--cl-radius); overflow: hidden; background: var(--cl-paper);
}
.cl-search input[type="text"]{
  border: 0; padding: 9px 12px; font-size: .86rem; min-width: 0; flex: 1;
  background: transparent; color: var(--cl-ink);
}
.cl-search input::placeholder{ color: var(--cl-ink-3); }
.cl-search button{
  border: 0; background: var(--cl-paper-2); padding: 0 14px;
  color: var(--cl-ink-2); cursor: pointer;
}
.cl-search button:hover{ background: var(--cl-accent); color: var(--cl-on-accent); }

/* ---------- 8-1. 다크모드 토글 버튼 ---------- */
.cl-theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--cl-rule-2);
  border-radius: var(--cl-radius);
  background: var(--cl-paper);
  color: var(--cl-ink-2);
  cursor: pointer; flex: none;
  transition: border-color .12s ease, color .12s ease;
}
.cl-theme-toggle:hover{ border-color: var(--cl-accent); color: var(--cl-accent); }
.cl-theme-toggle svg{ width: 17px; height: 17px; display: block; }
/* 아이콘 전환: 라이트일 때 달, 다크일 때 해 */
.cl-theme-toggle .cl-ico-sun{ display: none; }
.cl-theme-toggle .cl-ico-moon{ display: block; }
:root[data-theme="dark"] .cl-theme-toggle .cl-ico-sun{ display: block; }
:root[data-theme="dark"] .cl-theme-toggle .cl-ico-moon{ display: none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cl-theme-toggle .cl-ico-sun{ display: block; }
  :root:not([data-theme="light"]) .cl-theme-toggle .cl-ico-moon{ display: none; }
}
/* JS 없으면 숨긴다 (동작 안 하는 버튼 노출 금지) */
html:not(.cl-js) .cl-theme-toggle{ display: none; }
/* 스크린리더 전용 텍스트 */
.cl-sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   9. 게시판 목록 — 데스크톱
   ============================================================ */
#bo_list, .cl-list-wrap{
  background: var(--cl-paper);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-radius);
  padding: 0;
  overflow: hidden;
}
.tbl_head01{ width: 100%; border-collapse: collapse; }
.tbl_head01 thead th, .cl-list__head{
  background: var(--cl-paper-2);
  border-top: 2px solid var(--cl-ink);
  border-bottom: 1px solid var(--cl-rule-2);
  font-weight: 600; font-size: .84rem; color: var(--cl-ink-2);
  padding: 11px 10px; white-space: nowrap;
}
.tbl_head01 td{
  border-bottom: 1px solid var(--cl-rule);
  padding: 12px 10px; font-size: .9rem; color: var(--cl-ink-2);
  vertical-align: middle;
}
.tbl_head01 tbody tr:hover{ background: var(--cl-paper-2); }
.tbl_head01 .bo_tit, .tbl_head01 td.td_subject a{
  color: var(--cl-ink); font-size: .93rem; font-weight: 500; line-height: 1.5;
}
.tbl_head01 .bo_tit:hover{ color: var(--cl-accent); }

/* 분류(카테고리) 배지 — 알약 금지, 사각 태그 */
.bo_cate_link, .cl-cate{
  display: inline-block;
  padding: 2px 7px; margin-right: 6px;
  border: 1px solid var(--cl-rule-2);
  border-radius: var(--cl-radius);
  background: var(--cl-paper-2);
  font-family: var(--cl-mono);
  font-size: .68rem; font-weight: 500;
  color: var(--cl-ink-3) !important;
  letter-spacing: .02em; vertical-align: middle;
}
.bo_cate_link:hover{ border-color: var(--cl-accent); color: var(--cl-accent) !important; text-decoration: none; }

/* 카테고리 필터 줄 */
#bo_cate ul{ display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; }
#bo_cate a{
  display: block; padding: 6px 13px;
  border: 1px solid var(--cl-rule-2); border-radius: var(--cl-radius);
  background: var(--cl-paper); color: var(--cl-ink-2);
  font-size: .82rem; font-weight: 500;
}
#bo_cate a:hover{ border-color: var(--cl-accent); color: var(--cl-accent); text-decoration: none; }
#bo_cate #bo_cate_on, #bo_cate a.bo_cate_on{
  background: var(--cl-accent); border-color: var(--cl-accent);
  color: var(--cl-on-accent); font-weight: 600;
}

/* 커스텀 목록(메인 최근글 등) */
.cl-list{ list-style: none; margin: 0; padding: 0; }
.cl-list > li{ border-bottom: 1px solid var(--cl-rule); }
.cl-list > li:last-child{ border-bottom: 0; }
.cl-list a{ display: block; padding: 11px 14px; color: var(--cl-ink); font-size: .9rem; line-height: 1.5; }
.cl-list a:hover{ background: var(--cl-paper-2); text-decoration: none; }
.cl-list .cl-list__meta{
  display: block; margin-top: 4px; font-size: .74rem; color: var(--cl-ink-3);
  font-family: var(--cl-mono); font-variant-numeric: tabular-nums;
}
.cl-empty{
  padding: 30px 14px; text-align: center;
  color: var(--cl-ink-3); font-size: .85rem; line-height: 1.7;
}

/* 페이지네이션 */
.pg_wrap{ margin: 22px 0; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pg_page, .pg_current{
  display: inline-block; min-width: 34px; padding: 7px 9px;
  border: 1px solid var(--cl-rule); border-radius: var(--cl-radius);
  font-family: var(--cl-mono); font-size: .82rem; text-align: center;
  background: var(--cl-paper); color: var(--cl-ink-2);
}
.pg_current{
  background: var(--cl-accent); border-color: var(--cl-accent);
  color: var(--cl-on-accent); font-weight: 600;
}
.pg_page:hover{ border-color: var(--cl-accent); color: var(--cl-accent); text-decoration: none; }

/* ============================================================
   10. 게시글 본문 뷰 — 좌우 여백 확보 (v2 핵심 수정)
   문제: 자동매매 일지 본문이 컨테이너에 꽉 차서 가독성 저하,
         제목·메타 줄도 좌우 여백 없음
   ============================================================ */
#bo_v, .cl-view{
  background: var(--cl-paper);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-radius);
  padding: 0 0 30px;
  overflow: hidden;
}

/* 게시판 이름 줄 */
#bo_v_table, .cl-view__board{
  padding: 14px var(--cl-pad-x);
  border-bottom: 1px solid var(--cl-rule);
  background: var(--cl-paper-2);
  font-size: .84rem; font-weight: 600; color: var(--cl-ink-2);
}

/* 제목 */
#bo_v_title, .cl-view__title{
  padding: 26px var(--cl-pad-x) 0;
  font-family: var(--cl-serif);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); /* v3: 3.2vw/1.85rem이 3줄까지 차지해 축소 */
  font-weight: 700; line-height: 1.4;
  letter-spacing: -0.025em; color: var(--cl-ink);
  word-break: keep-all;
}
#bo_v_title .bo_v_cate, #bo_v_title .bo_v_cate_link{
  display: inline-block; margin-bottom: 10px;
}

/* 작성자·조회수·날짜 메타 */
#bo_v_info, .cl-view__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: 16px 0 0;
  padding: 14px var(--cl-pad-x);
  border-top: 1px solid var(--cl-rule);
  border-bottom: 1px solid var(--cl-rule);
  font-size: .8rem; color: var(--cl-ink-3);
}
#bo_v_info .sv_member, #bo_v_info strong{ color: var(--cl-ink-2); font-weight: 600; }
#bo_v_info .cl-view__meta-num{ font-family: var(--cl-mono); font-variant-numeric: tabular-nums; }

/* 본문 — 여기가 핵심 */
#bo_v_atc, .cl-view__body{
  padding: 30px var(--cl-pad-x) 10px;
}
#bo_v_con, .cl-view__content{
  font-size: 1rem;
  line-height: 1.85;
  color: var(--cl-ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
#bo_v_con > *:first-child{ margin-top: 0; }
#bo_v_con p{ margin: 0 0 1.35em; }
#bo_v_con h2{ margin: 2em 0 .7em; font-size: 1.32rem; padding-left: 11px; border-left: 3px solid var(--cl-accent); }
#bo_v_con h3{ margin: 1.7em 0 .6em; font-size: 1.1rem; }
#bo_v_con ul, #bo_v_con ol{ margin: 0 0 1.35em; padding-left: 1.4em; }
#bo_v_con li{ margin-bottom: .5em; line-height: 1.8; }
#bo_v_con blockquote{
  margin: 1.6em 0; padding: 14px 18px;
  border-left: 3px solid var(--cl-rule-2);
  background: var(--cl-paper-2);
  color: var(--cl-ink-2); font-size: .95rem;
}
#bo_v_con pre, #bo_v_con code{
  font-family: var(--cl-mono);
  background: var(--cl-paper-2);
  border: 1px solid var(--cl-rule);
  border-radius: var(--cl-radius);
}
#bo_v_con code{ padding: 1px 5px; font-size: .87em; }
#bo_v_con pre{ padding: 14px 16px; overflow-x: auto; font-size: .84rem; line-height: 1.65; }
#bo_v_con pre code{ border: 0; padding: 0; background: none; }
#bo_v_con table{ width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .88rem; }
#bo_v_con th, #bo_v_con td{ border: 1px solid var(--cl-rule); padding: 9px 11px; }
#bo_v_con th{ background: var(--cl-paper-2); font-weight: 600; }
#bo_v_con img{ display: block; margin: 1.6em auto; border: 1px solid var(--cl-rule); }

/* 본문 안에 자체 폭(tn-wrap 등)이 있는 글은 이중 여백 방지 */
#bo_v_con > .tn-wrap,
#bo_v_con > .fal-wrap{
  max-width: var(--cl-measure);
  margin-left: auto; margin-right: auto;
  padding-left: 0; padding-right: 0;
}

/* 본문 상하단 버튼 줄 */
#bo_v_top, #bo_v_bot{ padding: 0 var(--cl-pad-x); }
#bo_v_top{ padding-top: 14px; }
#bo_v_bot{ padding-top: 20px; }
#bo_v_top ul, #bo_v_bot ul{
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0;
}
#bo_v_file, #bo_v_link{ margin: 20px var(--cl-pad-x) 0; }
#bo_v_file ul, #bo_v_link ul{
  list-style: none; margin: 0; padding: 12px 14px;
  border: 1px solid var(--cl-rule); border-radius: var(--cl-radius);
  background: var(--cl-paper-2); font-size: .85rem;
}

/* 댓글 영역 */
#bo_vc{ margin: 30px var(--cl-pad-x) 0; padding-top: 22px; border-top: 1px solid var(--cl-rule-2); }
#bo_vc article{ padding: 14px 0; border-bottom: 1px solid var(--cl-rule); }
#bo_vc_w{ margin: 22px var(--cl-pad-x) 0; }

/* 글 하단 면책 (전 게시글 공통 삽입용) */
.cl-post-disclaimer{
  margin: 30px var(--cl-pad-x) 0;
  padding: 14px 16px;
  border: 1px solid var(--cl-rule);
  border-left: 3px solid var(--cl-rule-2);
  border-radius: var(--cl-radius);
  background: var(--cl-paper-2);
  font-size: .79rem; line-height: 1.75; color: var(--cl-ink-3);
}

/* ============================================================
   11. 게시판 목록 — 모바일 (v2 핵심 수정)
   문제: 표가 가로로 밀려 제목이 3~4줄로 쪼개지고 글씨가 너무 작음
   해결: 표를 카드형 블록으로 전환, 제목 우선, 부가 컬럼 숨김
   ============================================================ */
@media (max-width: 640px){
  #bo_list, .cl-list-wrap{ overflow: visible; }

  #bo_list .tbl_head01 caption,
  #bo_list .tbl_head01 thead{
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
  }
  #bo_list .tbl_head01,
  #bo_list .tbl_head01 tbody,
  #bo_list .tbl_head01 tr,
  #bo_list .tbl_head01 td{
    display: block; width: auto !important;
  }
  #bo_list .tbl_head01 tr{
    position: relative;
    padding: 15px 16px;
    border-bottom: 1px solid var(--cl-rule);
  }
  #bo_list .tbl_head01 tr:hover{ background: var(--cl-paper-2); }
  #bo_list .tbl_head01 td{
    border: 0; padding: 0; text-align: left !important;
    white-space: normal;
  }

  /* 번호·추천·관리 컬럼은 모바일에서 숨긴다 */
  #bo_list .tbl_head01 td.td_num,
  #bo_list .tbl_head01 td.td_numbig,
  #bo_list .tbl_head01 td.td_group,
  #bo_list .tbl_head01 td.td_mng,
  #bo_list .tbl_head01 td.td_chk{ display: none; }

  /* 제목 — 크게, 최대 2줄 */
  #bo_list .tbl_head01 td.td_subject{ margin-bottom: 8px; }
  #bo_list .bo_tit,
  #bo_list td.td_subject > a{
    font-size: 1.02rem !important;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cl-ink);
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #bo_list .bo_cate_link{ font-size: .66rem; padding: 2px 6px; }

  /* 작성자·날짜·조회수 → 한 줄 메타로 */
  #bo_list .tbl_head01 td.td_name,
  #bo_list .tbl_head01 td.td_date,
  #bo_list .tbl_head01 td.td_datetime,
  #bo_list .tbl_head01 td.td_num2{
    display: inline-block;
    font-family: var(--cl-mono);
    font-variant-numeric: tabular-nums;
    font-size: .73rem;
    color: var(--cl-ink-3);
    margin-right: 12px;
  }
  #bo_list .tbl_head01 td.td_num2::before{ content: "조회 "; }
  #bo_list .tbl_head01 td.td_name a{ color: var(--cl-ink-3); font-weight: 500; }

  /* 댓글 수 배지 */
  #bo_list .cnt_cmt{
    display: inline-block; margin-left: 4px;
    font-family: var(--cl-mono); font-size: .72rem; color: var(--cl-accent);
  }

  /* 카테고리 필터 가로 스크롤 */
  #bo_cate ul{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  #bo_cate a{ white-space: nowrap; }

  /* ----------------------------------------------------------
     실제 모바일 UA(진짜 휴대폰/디바이스 에뮬레이션)로 접속하면
     그누보드5 모바일 스킨(mobile/skin/board/basic)이 처음부터
     <table>이 아니라 <div class="list_01"><ul><li> 카드형 목록을 렌더링한다.
     (위의 .tbl_head01 규칙은 "데스크톱 UA로 창만 좁힌 경우"의 표를 카드로
     바꾸는 안전망이고, 이 블록은 실제 모바일 UA가 이미 받는 카드형 마크업 자체를
     같은 타이포/터치타깃 기준으로 맞추는 부분이다.)
     ---------------------------------------------------------- */
  #bo_list .list_01 li{ padding: 15px 16px; }
  #bo_list .list_01 .bo_subject{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cl-ink);
    word-break: keep-all;
  }
  #bo_list .list_01 .bo_info{
    margin-top: 6px;
    font-family: var(--cl-mono);
    font-variant-numeric: tabular-nums;
    font-size: .73rem;
    color: var(--cl-ink-3);
  }
  #bo_list .list_01 .bo_cate_link{ min-height: 22px; }
  #bo_list .list_01 .btn_top a, #bo_list .list_01 li a{ min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   12. 게시판 인덱스 카드
   ============================================================ */
.cl-boards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--cl-gap);
}
.cl-board{
  display: block;
  background: var(--cl-paper);
  border: 1px solid var(--cl-rule);
  border-left: 3px solid var(--cl-rule-2);
  border-radius: var(--cl-radius);
  padding: 18px 18px 15px; color: inherit;
}
.cl-board:hover{ border-color: var(--cl-rule); border-left-color: var(--cl-accent); text-decoration: none; }
.cl-board__name{ font-family: var(--cl-serif); font-weight: 700; font-size: 1.02rem; }
.cl-board__desc{ margin-top: 6px; font-size: .82rem; color: var(--cl-ink-2); line-height: 1.65; }
.cl-board__meta{
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--cl-rule);
  font-family: var(--cl-mono); font-variant-numeric: tabular-nums;
  font-size: .74rem; color: var(--cl-ink-3);
}

/* ============================================================
   13. 사이드바 · 폼
   ============================================================ */
.cl-aside > * + *{ margin-top: var(--cl-gap); }
.cl-aside__title{
  font-family: var(--cl-serif); font-size: .92rem; font-weight: 700;
  padding: 11px 14px;
  background: var(--cl-paper-2);
  border-bottom: 1px solid var(--cl-rule);
}
.cl-stat-grid{ display: grid; grid-template-columns: 1fr 1fr; }
.cl-stat-grid > div{
  padding: 11px 14px;
  border-bottom: 1px solid var(--cl-rule);
  border-right: 1px solid var(--cl-rule);
}
.cl-stat-grid > div:nth-child(2n){ border-right: 0; }
.cl-stat-grid > div:nth-last-child(-n+2){ border-bottom: 0; }
.cl-stat-grid dt{ font-size: .72rem; color: var(--cl-ink-3); }
.cl-stat-grid dd{
  margin: 2px 0 0;
  font-family: var(--cl-mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 600;
}

/* 폼 요소 — 다크모드 대응 필수 */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], select, textarea{
  background: var(--cl-paper);
  color: var(--cl-ink);
  border: 1px solid var(--cl-rule-2);
  border-radius: var(--cl-radius);
  padding: 9px 11px;
  font-family: var(--cl-sans);
  font-size: .88rem;
}
input::placeholder, textarea::placeholder{ color: var(--cl-ink-3); }
input:focus, select:focus, textarea:focus{ border-color: var(--cl-accent); }

/* ============================================================
   14. 광고 슬롯 (AdSense)
   ============================================================ */
.cl-ad{
  margin: 26px 0; padding-top: 8px;
  border-top: 1px solid var(--cl-rule);
  text-align: center; min-height: 1px;
}
.cl-ad::before{
  content: "AD"; display: block; margin-bottom: 8px;
  font-family: var(--cl-mono); font-size: .62rem;
  letter-spacing: .18em; color: var(--cl-ink-3);
}
.cl-ad--inarticle{ margin: 34px var(--cl-pad-x); }

/* ============================================================
   15. 푸터
   ============================================================ */
#ft, .cl-footer{
  margin-top: 48px;
  background: var(--cl-paper);
  border-top: 2px solid var(--cl-ink);
  color: var(--cl-ink-2);
  background-image: none;
}
.cl-footer__inner{ padding: 28px 0 34px; }
.cl-footer__links{
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  list-style: none; margin: 0 0 16px; padding: 0;
  font-size: .84rem; font-weight: 600;
}
.cl-footer__links a{ color: var(--cl-ink); }
.cl-footer__links a:hover{ color: var(--cl-accent); }
.cl-footer__desc{ font-size: .82rem; line-height: 1.8; max-width: 62em; color: var(--cl-ink-2); }
.cl-footer__disclaimer{
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--cl-rule);
  border-left: 3px solid var(--cl-rule-2);
  border-radius: var(--cl-radius);
  background: var(--cl-paper-2);
  font-size: .78rem; line-height: 1.75; color: var(--cl-ink-3);
}
.cl-footer__copy{
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--cl-rule);
  font-family: var(--cl-mono); font-size: .72rem; color: var(--cl-ink-3);
}

/* ============================================================
   16. 반응형
   ============================================================ */
@media (max-width: 900px){
  .cl-hero{ grid-template-columns: 1fr; padding: 26px 20px; }
  .cl-hero h1{ font-size: 1.65rem; }
  h1{ font-size: 1.65rem; }
}
@media (max-width: 600px){
  .cl-boards{ grid-template-columns: 1fr; }
  .cl-gnb ul{ overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .cl-gnb a{ white-space: nowrap; padding: 11px 12px; }
  .cl-hero{ padding: 22px 16px; }
  .cl-heading{ margin-top: 28px; }
  .cl-header__inner{ flex-wrap: wrap; gap: 10px 12px; }
  #bo_v_con{ font-size: .96rem; line-height: 1.8; }
  #bo_v_con pre{ font-size: .78rem; }
}

/* ============================================================
   17. 콘텐츠 토큰 다크모드 호환 레이어
   본문 글이 자체 tn-* / fal-* 토큰을 쓰는 경우,
   OS는 라이트인데 사이트만 다크로 켰을 때 본문이 하얗게 뜨는 것을 막는다.

   실제 토큰명은 라이브 페이지에서 직접 확인함(추정치 아님):
   - techlog 글(wr_id 1,4,5,6,7 전부 동일) 안에 이미 임베드된
     `@media (prefers-color-scheme:dark){ :root{ --tn-paper:#13161a; ... } }`
     값을 그대로 가져와 [data-theme="dark"] 셀렉터에도 동일하게 적용.
   - autotrade_fal의 skin/board/autotrade_fal/fal_vars.css 는 라이트 값만 정의된 상태
     (그 파일 주석: "코인랩은 다크모드 토글이 없어 dark 값은 이식하지 않음" — 이번 작업으로
     토글이 생겼으므로 여기서 다크 값을 신규로 보강함). wr_id=1은 구형 4토큰(--fal-text-main 등),
     wr_id=3은 신형 확장 토큰(--fal-ink 등)을 쓰는 것을 확인해 두 세트 모두 포함.
   ============================================================ */
:root[data-theme="dark"]{
  /* tn-* 계열 (기술 노트) — techlog 글 임베드 다크 블록에서 그대로 가져온 실값 */
  --tn-paper:     #13161a;
  --tn-ink:       #e6e8ea;
  --tn-muted:     #98a2ad;
  --tn-line:      #2b3138;
  --tn-teal:      #4ec7b8;
  --tn-teal-soft: #15302d;
  --tn-up:        #f0736a;
  --tn-down:      #6fa4f0;
  --tn-warn:      #dfa54c;

  /* fal-* 계열 (자동매매 일지) — 신형 확장 토큰 (fal_vars.css 라이트값 대응 다크값) */
  --fal-paper:      #15171a;
  --fal-surface:    #1e2124;
  --fal-surface-2:  #262a2e;
  --fal-ink:        #e8e6e1;
  --fal-ink-2:      #b8b5ae;
  --fal-ink-3:      #8b8880;
  --fal-ink-4:      #635f58;
  --fal-rule:       #32373c;
  --fal-rule-2:     #464c53;
  --fal-rule-heavy: #e8e6e1;
  --fal-brand:       #6fae9a;
  --fal-brand-hover: #8fc4b2;
  --fal-brand-tint:  rgba(111,174,154,0.14);
  --fal-brand-rule:  rgba(111,174,154,0.35);
  --fal-on-brand:    #0e2e26;
  --fal-up:         #4caf6f;
  --fal-up-tint:    rgba(76,175,111,0.14);
  --fal-down:       #e2645b;
  --fal-down-tint:  rgba(226,100,91,0.14);
  --fal-warn:       #d4a017;
  --fal-warn-tint:  rgba(212,160,23,0.14);
  --fal-new:        #ffb020;
  --fal-cat-money:   #d4c15a;
  --fal-cat-life:    #82d45c;
  --fal-cat-tech:    #6f9ee0;
  --fal-cat-health:  #8f6fe0;
  --fal-cat-society: #cf6fe0;
  --fal-cat-fun:     #e06f9e;
  --fal-shadow-none: none;
  --fal-shadow-pop:  0 4px 16px rgba(0,0,0,.45);
  --fal-shadow-card: 0 1px 4px rgba(0,0,0,.3);

  /* fal-* 구형 4토큰(shim) — wr_id=1 계열 글이 직접 참조 */
  --fal-text-main: #e8e6e1;
  --fal-text-sub:  #b8b5ae;
  --fal-border:    #32373c;
  --fal-bg-card:   #1e2124;
}
/* 글 안에 하드코딩된 흰 배경이 남아 있을 때의 최후 방어 */
:root[data-theme="dark"] #bo_v_con [style*="background:#fff"],
:root[data-theme="dark"] #bo_v_con [style*="background: #fff"],
:root[data-theme="dark"] #bo_v_con [style*="background-color:#fff"],
:root[data-theme="dark"] #bo_v_con [style*="background-color: #fff"]{
  background: var(--cl-paper-2) !important;
  color: var(--cl-ink) !important;
}

/* ============================================================
   18. 접근성 / 인쇄
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
.cl-skip{
  position: absolute; left: -9999px;
  background: var(--cl-accent); color: var(--cl-on-accent);
  padding: 10px 16px; z-index: 999;
}
.cl-skip:focus{ left: 8px; top: 8px; }

@media print{
  #hd, .cl-gnb, .cl-aside, .cl-ad, #ft, .cl-theme-toggle{ display: none !important; }
  body{ background: #fff; color: #000; }
  #bo_v, .cl-view{ border: 0; }
}

/* ============================================================
   19. 레이아웃 버그 수정 (§3)
   원인: theme/netcity_forum/css/default.css 의 `#hd, #wrapper, #ft {min-width:1200px}`
   가 forum.css 커스텀 레이아웃에도 그대로 적용되어, 1200px 미만 뷰포트(데스크톱 창 축소 포함)에서
   헤더/본문/푸터가 강제로 넓어지며 가로 스크롤과 "헤더가 중간에 렌더링되는" 현상을 만든다.
   default.css/forum.css 원본은 건드리지 않고 여기서만 무효화한다.
   ============================================================ */
html{ overflow-x: hidden; }
#hd, #wrapper, #ft{ min-width: 0; }
#container_wr, #ft_wr{ width: auto; max-width: 100%; }

/* ============================================================
   20. v3 패치 — 다크모드 잔여 버그 + 뷰/목록 정리
   ============================================================ */

/* --- §2-1 사이드바(현재 접속자/방문 통계/공지) 다크모드 대비 ---
   forum.css의 .forum-side-card h2 / .forum-side-card--counter > h2 가
   color:#172033 을 하드코딩해서, 다크모드에서 카드 배경은 어두워지는데
   글자색은 그대로 남아 거의 안 보이거나(대비 실패) 옆 요소와 뒤섞여 보였다.
   같은 specificity(class + 자식결합자 + 태그)라 소스 순서로 이긴다. */
.forum-side-card h2,
.forum-side-card--counter > h2{ color: var(--cl-ink); }
.forum-notice-latest__title strong{ color: var(--cl-ink); }
.forum-notice-latest__meta{ color: var(--cl-ink-3); }

/* --- §2-2 푸터 면책 박스 다크모드 방어 ---
   .cl-footer__disclaimer 자체는 var(--cl-paper-2)를 쓰고 있어 코드상으로는
   정상이어야 하나(원인 파일을 못 찾음, 아래 v3 보고 참고), 혹시 남아있을 수 있는
   하드코딩 값을 확실히 덮도록 다크 스코프 규칙을 추가해 둔다. */
:root[data-theme="dark"] .cl-footer__disclaimer,
:root[data-theme="dark"] .cl-post-disclaimer{
  background: var(--cl-paper-2) !important;
  color: var(--cl-ink-3) !important;
  border-color: var(--cl-rule) !important;
}

/* --- §6 목록 상단 배너(.forum-page-title) 여백 + 다크모드 ---
   기존엔 padding 18px 20px 고정(--cl-pad-x 미적용) + color:#172033/background:#fff
   하드코딩이라 다크모드에서 흰 박스로 남았다. */
.forum-page-title{
  padding: 20px var(--cl-pad-x) 18px;
  background: var(--cl-paper);
  color: var(--cl-ink);
  border-color: var(--cl-rule);
}

/* --- §5 "열람중" 라벨 세로 쪼개짐 + §9 날짜 컬럼 2줄 넘침 --- */
.tbl_head01 td.td_num,
.tbl_head01 td.td_numbig,
.tbl_head01 .bo_current{
  white-space: nowrap;
  min-width: 44px;
}
.tbl_head01 td.td_date,
.tbl_head01 td.td_datetime{
  white-space: nowrap;
  min-width: 60px;
}

/* --- §7 목록 제목: 데스크톱(641px~)은 1줄 말줄임, 모바일(~640px)은 §11의 2줄 클램프 유지 --- */
@media (min-width: 641px){
  .tbl_head01 td.td_subject .bo_tit,
  .tbl_head01 td.td_subject > a{
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
  }
}

/* --- §8 말머리 배지 - 제목 간 여백 --- */
.bo_cate_link{ margin-bottom: 6px; }

/* --- §4 tn-series 시리즈 목차 박스 (참고용, 현재 미적용) ---
   글 본문(wr_content)에 <style>로 .tn-series/.tn-series-g/.tn-series-g li 가
   이미 인라인 임베드되어 있고, 그 <style>이 문서 순서상 이 coinlab.css(<head>)보다
   뒤(본문 위치)에 오기 때문에 같은 selector를 여기 써도 이길 수 없다.
   실제 라이브 5개 글(techlog wr_id 1,4,5,6,7)을 확인한 결과 li마다 박스가 아니라
   그룹(.tn-series-g) 하나가 틀을 감싸는 정상 구조였다 — 이번 점검에서는 재현 안 됨.
   ============================================================ */

/* ============================================================
   21. forum.css 하드코딩 라이트 색상 다크모드 오버라이드
   원인: forum.css의 #hd.forum-hd / .forum-nav 가 배경·글자색을
   hex로 직접 박아놔서 다크모드 변수를 못 받음 (2026-08-05)
   ============================================================ */
:root[data-theme="dark"] #hd.forum-hd,
:root[data-theme="dark"] .forum-hd{
  background: var(--cl-paper) !important;
  border-bottom-color: var(--cl-rule-2) !important;
}
:root[data-theme="dark"] #hd.forum-hd a{ color: var(--cl-ink) !important; }
:root[data-theme="dark"] .forum-brand{ color: var(--cl-ink) !important; }

:root[data-theme="dark"] .forum-nav{
  background: var(--cl-paper) !important;
  border-top-color: var(--cl-rule) !important;
}
:root[data-theme="dark"] .forum-nav a,
:root[data-theme="dark"] .forum-menu__link{
  color: var(--cl-ink-2) !important;
}
:root[data-theme="dark"] .forum-nav a:hover,
:root[data-theme="dark"] .forum-menu__item:focus-within > .forum-menu__link{
  background: var(--cl-paper-2) !important;
  color: var(--cl-accent) !important;
}