@charset "utf-8";
/* ============================================================
   Falette CoinLab — 카드형 리스킨 (2026-08-06)
   컨셉: 카드(radius/shadow/hover) + 다크·라이트 토글
   토큰 네임스페이스: --cl-*
   적용: default.css / forum류 뒤에 항상 마지막으로 로드

   색상 규칙: hex 하드코딩 금지. var(--cl-*) 토큰만 사용. 밝기는 opacity로 조절.
   (2026-08-10 전면 정리: 개별 요소마다 hex를 박아온 패치가 다크/라이트 어느 한쪽에서
   반복적으로 대비 문제를 일으켜서, 전체를 토큰 기반으로 통일함)
   ============================================================ */

/* ---------- 1. 폰트 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700;900&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------- 2. 토큰 ---------- */
html[data-theme="dark"]{
  --cl-bg:#0B0E15; --cl-bg-elev:#0F1220; --cl-card:#12151F; --cl-card-hover:#161A28;
  --cl-border:#232838; --cl-text:#E9ECF1; --cl-muted:#8A93A6; --cl-muted-2:#98A2B3;
  --cl-gain:#FF4D5E; --cl-loss:#5686FF; --cl-gold:#E8B04B; --cl-gold-dim:#3A2E1A;
  /* -fill 은 텍스트가 아니라 "배경"으로 쓰이는 극소수 자리(버튼/필 배지) 전용 - 그 위에 얹는
     --cl-on-gold/--cl-on-gain/--cl-on-loss 고정 텍스트색과의 대비를 확보하려면 밝기를 낮추면 안
     되는 자리라, 위 텍스트용 값과 분리해둔다. 다크모드는 기존 값 그대로라 원본과 동일.
     --cl-loss는 아이콘뱃지 합성 대비가 살짝 부족해(4.31:1) 조금 더 밝혔다(2026-08-08 WCAG 점검). */
  --cl-gold-fill:#E8B04B; --cl-gain-fill:#FF4D5E; --cl-loss-fill:#4C7DFF;
  /* 2026-08-16: 다크 RGB 고정 배경워시("다크값 RGB 고정" 패턴) 정리용 - 카드/배지 배경에
     쓰이는 저채도(~12%) 틴트 전용. gain/loss 텍스트·-fill과는 별개 자리. */
  --cl-gain-tint: rgba(255,77,94,.12); --cl-loss-tint: rgba(76,125,255,.12);
  --cl-shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --cl-shadow-card-hover: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 36px -14px rgba(0,0,0,.7);
  --cl-row-alt: rgba(255,255,255,.015);
  --cl-notice-bg: rgba(232,176,75,.08);
  --cl-input-bg:#0F1220;
  /* 2026-08-13: 오렌지-핑크 -> 틸-시안 계열로 교체. 기존 값(#ff8a3d/#ff2d78)보다
     루미넌스가 낮아야 흰 배너 텍스트/흰 CTA 버튼 위 색글자 둘 다 4.5:1을 넘기는데,
     같은 밝기의 청록 계열이 오렌지 계열보다 상대휘도가 높게 잡혀(초록 채널 가중치 .7152)
     라이트값보다 살짝 더 진하게 잡음 - 그래도 흰 배경 대비 4.53:1(start)/4.76:1(end)로
     라이트보다 오히려 더 타이트하게 통과(원래 코멘트의 "네온" 의도는 유지 어려워 절충). */
  --cl-hero-accent-start:#0c8577;
  --cl-hero-accent-end:#037e93;
  --cl-hero-accent-glow: rgba(3,126,147,.55);
}
html[data-theme="light"]{
  --cl-bg:#F6F7FA; --cl-bg-elev:#FFFFFF; --cl-card:#FFFFFF; --cl-card-hover:#FBFBFD;
  --cl-border:#E4E7EE; --cl-text:#1B1E27; --cl-muted:#6B7280; --cl-muted-2:#6B7280;
  --cl-gain:#C22629; --cl-loss:#2F5FE0; --cl-gold:#8A5A18; --cl-gold-dim:#FBF0DA;
  /* 라이트 테마 골드/게인 텍스트가 흰 배경/틴트 배경에서 WCAG AA(4.5:1) 미달이었어서(로고 3.69:1,
     골드뱃지 3.26:1, 게인뱃지 합성 3.47~3.57:1) 텍스트로 쓰는 기본 토큰을 어둡게 했다. 반면 버튼/필
     배경으로 쓰이는 -fill 자리는 원래 밝은 값을 유지해야 그 위 고정 on-gold/on-gain 텍스트와의
     대비가 유지된다(어둡게 하면 오히려 대비가 깨짐) - 그래서 -fill 은 원래 값 그대로 분리 보관.
     --cl-loss는 텍스트로 쓰일 땐 이미 대비가 충분해 그대로 두고, 손실 솔리드뱃지 배경에서만 쓰는
     -fill 값을 별도로 더 밝혀서 그 위 on-loss 텍스트 대비를 확보했다(2026-08-08). */
  --cl-gold-fill:#B4791C; --cl-gain-fill:#E5383B; --cl-loss-fill:#4472E8;
  /* 라이트값은 --cl-gain(#C22629)/--cl-loss(#2F5FE0)의 RGB를 그대로 12% 불투명도로 옮김 */
  --cl-gain-tint: rgba(194,38,41,.12); --cl-loss-tint: rgba(47,95,224,.12);
  --cl-shadow-card: 0 1px 2px rgba(20,22,30,.04), 0 6px 18px -10px rgba(20,22,30,.10);
  --cl-shadow-card-hover: 0 4px 10px rgba(20,22,30,.06), 0 14px 30px -10px rgba(20,22,30,.14);
  --cl-row-alt: rgba(20,22,30,.015);
  --cl-notice-bg: #FBF3E2;
  --cl-input-bg:#FFFFFF;
}
:root{
  --cl-radius:14px;
  --cl-serif:'Noto Serif KR', serif;
  --cl-sans:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --cl-mono:'JetBrains Mono', monospace;
  /* 히어로 배너 전용 강조색 — 사이트 공용 --cl-* 팔레트와 무관하게 과감한 톤으로 고정.
     라이트 기본값을 여기 두고 dark 블록에서만 다른 값으로 오버라이드한다.
     2026-08-13: 오렌지-핑크 -> 틸-시안 계열로 교체(Tailwind teal-700/cyan-700 기준).
     흰 배너 텍스트/흰 CTA 버튼 위 색글자(.cl-hero-banner-cta, var(--cl-hero-accent-end)
     재사용) 양쪽 다 WCAG AA(4.5:1) 이상 나오도록 계산해서 선택 - 지난 감사에서
     "알려진 이슈"로 남았던 CTA 대비 미달(라이트 3.46:1)도 이 토큰 교체만으로 같이 해소됨. */
  --cl-hero-accent-start:#0f766e;
  --cl-hero-accent-end:#0e7490;
  --cl-hero-accent-glow: rgba(14,116,144,.38);
  /* 채도 높은 배지/버튼 배경(gold/gain/loss) 위에 올라가는 고정 텍스트색.
     배경 자체가 이미 다크/라이트 각각 대비를 확보한 값이라, 그 위 텍스트는
     테마와 무관하게 항상 어두운/밝은 고정색이어야 함 (var(--cl-text)를 쓰면
     테마가 바뀔 때 배경과 텍스트가 같은 방향으로 움직여 대비가 깨짐) */
  --cl-on-gold:#1A1200;
  --cl-on-gain:#1a0708;
  --cl-on-loss:#060c1f;
  --cl-on-badge:#fff;

  /* "LIVE/신규" 상태 배지 전용 고정색(2026-08-16) - 위 on-* 계열과 같은 이유로 테마 무관.
     원래 #2FB380였는데 위 --cl-on-badge(흰 텍스트) 대비 2.66:1로 WCAG AA 대실패라 이번에
     4.5:1을 만족하는 #0a7a4f(5.37:1)로 값 자체를 낮춤(토큰 매핑이 아니라 의도된 색상 수정). */
  --cl-live-fill:#0a7a4f;

  /* .cl-research-bridge 전용 고정 다크 카드 색(2026-08-16) - 히어로 배너(--cl-hero-accent-*)와
     동일한 이유로 테마 무관: 사이트 테마와 무관하게 항상 짙은 네이비 카드 + 밝은 텍스트로
     디자인된 "콜아웃" 컴포넌트라, var(--cl-card)/var(--cl-text) 등 테마 반응형 토큰을 쓰면
     라이트모드에서 흰 배경 위에 흰 글씨가 되어 버림. 기존 리터럴 값을 그대로 옮김(값 변경 없음). */
  --cl-fixed-dark-bg:#101828;
  --cl-fixed-dark-border:#e1e7ef;
  --cl-fixed-dark-text:#fff;
  --cl-fixed-dark-muted:#98a2b3;
  --cl-fixed-dark-body:#c2cad6;
  --cl-fixed-dark-overlay:rgba(255,255,255,.04);
  --cl-fixed-dark-overlay-border:rgba(255,255,255,.12);
  --cl-fixed-dark-overlay-hover:rgba(255,255,255,.08);
}

/* ---------- 3. 전역 리셋/베이스 ---------- */
html, body{ background:var(--cl-bg) !important; color:var(--cl-text) !important; overflow-x:hidden; }
/* 가독성 개선(2026-08-08): core default.css/mobile.css의 body font-size:0.75em(실효 12px)를
   16px로 상향, line-height 1.6을 본문 기본값으로 지정. 개별 요소가 이미 지정한 font-size/
   line-height(캡션 11~13px, #bo_v_con 1.85 등)는 selector 특이도가 더 높아 그대로 유지됨. */
body{ font-family:var(--cl-sans) !important; font-size:16px !important; line-height:1.6; transition:background .15s, color .15s; }
h1, h2, h3, h4{ line-height:1.3; }
/* 버튼/네비/배지류는 본문 line-height(1.6) 상속 대상에서 제외 - 대부분 padding으로 높이를
   맞춘 한 줄짜리 컴포넌트라 1.6이 걸리면 상하 여백만 불필요하게 늘어남. 이미 자체 line-height를
   지정해둔 요소(.cl-theme-toggle 등)는 특이도가 더 높아 이 규칙과 무관하게 유지됨. */
button, .btn, .btn_b01, .btn_submit, .sch_btn, .cl-cta-primary, .cl-cta-ghost,
nav a, #gnb .gnb_1da, #gnb .gnb_2da, #gnb .cl-nav-link, #gnb_inline .cl-nav-link,
.pg_page, .pg_current,
.cl-tag, .notice_icon, .new_icon, .bo_cate_link,
.cl_feed_badge_notice, .cl_feed_new,
.cl-icon-badge, .cl-mobile-login,
.cl-dash-badge, .cl-dash-status-badge, .cl-dash-side, .cl-dash-signal, .cl-dash-watch-tag{
  line-height:1.2;
}
*, *::before, *::after{ box-sizing:border-box; }
#wrapper, #container_wr, #container{ background:transparent !important; }
/* default.css의 #hd,#wrapper,#ft min-width:1200px 고정폭 해제 (반응형 헤더가 실제로 줄어들도록) */
#hd, #wrapper, #ft{ min-width:0 !important; }
a:link, a:visited, a{ color:inherit; }

/* ---------- 4. 상단(#hd)/GNB 카드형 재도색 ---------- */
/* 무력화 상태(2026-08-16 확인): 아래 토큰 기반 background/border-bottom은 파일 뒤쪽
   "2026-08-14 v4 헤더 풀폭" 무조건부 #hd{ background: linear-gradient(...크림색), border-bottom:
   #F0DFB0 }가 소스순서상 더 뒤에 있어 실제로는 이 값이 이깁니다. 삭제하지 않고 남겨둠 -
   다음 색상 토큰화 단계에서 무조건부 #hd를 var(--cl-bg-elev)/var(--cl-border) 기반으로
   되돌릴 때 복원 근거로 사용. */
#hd{ background:var(--cl-bg-elev) !important; border-bottom:1px solid var(--cl-border) !important; box-shadow:none !important; }
#hd #tnb{ background:transparent !important; border:none !important; }
#hd #tnb .inner{ border-bottom:1px solid var(--cl-border) !important; }
#hd #tnb a, #hd #tnb strong{ color:var(--cl-muted) !important; }
#hd #hd_wrapper{ background:transparent !important; }
#logo a{ font-family:var(--cl-serif); font-weight:900; color:var(--cl-gold) !important; }
.hd_sch_wr, #hd_sch{ background:transparent !important; }
#hd_sch input[type="text"]{
  background:var(--cl-input-bg) !important; border:1px solid var(--cl-border) !important;
  color:var(--cl-text) !important; border-radius:999px !important;
}
#hd_sch button{ color:var(--cl-text) !important; }
.hd_login a{ color:var(--cl-text) !important; }
.hd_login a:hover{ color:var(--cl-gold) !important; }

/* 모바일 헤더 오프너(#gnb_open/#user_btn) 아이콘이 라이트모드에서 안 보이는 문제 (2026-08-07):
   .hd_opener 버튼에 color 규칙이 없어서 아이콘(.fa)이 body color:var(--cl-text) 상속이 아니라
   head.sub.php의 <meta name="color-scheme" content="dark light">를 따라 OS 다크설정 기준
   네이티브 폼컨트롤 색(흰색 계열)으로 렌더링됨 - 사이트 자체 data-theme 토글과 무관하게
   OS가 다크면 흰 아이콘이 강제돼, 사이트를 라이트로 켜도 흰 배경에 흰 아이콘으로 안 보임.
   명시적으로 지정해서 OS 색상설정에서 분리. */
.hd_opener{ color:var(--cl-text) !important; }

/* 헤더 메뉴(#gnb)는 자기 줄을 전부 쓰지만(2026-08-07 저녁 navtorow2), 그래도 좁은 화면에서
   6개 메뉴가 한 줄에 다 안 들어갈 수 있음 - 이전엔 overflow-x:auto + scrollbar-width:none으로
   "스크롤은 되는데 스크롤바가 안 보여서 옆에 메뉴가 더 있다는 걸 알 수 없는" 함정이 있었음
   (2026-08-07 저녁 기록). 진짜 반응형 리팩터링(2026-08-08)에서 스크롤 자체를 없애고
   flex-wrap으로 다음 줄에 자연스럽게 떨어지도록 전환 - 어떤 폭에서도 메뉴가 안 보이게
   숨겨지는 경우가 없어짐. */
#hd nav#gnb{ flex-wrap:wrap; row-gap:6px; }
#hd nav#gnb a{ white-space:nowrap; }
#hd .hd_login{ flex-shrink:0; }
@media (max-width:1024px){
  #hd nav#gnb{ gap:16px !important; }
}

#gnb{ background:var(--cl-bg-elev) !important; }
#gnb .gnb_1da{ color:var(--cl-text) !important; }
#gnb .gnb_1da:hover, #gnb .gnb_1dli:hover > .gnb_1da{ color:var(--cl-gold) !important; }
#gnb_all{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; }
#gnb .gnb_2dul{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; box-shadow:var(--cl-shadow-card) !important; }
#gnb .gnb_2da{ color:var(--cl-muted) !important; }
#gnb .gnb_2da:hover{ color:var(--cl-gold) !important; }

/* 실제 헤더 메뉴 링크(head.php)에 적용되는 클래스. 기존 .gnb_1da 셀렉터는
   head.php 마크업에 해당 class가 없어 매치되지 않는 죽은 규칙이었음 - 대신 이걸 사용 */
#gnb .cl-nav-link{
  color: var(--cl-text) !important;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 4px;
  transition: color .15s;
}
#gnb .cl-nav-link:hover{
  color: var(--cl-gold) !important;
}

/* 다크/라이트 토글 버튼 - 시각적 아이콘 박스는 기존 34px 그대로 두되(모바일 헤더의 right:52px/96px
   고정 간격이 촘촘해서 박스 자체를 키우면 로그인 아이콘과 붙어버림), 터치 히트영역만 보이지 않는
   ::before로 44x44까지 넓힌다(WCAG 타겟 크기 권장치, 2026-08-08). */
.cl-theme-toggle{
  position:relative;
  width:34px; height:34px; border-radius:9px; border:1px solid var(--cl-border);
  background:var(--cl-card); color:var(--cl-text); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; line-height:1;
}
.cl-theme-toggle::before{ content:''; position:absolute; inset:-5px; }
.cl-theme-toggle:hover{ border-color:var(--cl-gold); }

/* ---------- 5. 공통 카드 컴포넌트 ---------- */
.cl-card{
  background:var(--cl-card); border:1px solid var(--cl-border); border-radius:var(--cl-radius);
  box-shadow:var(--cl-shadow-card); transition:box-shadow .18s, transform .18s, border-color .18s;
}
.cl-card.cl-hoverable:hover{ box-shadow:var(--cl-shadow-card-hover); transform:translateY(-2px); border-color:var(--cl-muted-2); }
.cl-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.cl-header-shell{ padding:18px 24px 20px; position:relative; }
/* 2026-08-21: overflow:hidden 제거 - nav 드롭다운(.cl-nav-dropdown, 5359행)이
   absolute로 이 박스 하단을 넘어가야 하는데 overflow:hidden이 그걸 통째로 클리핑해서
   "클릭해도 안 펼쳐지는" 원인이었음(JS/CSS 자체는 정상, 부모의 클리핑 문제).
   장식용 ::before 그라데이션은 자체 clip-path로 박스 안에 가둬서 overflow:hidden
   없이도 밖으로 새지 않게 함. (이 ::before는 1550행에서 display:none !important로
   이미 꺼져 있는 죽은 규칙이지만, 나중에 그 override가 풀려도 안전하도록 방어적으로 clip) */
.cl-header-shell::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(232,176,75,.08), transparent 60%); pointer-events:none; clip-path:inset(0 round 0); }
.cl-header-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; position:relative; z-index:1; }
.cl-site-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cl-site-logo{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#b7791f,#f6ad55); display:grid; place-items:center; justify-content:center; font-family:var(--cl-serif); font-weight:900; color:#fff; font-size:16px; box-shadow:0 4px 16px rgba(183,121,31,.3); flex:0 0 auto; }
.cl-site-brand-text{ font-family:var(--cl-serif); font-weight:700; font-size:17px; line-height:1.1; color:var(--cl-text); }
.cl-site-brand-sub{ display:block; font-size:11px; color:var(--cl-muted-2); font-weight:400; margin-top:2px; }
.cl-header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.cl-search-pill{ border:none; margin:0; padding:0; }
.cl-search-pill form{ display:flex; align-items:center; gap:8px; min-width:clamp(120px, 20vw, 220px); }
.cl-search-pill input{ flex:1; min-width:0; padding:8px 14px; border-radius:999px; border:1px solid var(--cl-border); background:var(--cl-input-bg); color:var(--cl-text); }
.cl-search-pill button{ border:none; background:var(--cl-gold-fill); color:var(--cl-on-gold); border-radius:999px; width:34px; height:34px; }
.cl-header-login{ display:flex; align-items:center; gap:12px; list-style:none; font-size:13px; margin:0; padding:0; }
.cl-header-login .cl-cta-primary{ padding:8px 14px; font-size:13px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; }
.cl-header-nav{ display:flex; align-items:center; gap:14px; font-size:14.5px; padding-top:10px; position:relative; z-index:1; flex-wrap:wrap; }
.cl-footer{ background:var(--cl-bg-elev); border-top:1px solid var(--cl-border); padding:44px 0 28px; margin-top:60px; }
.cl-footer-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:18px; }
.cl-footer-card{ background:var(--cl-card); border:1px solid var(--cl-border); border-radius:var(--cl-radius); padding:18px; box-shadow:var(--cl-shadow-card); }
.cl-footer-title{ font-size:13px; color:var(--cl-muted-2); font-weight:700; margin-bottom:12px; }
.cl-footer-copy{ color:var(--cl-muted-2); font-size:12.5px; line-height:1.7; }
.cl-footer-link{ display:block; font-size:13.5px; color:var(--cl-muted); margin-bottom:9px; }
.cl-footer-link:hover{ color:var(--cl-gold); }
.cl-footer-bottom{ text-align:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--cl-border); font-size:12px; color:var(--cl-muted-2); }

/* #container 안(사이드바를 뺀 폭)에서 쓰는 섹션 래퍼. .cl-wrap과 달리 max-width/중앙정렬이 없다 -
   이미 #container 자체가 사이드바만큼 줄어든 폭이라 여기서 또 1180px로 재계산하면 부모 폭을
   무시하게 됨(메인페이지 레이아웃 재작성, 2026-08-10). index.php의 히어로/섹션 래퍼 전용 -
   헤더/푸터의 .cl-wrap과는 다른 목적이라 클래스를 분리했다. */
.cl-section{ width:100%; padding:0 24px; box-sizing:border-box; }

/* ---------- 6. 게시판 목록 (#bo_list) 카드형 오버라이드 ---------- */
/* 뷰 페이지(#bo_v, 7번 섹션)의 박스 셀렉터만 바꿔 재사용 - border/border-radius/padding 값 동일,
   background는 transparent 유지(테이블 행 hover/공지 배경, 안쪽 .bo_sch 카드와 이중 박스 방지) (2026-08-07(6)) */
#bo_list{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important; box-shadow:var(--cl-shadow-card) !important; padding:28px !important; }
#bo_list #bo_btn_top{ background:transparent !important; border:none !important; color:var(--cl-muted-2) !important; }
#bo_list .btn_bo_user .btn, #bo_list .btn_b01{
  background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; color:var(--cl-text) !important;
}
#bo_list .tbl_head01.tbl_wrap{
  background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important;
  box-shadow:var(--cl-shadow-card) !important; overflow:hidden !important; padding:4px 8px !important;
}
#bo_list table{ background:transparent !important; border-collapse:collapse !important; }
#bo_list thead th{
  background:transparent !important; color:var(--cl-muted-2) !important; font-weight:600 !important;
  font-size:12px !important; border-bottom:1px solid var(--cl-border) !important; text-align:left !important;
}
#bo_list tbody td{ border-bottom:1px solid var(--cl-border) !important; color:var(--cl-text) !important; vertical-align:middle !important; }
#bo_list tbody tr:hover td{ background:var(--cl-card-hover) !important; }
#bo_list tbody tr.bo_notice td{ background:var(--cl-notice-bg) !important; }
#bo_list tbody tr:last-child td{ border-bottom:none !important; }
#bo_list .notice_icon{
  display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px;
  background:var(--cl-gold-dim); color:var(--cl-gold);
}
#bo_list .new_icon{
  display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; margin-left:4px;
  background:var(--cl-gain-tint); color:var(--cl-gain);
}
#bo_list .bo_tit a{ color:var(--cl-text) !important; font-size:13.8px; }
#bo_list .cnt_cmt{ color:var(--cl-gain) !important; font-weight:700; font-size:11.5px; margin-left:6px; }
#bo_list .td_name, #bo_list .td_num, #bo_list .td_datetime{ color:var(--cl-muted-2) !important; font-family:var(--cl-mono); font-size:12px !important; text-align:center !important; }
#bo_list .bo_current{ color:var(--cl-gold) !important; }
#bo_list .empty_table, #bo_list .cl-empty{ color:var(--cl-muted-2) !important; padding:36px 0 !important; text-align:center !important; }

#bo_list .bo_sch_wrap{ background:transparent !important; }
#bo_list .bo_sch{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important; box-shadow:var(--cl-shadow-card) !important; }
#bo_list .bo_sch select, #bo_list .bo_sch input[type="text"]{
  background:var(--cl-input-bg) !important; border:1px solid var(--cl-border) !important; color:var(--cl-text) !important; border-radius:9px !important;
}
#bo_list .sch_btn{ background:var(--cl-gold-fill) !important; color:var(--cl-on-gold) !important; border-radius:9px !important; }

/* 페이지네이션 - 32px는 WCAG 44px 권장 타겟보다 작았음. 서로 붙어있는 숫자 버튼들이라
   투명 히트영역 확장(다른 곳처럼 ::before 오버랩)은 옆 페이지 버튼과 겹쳐 오탭을 유발할 수 있어
   대신 보이는 박스 자체를 키우고 사이 여백을 살짝 줬다(2026-08-08). */
.pg_wrap{ text-align:center !important; }
.pg_wrap .pg_page, .pg_wrap .pg_current{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:38px; height:38px; margin:0 2px; border-radius:8px !important; color:var(--cl-muted) !important; border:none !important;
}
.pg_wrap .pg_current{ background:var(--cl-gold-fill) !important; color:var(--cl-on-gold) !important; font-weight:700 !important; }

/* ---------- 7. 게시글 상세 (#bo_v) 카드형 오버라이드 ---------- */
#bo_v{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important; box-shadow:var(--cl-shadow-card) !important; padding:28px !important; }
#bo_v_title{ font-family:var(--cl-serif) !important; color:var(--cl-text) !important; }
#bo_v_info{ border-bottom:1px solid var(--cl-border) !important; padding-bottom:16px !important; margin-bottom:16px !important; }
#bo_v_info .profile_info_ct strong, #bo_v_info .profile_info_ct{ color:var(--cl-muted-2) !important; }
#bo_v_top .btn_b01, #bo_v_top .btn{ background:var(--cl-bg-elev) !important; border:1px solid var(--cl-border) !important; color:var(--cl-text) !important; }
#bo_v_top .btn_b01:hover, #bo_v_top .btn:hover{ border-color:var(--cl-gold) !important; color:var(--cl-gold) !important; }
/* 상단 액션 버튼(목록/답변/글쓰기/옵션) 사이 흰 여백 버그 - 그누보드 기본 스킨 style.css
   (desktop skin/board/{basic,autotrade_fal}, 모바일 사본에는 없는 데스크톱 전용 하드코딩)가
   .btn_bo_user ul/li에 background:#fff를 깔아둬서, 위 버튼 자체는 이미 --cl-*로 다크대응
   됐어도 감싸는 ul과 버튼 사이 margin-left:5px 간격에는 그 흰 배경이 다크모드에서도 그대로
   비쳐 보임(2026-08-15, 4단계 조사). */
#bo_v_top .btn_bo_user, #bo_v_top .btn_bo_user > li{ background:transparent !important; }
#bo_v_con{ color:var(--cl-text) !important; line-height:1.85 !important; font-size:16px !important; }
#bo_v .view-content, #bo_v .view_file{ color:var(--cl-text) !important; }
#bo_v .bo_v_nb{ border-top:1px solid var(--cl-border) !important; padding-top:12px !important; }
#bo_v .bo_v_nb a{ color:var(--cl-text) !important; }

/* techlog 글 본문에 저자가 붙여넣는 .tn-wrap 템플릿(팔레트 원본 이식) 대응.
   글 자체에 <style>:root{--tn-paper:#fbfaf8;...} @media(prefers-color-scheme:dark){...}</style>가
   인라인으로 박혀있는데, 이 다크 전환이 사이트 자체 데이터-테마 토글이 아니라 OS/브라우저의
   prefers-color-scheme에 물려있어서, 사이트를 다크로 켜도 OS가 라이트면 흰 박스로 갇혀 나옴.
   --tn-* 토큰 체계를 손대는 대신(글마다 값이 바뀌어온 전례가 있어 유지보수 부담), 배경/폭만
   사이트 다크셸에 맞춰 강제 오버라이드 (2026-08-09) */
.tn-wrap{ background: transparent !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; color: var(--cl-text) !important; }
.tn-wrap *{ color: inherit !important; }
#bo_v_act{ border-top:1px solid var(--cl-border) !important; }
.bo_v_nb{ border-top:1px solid var(--cl-border) !important; }
.bo_v_nb a{ color:var(--cl-text) !important; }
.bo_v_nb .nb_date{ color:var(--cl-muted-2) !important; }

/* techlog 게시글 하단 "관련 글" 블록(같은 카테고리 최신 3개). --cl-* 전역 토큰만 사용,
   다크/라이트 별도 분기 불필요(토큰 자체가 이미 [data-theme="dark"]에서 오버라이드됨). */
.cl-related{ margin-top:18px; padding:16px 18px; background:var(--cl-bg-elev); border:1px solid var(--cl-border); border-radius:var(--cl-radius); }
.cl-related-title{ margin:0 0 10px; font-size:14px; font-weight:700; color:var(--cl-text); }
.cl-related-list{ list-style:none; margin:0; padding:0; }
.cl-related-list li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--cl-border); }
.cl-related-list li:first-child{ border-top:none; }
.cl-related-list a{ color:var(--cl-text); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-related-list a:hover{ color:var(--cl-gold); }
.cl-related-date{ flex-shrink:0; font-size:12px; color:var(--cl-muted-2); }

/* techlog 게시글 상단 시리즈 이전/다음글 nav 복제본(하단 원본과 클래스 공유) - 헤더 바로
   아래라 border-top을 border-bottom으로 뒤집음. */
.bo_v_nb.cl-nb-top{ border-top:none !important; border-bottom:1px solid var(--cl-border) !important; padding-top:0 !important; padding-bottom:12px !important; margin:14px 0 0 !important; }

/* techlog 본문 자동 목차(TOC). 900px 미만: 본문 상단 접이식(JS 토글, hidden 속성).
   900px 이상: 카드 안쪽 우측에 sticky 고정. #aside(사이트 사이드바)는 2026-08-14부터
   bottom anchor(섹션 8 최신 규칙)라 top 충돌 없음 - 그래도 안전하게 헤더 실높이 측정용
   --cl-header-h를 그대로 재사용해서 헤더와 절대 안 겹치게 함. */
.cl-toc-layout{ display:block; }
.cl-toc{ margin:14px 0 20px; padding:14px 16px; background:var(--cl-bg-elev); border:1px solid var(--cl-border); border-radius:var(--cl-radius); }
.cl-toc-toggle{ display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:none; padding:0; font-size:14px; font-weight:700; color:var(--cl-text); cursor:pointer; }
.cl-toc-toggle .cl-toc-caret{ margin-left:auto; transition:transform .15s; }
.cl-toc-toggle[aria-expanded="true"] .cl-toc-caret{ transform:rotate(180deg); }
.cl-toc-list{ list-style:none; margin:10px 0 0; padding:0; }
.cl-toc-list a{ display:block; padding:5px 0; color:var(--cl-text); text-decoration:none; font-size:13.5px; }
.cl-toc-list a:hover{ color:var(--cl-gold); }
.cl-toc-list .cl-toc-h3 a{ padding-left:14px; color:var(--cl-muted-2); font-size:12.5px; }

@media (min-width:900px){
    .cl-toc-layout{ display:flex; align-items:flex-start; gap:24px; }
    .cl-toc-layout #bo_v_con{ flex:1 1 auto !important; min-width:0 !important; }
    .cl-toc-toggle{ display:none; }
    .cl-toc-list{ display:block !important; margin-top:0; }
    .cl-toc{
        order:2; flex:0 0 220px; width:220px; margin:0;
        position:sticky;
        top: calc(var(--cl-header-h, 110px) + 16px);
        max-height: calc(100vh - var(--cl-header-h, 110px) - 32px);
        overflow-y:auto;
    }
}

/* 댓글 토글 버튼(.cmt_btn)이 #bo_vc 바깥(형제)에 있어서 스타일 없이 브라우저 기본 버튼(흰 배경/검정 글자)
   그대로 노출되던 문제 - 실제 브라우저 검증(2026-08-10)으로 발견, 카드 톤에 맞춰 오버라이드 */
.cmt_btn{
  background:transparent !important; border:none !important; width:100% !important;
  text-align:left !important; padding:0 0 14px !important; cursor:pointer;
  color:var(--cl-text) !important; font-size:15px !important;
}
.cmt_btn .total, .cmt_btn .total b{ color:var(--cl-text) !important; }
.cmt_btn .cmt_more{ color:var(--cl-muted-2) !important; }

/* 댓글 영역을 카드로 감싸는 느낌 */
#bo_vc{ background:var(--cl-bg-elev) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important; padding:20px !important; margin-top:18px !important; }
#bo_vc article{ border-top:1px solid var(--cl-border) !important; }
#bo_vc article:first-of-type{ border-top:none !important; }
#bo_vc header h2, #bo_vc .cm_wrap header{ color:var(--cl-text) !important; }
.cmt_contents p{ color:var(--cl-text) !important; }
.bo_vc_hdinfo{ color:var(--cl-muted-2) !important; }
#bo_vc_w{ background:var(--cl-bg-elev) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important; }
#bo_vc_w textarea, #bo_vc_w input[type="text"], #bo_vc_w input[type="password"]{
  background:var(--cl-input-bg) !important; border:1px solid var(--cl-border) !important; color:var(--cl-text) !important;
}
.btn_submit{ background:var(--cl-gold-fill) !important; color:var(--cl-on-gold) !important; }

/* ---------- 8. 사이드바 sticky (PC 전용) ----------
   top 값은 헤더 실높이를 매 리사이즈마다 JS로 측정해 :root의 --cl-header-h로 주입한다
   (head.php, .cl-header-shell 높이 측정 스크립트 참고). 헤더가 반응형으로 줄바꿈되며
   높이가 바뀌어도(1024px/860px 분기 등) 항상 정확히 붙도록 하기 위함 - 과거 88px/100px/110px로
   여러 번 하드코딩 값을 바꿔가며 튜닝했던 흔적(코드 히스토리)이 있었고, 2026-08-14에 헤더 자체가
   position:sticky로 바뀌면서 고정폭 하드코딩 값이 더 이상 신뢰할 수 없어져 JS 측정으로 전환.
   fallback 110px은 그 이전까지 가장 최근에 쓰이던 값. */

#aside .cl-card{ margin-bottom:18px; padding:18px; }

/* 설문(poll) 코어 스킨이 라이트 전제로 밝은 회색 배경(#f7f7f7)/검정 글자(#000)를 하드코딩해서
   .cl-card(다크 배경) 안에서 밝은 박스로 떠 보이는 문제 - outlogin/visit과 같은 패턴.
   실제 등록된 설문이 없어 화면으로 재현은 못 했으나 코드상 확실해 선제적으로 오버라이드 (2026-08-10) */
#poll{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; }
#poll header{ border-bottom:1px solid var(--cl-border) !important; }
#poll header h2{ color:var(--cl-text) !important; }
#poll header .btn_result{ background:var(--cl-bg-elev) !important; border-color:var(--cl-border) !important; color:var(--cl-text) !important; }
#poll .poll_con p{ color:var(--cl-text) !important; }
#poll .chk_box label{ color:var(--cl-text) !important; }
#poll .chk_box input[type="radio"] + label span{ background:var(--cl-bg-elev) !important; border-color:var(--cl-border) !important; }

/* 일반 폼 체크박스(.chk_box) - 글쓰기/댓글 동의 체크박스(write.skin.php, view_comment.skin.php).
   기본 스킨(skin/board/{basic,autotrade_fal}/style.css)이 라벨 텍스트 #676e70(다크 카드 위 3.51:1, WCAG AA 미달)와
   체크박스 자체 background:#fff를 하드코딩해서 다크모드에서 저대비 텍스트+흰 사각 체크박스로
   보이던 문제 - 바로 위 #poll 체크박스와 동일한 방식으로 오버라이드 (2026-08-13, 반응형/다크모드
   감사 후속). 원본 스킨 규칙에 !important가 없어 이 규칙이 특이도와 무관하게 이김 - .write_div/
   .bo_vc_w로 더 구체적으로 감싼 변형(스킨 44행)까지 별도 셀렉터 없이 함께 덮임.
   라벨 텍스트: --cl-muted(5.90:1)도 AA는 통과하지만 동의 여부를 읽어야 하는 필수 텍스트라
   #poll과 동일하게 --cl-text(15.38:1) 선택. 체크박스 배경: 요청 범위(--cl-card/--cl-bg) 중
   --cl-card 선택(#poll은 --cl-bg-elev를 썼지만 오늘 대상은 카드 표면 톤이 더 맞다고 판단). */
.chk_box input[type="checkbox"] + label{ color:var(--cl-text) !important; }
.chk_box input[type="checkbox"] + label span{ background:var(--cl-card) !important; }
/* 체크됨 상태 라벨(:checked + label) - color:#000 하드코딩이 다크 카드 위 1.15:1로 사실상
   안 보이던 문제(미체크 상태 3.51:1보다 더 심각). 2026-08-13 앞선 수정에서 발견해 범위 밖으로
   남겼던 항목을 같은 방식으로 마저 수정 - 바로 위 미체크 라벨과 동일하게 --cl-text 재사용. */
.chk_box input[type="checkbox"]:checked + label{ color:var(--cl-text) !important; }

/* 게시판 목록 만료 표시(.txt_expired) - skin/board/{basic,autotrade_fal}/style.css가
   color:#ccc를 하드코딩해서, 다크 카드 위에서는 11.34:1로 문제없지만 라이트 카드(#FFFFFF)
   위에서는 1.61:1로 사실상 안 보이는 라이트 모드 한정 버그(2026-08-13, 감사 후속).
   다크 쪽은 이미 좋은 상태라 건드리지 않도록 html[data-theme="light"]로만 스코프 - 다른
   오버라이드처럼 토큰을 무스코프로 쓰면 다크값(#ccc, 11.34:1)까지 --cl-muted(5.90:1)로
   바뀌어 불필요하게 달라지므로 이번만 예외적으로 스코프 적용. --cl-muted 라이트값이
   4.83:1로 AA를 통과해 그대로 재사용(신규 토큰 없음). */
html[data-theme="light"] #bo_list .txt_expired{ color:var(--cl-muted) !important; }

/* 공유 팝업(#bo_v_share) 카드 배경 다크모드 대응 */
#bo_v_share{ background:var(--cl-card) !important; border-color:var(--cl-border) !important; }

/* ---------- 9. 메인페이지 전용 (theme/netcity_forum/index.php 마크업과 짝) ---------- */
.cl-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--cl-gold); font-weight:600;
  background:var(--cl-gold-dim); border:1px solid rgba(232,176,75,.35); padding:5px 12px; border-radius:999px; margin-bottom:18px;
}
.cl-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--cl-gold); }
.cl-cta-primary{ background:var(--cl-gold-fill); color:var(--cl-on-gold); font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:10px; }
.cl-cta-ghost{ border:1px solid var(--cl-border); color:var(--cl-text); font-weight:600; font-size:14.5px; padding:12px 20px; border-radius:10px; }
.cl-cta-ghost:hover{ border-color:var(--cl-gold); }

.cl-ticker{ padding:26px 24px; }
.cl-ticker-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cl-ticker-head .cl-label{ font-size:12.5px; color:var(--cl-muted-2); font-weight:600; letter-spacing:.03em; }
.cl-ticker-head .cl-live{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--cl-gain); font-weight:700; }
.cl-live .cl-pulse{ width:6px; height:6px; border-radius:50%; background:var(--cl-gain); animation:cl-pulse 1.8s infinite; }
@keyframes cl-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,77,94,.45);} 70%{box-shadow:0 0 0 7px rgba(255,77,94,0);} 100%{box-shadow:0 0 0 0 rgba(255,77,94,0);} }
/* 히어로 우측 티커 숫자(예: +12.34%) - 44px 고정폰트라 900px 이하(2열 압착 구간)~
   768px 이하(모바일 폭)에서 좁아진 컬럼을 넘칠 위험이 있었음. 이 파일의 히어로 배너
   섹션(345행 부근)이 이미 clamp() 유동 타이포 관례를 쓰고 있어 동일 기법으로 통일 -
   뷰포트 폭 기준이라 컨테이너가 사이드바 유무에 따라 들쭉날쭉해도 매끄럽게 축소됨
   (2026-08-13, 반응형 감사 후속). 데스크톱(~1024px 이상)에서는 기존 44px과 동일. */
.cl-ticker-value{ font-family:var(--cl-mono); font-weight:700; font-size:clamp(26px, 4.5vw - 3px, 44px); letter-spacing:-.01em; }
.cl-ticker-value.cl-up{ color:var(--cl-gain); } .cl-ticker-value.cl-down{ color:var(--cl-loss); }
.cl-ticker-value span{ font-size:22px; margin-left:4px; }
/* 손실 구간일 때 히어로 배너(축하 톤) 바로 아래 숫자만 덩그러니 뜨는 문제 - 같은 화면 안에서
   맥락(수수료/실패 원인은 진단 로그에 있음)을 바로 붙여준다. 이익 구간에선 굳이 필요 없어 손실일
   때만 렌더링(PHP 조건문). 2026-08-08. */
.cl-ticker-caveat{ font-size:12.5px; color:var(--cl-muted); line-height:1.5; margin-top:8px; }
.cl-ticker-caveat a{ color:var(--cl-gold); text-decoration:underline; }
.cl-spark{ width:100%; height:52px; margin:14px 0 18px; display:block; }
.cl-ticker-stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--cl-border); padding-top:16px; gap:8px; }
.cl-ticker-stats > *{ min-width:0; }
.cl-ticker-stats .cl-num{ font-family:var(--cl-mono); font-weight:700; font-size:17px; }
.cl-ticker-stats .cl-num.cl-loss-c{ color:var(--cl-loss); } .cl-ticker-stats .cl-num.cl-gain-c{ color:var(--cl-gain); }
.cl-ticker-stats .cl-cap{ font-size:11.5px; color:var(--cl-muted-2); margin-top:3px; }

.cl-section-pad{ padding:52px 0; }
.cl-row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cl-row3.cl-mt{ margin-top:20px; }
.cl-row2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.cl-row2.cl-mt{ margin-top:20px; }
/* CSS Grid의 1fr 트랙은 자식의 자동 최소폭(min-width:auto, 곧 content min-content)을 먼저 확보한
   뒤 남는 공간을 나눈다. 카드 안 게시글 제목(.cl-li-title)이 길면 그 min-content가 커져서 3개
   카드 폭이 325/386/394px처럼 서로 달라지고 행 전체가 컨테이너 밖으로 밀려남 - .cl-wrap/.cl-section
   래퍼 문제가 아니라 그리드 자식의 min-width 기본값 문제였음(실측으로 확인, 2026-08-10). */
.cl-row3 > .cl-card{ min-width:0; }
/* Q&A 카드 숨김 시 하단 게시판 행이 .cl-row3→.cl-row2 로 전환됨(CL_SHOW_QA_WIDGET, 2026-08-30).
   .cl-row3와 동일한 자식 min-width:0 오버플로 가드 + gap 통일(아래 551행 !important 대응).
   900px 이하 1열 붕괴는 이미 908행 @media 에 .cl-row2 규칙이 있음. */
.cl-row2 > .cl-card{ min-width:0; }
.cl-row2{ column-gap:16px; row-gap:16px; }
@media(max-width:640px){ .cl-row2{ column-gap:12px; row-gap:12px; } }
.cl-card-list{ padding:22px; }
.cl-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cl-card-title{ display:flex; align-items:center; gap:10px; font-family:var(--cl-serif); font-weight:700; font-size:16px; color:var(--cl-text); }
/* 모바일 홈이 게시판 카드 5개를 우선순위 구분 없이 나란히 쌓아 스캔하기 어렵다는 지적(2026-08-08) -
   사이트 핵심 콘텐츠(자동매매 일지)만 골드 액센트 보더 + 살짝 큰 제목으로 승격한다. */
.cl-card-featured{ border-left:3px solid var(--cl-gold-fill); }
.cl-card-featured .cl-card-title{ font-size:17.5px; }
.cl-icon-badge{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.cl-icon-badge.cl-gold{ background:var(--cl-gold-dim); color:var(--cl-gold); }
.cl-icon-badge.cl-gain{ background:var(--cl-gain-tint); color:var(--cl-gain); }
.cl-icon-badge.cl-loss{ background:var(--cl-loss-tint); color:var(--cl-loss); }
.cl-more-link{ font-size:12px; color:var(--cl-muted-2); font-weight:600; }
.cl-more-link:hover{ color:var(--cl-gold); }
.cl-list-item{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid var(--cl-border); font-size:13.8px; }
.cl-list-item:last-child{ border-bottom:none; }
.cl-li-title{ color:var(--cl-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.cl-li-title .cl-new{ color:var(--cl-gain); font-size:10px; font-weight:700; margin-right:6px; vertical-align:middle; }
.cl-li-meta{ color:var(--cl-muted-2); font-size:11.5px; flex-shrink:0; font-family:var(--cl-mono); }
.cl-empty-card{ color:var(--cl-muted-2); font-size:13px; padding:24px 0; text-align:center; }

.cl-visit-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--cl-border); border:1px solid var(--cl-border); border-radius:10px;
  overflow:hidden; margin-top:4px;
}
.cl-visit-item{ background:var(--cl-card); padding:12px 14px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.cl-visit-item span{ font-size:11px; color:var(--cl-muted-2); font-weight:600; letter-spacing:.02em; }
.cl-visit-item b{ font-family:var(--cl-mono); font-weight:700; font-size:17px; color:var(--cl-gold); }

.cl-compare-wrap{ background:var(--cl-bg-elev); border:1px solid var(--cl-border); border-radius:20px; padding:48px 44px; margin-top:8px; }
.cl-compare-eyebrow{ font-size:12.5px; color:var(--cl-muted-2); font-weight:600; text-align:center; display:flex; justify-content:center; gap:8px; align-items:center; margin-bottom:14px; }
.cl-compare-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--cl-gold); }
.cl-compare-wrap h2{ font-family:var(--cl-serif); font-weight:900; font-size:28px; text-align:center; line-height:1.3; color:var(--cl-text); }
.cl-compare-wrap > p{ text-align:center; color:var(--cl-muted); font-size:14px; margin-top:12px; line-height:1.7; }
.cl-compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; }
.cl-compare-grid > *{ min-width:0; }
.cl-compare-card{ border-radius:16px; padding:28px; border:1px solid var(--cl-border); }
.cl-compare-card.cl-a{ background:linear-gradient(160deg, var(--cl-gain-tint), transparent); border-color:rgba(255,77,94,.3); }
.cl-compare-card.cl-b{ background:linear-gradient(160deg, var(--cl-loss-tint), transparent); border-color:rgba(76,125,255,.3); }
.cl-tag{ display:inline-block; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:14px; }
.cl-tag.cl-a{ background:var(--cl-gain-tint); color:var(--cl-gain); }
.cl-tag.cl-b{ background:var(--cl-loss-tint); color:var(--cl-loss); }
.cl-compare-card h3{ font-family:var(--cl-serif); font-weight:700; font-size:19px; margin-bottom:10px; color:var(--cl-text); }
.cl-compare-card p.cl-desc{ font-size:13.5px; color:var(--cl-muted); line-height:1.65; margin-bottom:18px; }
.cl-check-list{ display:flex; flex-direction:column; gap:9px; font-size:13.5px; color:var(--cl-text); }
.cl-check-list div{ display:flex; gap:8px; align-items:baseline; }
.cl-compare-cta{ display:flex; gap:10px; margin-top:20px; }
.cl-compare-cta a{ font-size:13px; font-weight:700; padding:9px 15px; border-radius:9px; }
.cl-compare-cta .cl-solid.cl-a{ background:var(--cl-gain-fill); color:var(--cl-on-gain); }
.cl-compare-cta .cl-solid.cl-b{ background:var(--cl-loss-fill); color:var(--cl-on-loss); }
.cl-compare-cta .cl-outline{ border:1px solid var(--cl-border); color:var(--cl-text); }

/* ================= 2026-08-16: index.php 인라인 <style>(407~583행) 이관 =================
   캐스케이드 역전 방지: <body> 인라인이 <head> coinlab.css를 항상 이기던 구조였으므로,
   기존 coinlab.css 규칙(위 .cl-compare-* 등)과 겹치는 속성은 여기(더 뒤)에 재선언해
   같은 최종값이 유지되도록 함. 단 .cl-compare-card/.cl-a/.cl-b의 background/border(-color)는
   예외 - 인라인 하드코딩(#fff, #fff5f5, #f2f6ff 등)이 다크모드 흰 카드 버그의 원인이라
   이번 이관에서 의도적으로 버리고 위 원본(615~617행, 토큰/그라데이션 기반)을 그대로 살림. */
/* Final card spacing/alignment pass */
.cl-section-pad{padding-top:28px!important;padding-bottom:28px!important;}
.cl-row3{column-gap:16px!important;row-gap:16px!important;}
.cl-row3.cl-mt{margin-top:16px!important;}
.cl-card-list{min-height:190px;box-sizing:border-box;}
.cl-card-list .cl-card-head{min-height:32px;align-items:center;}
.cl-card-list .cl-list-item{min-height:30px;box-sizing:border-box;display:flex;align-items:center;}
.cl-quick-links{gap:16px!important;margin-bottom:16px!important;}
.cl-today-trade-wrap{margin-bottom:28px!important;}
.cl-today-trade-head{margin-bottom:12px!important;}
.cl-today-trade-card{min-height:88px;box-sizing:border-box;}
.cl-research-bridge{margin-top:16px!important;margin-bottom:20px!important;}
.cl-operator-card{margin-top:16px!important;margin-bottom:20px!important;}
.cl-compare-wrap{margin-top:16px!important;}
.cl-compare-grid{gap:16px!important;align-items:stretch!important;}
.cl-compare-card{min-height:235px;box-sizing:border-box;display:flex;flex-direction:column;}
.cl-compare-card .cl-check-list{flex:1;}
.cl-compare-cta{margin-top:auto;}
@media(max-width:900px){
  .cl-row3{row-gap:16px!important;}
  .cl-card-list{min-height:0;}
  .cl-compare-card{min-height:0;}
}
@media(max-width:640px){
  .cl-section-pad{padding-top:24px!important;padding-bottom:24px!important;}
  .cl-quick-links{gap:12px!important;margin-bottom:12px!important;}
  .cl-today-trade-wrap{margin-bottom:24px!important;}
  .cl-row3{column-gap:12px!important;row-gap:12px!important;}
  .cl-row3.cl-mt{margin-top:12px!important;}
}

/* CoinLab 2026 homepage UX / engagement upgrade */
.cl-quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 8px;}
.cl-ticker-stats-4{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.cl-ticker-stats-4 .cl-num{font-size:18px;}
.cl-quick-live{border-color:var(--cl-border)!important;box-shadow:0 0 0 1px var(--cl-loss-tint);}
.cl-quick-live i{font-style:normal;font-size:9px;letter-spacing:.08em;color:var(--cl-loss);margin-right:5px;}
.cl-trade-why{min-width:180px;padding-left:18px;border-left:1px solid var(--cl-border);}
.cl-trade-why span{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--cl-loss);margin-bottom:4px;}
.cl-trade-why strong{display:block;font-size:12px;line-height:1.5;color:var(--cl-muted);font-weight:600;}
.cl-community-note{display:grid;gap:8px;}
.cl-community-note div{padding:9px 11px;border-radius:10px;background:var(--cl-bg-elev);}
.cl-community-note strong{display:block;font-size:12px;color:var(--cl-text);}
.cl-community-note span{display:block;margin-top:2px;font-size:10px;color:var(--cl-muted);line-height:1.45;}
.cl-community-note a{display:block;margin-top:2px;color:var(--cl-loss);font-size:12px;font-weight:700;text-decoration:none;}
.cl-community-visit-mini{margin-top:10px;padding-top:9px;border-top:1px solid var(--cl-border);color:var(--cl-muted-2);font-size:10px;}
.cl-quick-links a{display:grid;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;align-items:center;gap:0 12px;padding:18px 18px;border:1px solid var(--cl-border);border-radius:15px;background:var(--cl-card);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.cl-quick-links a:hover{transform:translateY(-2px);border-color:var(--cl-muted-2);box-shadow:0 10px 28px var(--cl-shadow-card-hover);}
.cl-quick-links span{grid-row:1 / span 2;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--cl-muted-2);}
.cl-quick-links strong{font-size:15px;color:var(--cl-text);}
.cl-quick-links small{font-size:12px;color:var(--cl-muted);margin-top:3px;}
.cl-quick-links b{grid-column:3;grid-row:1 / span 2;color:var(--cl-loss);font-size:17px;}
.cl-quick-live-kind{display:inline-flex;align-items:center;gap:5px;}
.cl-quick-live-dot{width:6px;height:6px;border-radius:50%;background:var(--cl-gain);animation:cl-pulse 1.8s infinite;flex-shrink:0;}
.cl-today-kicker .cl-pulse{width:6px;height:6px;border-radius:50%;background:var(--cl-loss);animation:cl-pulse 1.8s infinite;display:inline-block;}

.cl-today-trade-wrap{margin:4px 0 34px;}
.cl-today-trade-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:13px;}
.cl-today-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--cl-loss);}
.cl-today-trade-head h2{margin:7px 0 4px;font-size:27px;line-height:1.25;color:var(--cl-text);}
.cl-today-trade-head p{margin:0;color:var(--cl-muted);font-size:14px;}
.cl-today-more{white-space:nowrap;}
.cl-today-trade-card{display:flex;align-items:center;gap:20px;padding:20px 22px;border:1px solid var(--cl-border);border-radius:17px;background:var(--cl-card);}
.cl-trade-main{display:flex;align-items:center;gap:12px;min-width:210px;}
.cl-trade-main strong{display:block;font-size:18px;color:var(--cl-text);}
.cl-trade-main small{display:block;margin-top:3px;color:var(--cl-muted);font-size:12px;word-break:break-all;}
.cl-trade-side{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:26px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:800;}
.cl-trade-side.sell{background:var(--cl-gain-tint);color:var(--cl-gain);}
.cl-trade-side.buy{background:var(--cl-loss-tint);color:var(--cl-loss);}
.cl-trade-metrics{display:flex;gap:30px;margin-left:auto;}
.cl-trade-metrics div{min-width:90px;}
.cl-trade-metrics span{display:block;font-size:11px;color:var(--cl-muted);margin-bottom:4px;}
.cl-trade-metrics b{font-size:15px;color:var(--cl-text);}
.cl-trade-analysis{padding:11px 14px;border:1px solid var(--cl-border);border-radius:10px;color:var(--cl-text);text-decoration:none;font-size:12px;font-weight:700;background:var(--cl-card);}
.cl-trade-analysis:hover{border-color:var(--cl-muted-2);}
.cl-trade-empty{display:flex;flex-direction:column;gap:6px;}
.cl-trade-empty strong{font-size:16px;color:var(--cl-text);}
.cl-trade-empty span{font-size:13px;color:var(--cl-muted);}
.cl-trade-empty a{width:max-content;margin-top:5px;color:var(--cl-loss);font-size:13px;font-weight:700;text-decoration:none;}

/* 히어로 배너와 동일 성격의 "테마 무관 고정 다크 카드" 예외(2026-08-16) - var(--cl-fixed-dark-*)는
   :root에 단일값으로 정의됨(라이트/다크 재정의 없음). 값 변경 없이 리터럴만 토큰으로 이동. */
.cl-research-bridge{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 27px;margin:0 0 20px;border:1px solid var(--cl-fixed-dark-border);border-radius:18px;background:var(--cl-fixed-dark-bg);color:var(--cl-fixed-dark-text);}
.cl-research-bridge>div:first-child{max-width:760px;}
.cl-research-bridge h2{margin:6px 0 7px;font-size:22px;}
.cl-research-bridge p{margin:0;color:var(--cl-fixed-dark-body);font-size:13px;line-height:1.65;}
.cl-research-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.cl-research-links a{padding:10px 12px;border:1px solid var(--cl-fixed-dark-overlay-border);border-radius:9px;color:var(--cl-fixed-dark-text);text-decoration:none;font-size:12px;font-weight:700;background:var(--cl-fixed-dark-overlay);}
.cl-research-links a:hover{background:var(--cl-fixed-dark-overlay-hover);}

.cl-operator-card{margin:0 0 20px;padding:28px;border:1px solid var(--cl-border);border-radius:18px;background:var(--cl-card);}
.cl-operator-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;margin-top:8px;}
.cl-operator-grid h2{margin:0 0 8px;font-size:23px;color:var(--cl-text);}
.cl-operator-grid p{margin:0;color:var(--cl-muted);font-size:14px;line-height:1.75;}
.cl-operator-points{display:grid;gap:10px;}
.cl-operator-points div{padding:12px 14px;border-radius:12px;background:var(--cl-bg-elev);}
.cl-operator-points b{display:block;font-size:13px;color:var(--cl-text);}
.cl-operator-points span{display:block;margin-top:3px;font-size:12px;color:var(--cl-muted);}
.cl-operator-foot{display:flex;gap:8px;margin-top:18px;padding-top:17px;border-top:1px solid var(--cl-border);}
.cl-operator-foot a{font-size:12px;font-weight:700;color:var(--cl-text);text-decoration:none;}
.cl-operator-foot a:hover{color:var(--cl-loss);}

@media(max-width:900px){
  .cl-ticker-stats-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cl-trade-why{width:100%;padding:10px 0 0;border-left:0;border-top:1px solid var(--cl-border);}

  .cl-quick-links{grid-template-columns:1fr;}
  .cl-today-trade-card{flex-wrap:wrap;}
  .cl-trade-metrics{margin-left:0;}
  .cl-research-bridge{flex-direction:column;align-items:flex-start;}
  .cl-research-links{justify-content:flex-start;}
  .cl-operator-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .cl-today-trade-head{align-items:flex-start;flex-direction:column;}
  .cl-today-trade-head h2{font-size:23px;}
  .cl-today-trade-card{padding:17px;}
  .cl-trade-main{min-width:0;width:100%;}
  .cl-trade-metrics{width:100%;gap:18px;}
  .cl-trade-analysis{width:100%;text-align:center;}
  .cl-operator-card{padding:20px;}
  .cl-operator-grid h2{font-size:21px;}
}

/* Existing strategy comparison styles */
.cl-compare-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important;}
.cl-compare-card{padding:22px;border-radius:16px;}
@media(max-width:768px){.cl-compare-grid{grid-template-columns:1fr!important;}
}

html[data-theme="dark"]{
  /* 1. ABOUT COINLAB - .cl-operator-* */
  .cl-operator-card{ background:var(--cl-card); }
  .cl-operator-grid h2{ color:var(--cl-text); }
  .cl-operator-grid p{ color:var(--cl-muted); }
  .cl-operator-points div{ background:var(--cl-bg-elev); }
  .cl-operator-points b{ color:var(--cl-text); }
  .cl-operator-points span{ color:var(--cl-muted); }
  .cl-operator-foot a{ color:var(--cl-text); }

  /* 2. 요약 카드 3개 - .cl-quick-links / .cl-quick-live */
  .cl-quick-links a{ background:var(--cl-card); }
  .cl-quick-links span{ color:var(--cl-muted-2); }
  .cl-quick-links strong{ color:var(--cl-text); }
  .cl-quick-links small{ color:var(--cl-muted); }
  .cl-quick-links b{ color:var(--cl-gold); }
  .cl-quick-live{ background:var(--cl-card); }

  /* 3. 오늘의 거래 카드 - .cl-today-trade-* / .cl-trade-* */
  .cl-today-trade-card{ background:var(--cl-card); }
  .cl-trade-metrics span{ color:var(--cl-muted); }
  .cl-trade-metrics b{ color:var(--cl-text); }
  .cl-trade-why{ border-left-color:var(--cl-border); }
  .cl-trade-why strong{ color:var(--cl-muted); }
  .cl-trade-analysis{ background:var(--cl-card); color:var(--cl-text); }
  .cl-trade-empty strong{ color:var(--cl-text); }
  .cl-trade-empty span{ color:var(--cl-muted); }

  /* 4. 사이트 이용 안내 - .cl-community-note 내부 미니박스 */
  .cl-community-note div{ background:var(--cl-bg-elev); }
  .cl-community-note strong{ color:var(--cl-text); }
  .cl-community-note span{ color:var(--cl-muted); }
  .cl-community-visit-mini{ color:var(--cl-muted-2); border-top-color:var(--cl-border); }

  /* 5. 전략 비교 카드 2개 - 2026-08-16 이관 시 제거: 이 nested selector가
     html[data-theme="dark"] .cl-compare-card(.cl-a/.cl-b)로 컴파일되어 특이도(0,3,1)가
     coinlab.css 원본(615~617행, 0,2,0)보다 항상 높아, 원본을 다시 덮어쓰고 있었음
     (var(--cl-loss-fill) 등으로 색상 재매핑 - cl-a 카드가 파란색이 되는 등 색상 코딩
     불일치 문제도 있었음). 이번 이관에서 인라인 하드코딩(#fff5f5 등) 대신 원본을 그대로
     살리기로 했으므로 이 규칙은 필요 없어져 제거함. */
}

.cl-section-title-row{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:12px; }
.cl-section-title-row h2{ font-family:var(--cl-serif); font-weight:700; font-size:19px; color:var(--cl-text); margin:0; }
.cl-section-title-row .cl-sub{ font-size:12.5px; color:var(--cl-muted-2); }
.cl-section-desc{ margin:4px 0 0; color:var(--cl-muted); font-size:13px; }
.cl-card-list{ padding:22px; position:relative; }
.cl-card-list:hover{ transform:translateY(-2px); border-color:var(--cl-gold); }

/* 차트 박스 (techlog 상세에서만 조건부 노출) */
.cl-chart-box{ background:var(--cl-bg-elev); border:1px solid var(--cl-border); border-radius:12px; padding:20px; margin:18px 0; }
.cl-chart-box .cl-lbl{ font-size:12px; color:var(--cl-muted-2); margin-bottom:10px; font-weight:600; }

/* 반응 이모지 줄 - 기능 보류, UI만 */
.cl-reaction-row{ display:flex; gap:20px; padding:18px 0; margin-top:18px; border-top:1px solid var(--cl-border); justify-content:center; }
.cl-reaction{ text-align:center; font-size:12px; color:var(--cl-muted-2); pointer-events:none; }
.cl-reaction .cl-emoji{ font-size:20px; display:block; margin-bottom:4px; }

/* ---------- 10. 모바일 (#container, class 없음) ---------- */
@media (max-width: 860px){
  #aside{ position:static !important; }
  /* .cl-row3/.cl-compare-grid는 2026-08-13 반응형 감사 후속으로
     900px 블록(#aside 스택 조건과 동일 임계값)으로 이전 - 아래쪽
     "@media (max-width: 900px){ #container_wr{...} #aside{...} }" 참고
     (.cl-hero-grid는 2026-08-16 히어로 v2 리디자인으로 이 문단째 삭제됨) */
  .cl-wrap{ padding:0 16px; }
  .cl-section{ padding:0 16px; }
  .cl-header-top{ flex-direction:column; align-items:flex-start; }
  .cl-header-actions{ width:100%; flex-wrap:wrap; }
  .cl-search-pill form{ min-width:0; width:100%; }
  .cl-header-login{ width:100%; justify-content:flex-end; }
  .cl-footer-grid{ grid-template-columns:1fr; }
  /* 좁은 태블릿에서 좌우 48px/44px 고정 패딩이 그대로 폭을 깎아먹던 문제 - 반응형 규칙
     자체가 없었음(2026-08-13, 감사 후속). 이 블록의 다른 패딩 축소 규칙과 같은 패턴. */
  .cl-compare-wrap{ padding:24px 20px; }

  /* 모바일 헤더: 로고(중앙정렬 텍스트) vs #gnb_open/#user_btn(절대배치) 겹침 수정 (2026-08-07) */
  #hd #hd_wrapper{ position:relative; }
  #hd #logo{ margin:0 136px 0 54px; overflow:hidden; padding:10px 0; }
  #hd #logo a{ display:inline-flex !important; }
  #hd .cl-theme-toggle{ position:absolute; top:10px; right:52px; z-index:5; }
  #hd #user_btn{ z-index:5; }

  /* 상단 로그인 아이콘/아바타 (2026-08-07 신규) */
  #hd .cl-mobile-login{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:9px; z-index:5;
    background:var(--cl-card); border:1px solid var(--cl-border); color:var(--cl-text);
    font-size:13px; font-weight:700; text-decoration:none;
  }
  /* 테마토글과 같은 이유로 시각 박스는 34px 유지, 히트영역만 44x44로 확장 (2026-08-08) */
  #hd .cl-mobile-login::before{ content:''; position:absolute; inset:-5px; }
  #hd .cl-mobile-login:hover{ border-color:var(--cl-gold); color:var(--cl-gold); }

  /* 모바일 햄버거 메뉴 드롭다운: 지난 라운드엔 #gnb 자체만 오버라이드했는데, 실제 흰 배경의 정체는
     #gnb 내부의 #gnb_1dul(메뉴 목록 ul)/.gnb_2dul(하위메뉴)가 mobile.css에서 각각 자체 흰 배경(#fff/#fafafa)을
     따로 갖고 있었기 때문 -> #gnb 자체를 덮어서 화면에 보이는 배경이 바뀌지 않았던 것. 전부 오버라이드 (2026-08-07) */
  #hd #gnb, #hd #gnb_1dul, #hd .gnb_2dul{ background:var(--cl-card) !important; }
  #hd #gnb .gnb_1da, #hd #gnb .gnb_2da{ color:var(--cl-text) !important; border-bottom-color:var(--cl-border) !important; }
  #hd #gnb .gnb_1da:hover, #hd #gnb .gnb_2da:hover{ color:var(--cl-gold) !important; }
  #hd #gnb #gnb_empty{ color:var(--cl-muted-2) !important; }
  #hd #gnb #gnb_empty a{ color:var(--cl-gold) !important; }

  /* 모바일 햄버거 드로어(#gnb.hd_div) 안 유틸리티 리스트 #hd_nb: 2026-08-15까지 그누보드5
     기본 FAQ/1:1문의/접속자/새글 4항목이었던 자리를 데스크톱 #cl-sidebar와 동일한
     .cl-sidebar-item 마크업(7개 nav 링크)으로 교체. 배경/보더는 mobile.css:77에서 이미
     --cl-bg-elev/--cl-border로 토큰화(#gnb 자체와 같은 톤, 이음새 없이 자연스럽게 이어짐).
     여기서는 내부 여백만 보정 - .cl-sidebar-item 자체 스타일(색/hover/active)은
     cl-sidebar.css가 전역 클래스로 이미 공급하므로 중복 선언 없음. */
  #hd_nb{ padding:8px 6px; }

}

/* 모바일 페이지 상단 "뒤로가기 + 게시판명" 타이틀 바(#container_title)가 core css/mobile.css에
   흰 배경(#fff)/짙은 회색 글자(#333)를 하드코딩해서 다크모드에서도 항상 흰 막대로 떠 있던 문제 -
   실제 브라우저 검증(2026-08-10)으로 발견 */
#container_title{ background:var(--cl-bg-elev) !important; color:var(--cl-text) !important; border-bottom:1px solid var(--cl-border) !important; }
#container_title a{ color:var(--cl-text) !important; }
.btn_top .btn_cancel, .btn_top .btn_b01{ background:var(--cl-card) !important; color:var(--cl-text) !important; border-color:var(--cl-border) !important; }

/* 분류(카테고리) 탭 흰 배경: 실제 렌더링(curl) 확인 결과 클래스가 아니라 ID 기반 마크업
   (<nav id="bo_cate"><ul id="bo_cate_ul"><li><a id="bo_cate_on">)이었고, 진짜 원인은
   mobile/skin/board/basic/style.css의 "#bo_cate ul {background:#fff}" 하드코딩이었음
   (default.css/mobile.css엔 없음 - 게시판 스킨 자체의 style.css). autotrade_fal의 모바일
   style.css는 흰 배경은 없지만 라이트블루 팔레트(#d6e9ff/#6794d3)라 다크 배경에서 대비가
   약해 같이 덮어씀 (2026-08-08). 뷰포트 폭이 아니라 "모바일 스킨을 쓰는가"가 조건이라
   @media(max-width:860px) 게이트를 걷어냄 - 좁은 브라우저 창이 아니라 모바일 UA(?device=mobile)로
   접속했을 때 이 마크업이 나타나므로, 폭 조건과 무관하게 항상 적용돼야 함 (2026-08-10) */
#bo_cate ul{ background:var(--cl-bg-elev) !important; border-bottom:1px solid var(--cl-border) !important; }
#bo_cate a{ color:var(--cl-muted) !important; border-color:transparent !important; }
#bo_cate a:hover, #bo_cate a:focus, #bo_cate a:active{ background:var(--cl-card-hover) !important; color:var(--cl-gold) !important; }
#bo_cate #bo_cate_on{ background:transparent !important; color:var(--cl-gold) !important; border-color:transparent !important; }
#bo_cate #bo_cate_on:after{ background:var(--cl-gold) !important; }

/* 모바일 게시판 목록 카드형 피드 (cl_feed_*, mobile/skin/board/* /list.skin.php와 짝, 2026-08-08)
   이전 cl_list_*(라운드2에서 table.blist로 대체돼 죽은 코드)를 대체함
   2026-08-16 수정: 별표 와일드카드 바로 뒤에 슬래시가 붙어있던 옛 경로표기가 CSS 주석을
   조기종료시켜 아래 cl_feed_list 규칙이 무효 셀렉터에 먹혀 드롭되고 있었음 - 별표와 슬래시
   사이에 공백을 넣어 해결. 코멘트 재발 방지 원칙은 falette-css-comment-early-close 메모리 참고,
   경위는 작업기록.md 참고 - 이 문단 자체에도 별표+슬래시 인접 금지 규칙을 지켜서 작성함 */
#container .cl_feed_list{ display:flex; flex-direction:column; gap:10px; }
#container .cl_feed_card{
  background: var(--cl-card) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--cl-radius) !important;
  padding: 16px !important;
  margin-bottom: 10px !important;
  display: block !important; text-decoration: none !important; position: relative;
}
#container .cl_feed_card.cl_feed_notice{ background: var(--cl-notice-bg) !important; }
#container .cl_feed_chk{ position:absolute; top:14px; right:14px; }
#container .cl_feed_chk input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--cl-gold); cursor:pointer; }
#container .cl_feed_top{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 700; color: var(--cl-text) !important;
  padding-right: 26px;
}
#container .cl_feed_badge_notice{
  font-size: 10.5px; font-weight:700; color: var(--cl-gold) !important;
  background: var(--cl-gold-dim) !important; padding: 2px 7px; border-radius: 5px; flex-shrink:0;
}
#container .cl_feed_title{ flex: 1 1 auto; min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
#container .cl_feed_cmt_badge{
  font-size: 12px; font-weight: 700; color: var(--cl-gain) !important; flex-shrink:0; white-space:nowrap;
}
#container .cl_feed_new{
  font-size: 10px; font-weight: 700; color: var(--cl-on-badge) !important;
  background: var(--cl-live-fill) !important; padding: 2px 6px; border-radius: 4px; flex-shrink:0; white-space:nowrap;
}
#container .cl_feed_meta{
  display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap;
  font-size: 12.5px;
}
#container .cl_feed_avatar{
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cl-on-badge) !important; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
/* var(--cl-text)는 다크/라이트 각각 이미 대비가 확보된 값으로 자동 전환되므로,
   테마별로 hex를 따로 박아둘 필요가 없음 (2026-08-10 정리) */
#container .cl_feed_author, [class*="author"], .cl-board-view .post-meta b{ color: var(--cl-text) !important; font-weight: 700 !important; }
/* cl_feed_meta/post-meta는 텍스트 없는 컨테이너라 opacity를 걸면 자식(아바타 배지 등)까지 이중으로
   흐려짐 -> 실제 텍스트를 담은 leaf만 대상으로 지정. post-meta-item 중 작성자 항목(<b> 포함)은
   opacity를 걸면 부모→자식으로 곱연산되어 <b>에 준 진한 색이 무력화되므로 :has(b)로 제외 (2026-08-10) */
#container .cl_feed_date, #container .cl_feed_views{ opacity: 0.72; }
.cl-board-view .post-meta-item{ opacity: 0.72; }
.cl-board-view .post-meta-item:has(b){ opacity: 1; }
#container .cl_feed_dot{ color: var(--cl-border) !important; }
#container .cl_feed_empty{ color:var(--cl-muted-2) !important; text-align:center; padding:36px 0 !important; }
#container .cl-empty{ color:var(--cl-muted-2) !important; text-align:center; padding:30px 0 !important; }

/* legacy default.css absolute/fixed override - header cleanup 2026-08 */
.hd_login{ position:static !important; top:auto !important; right:auto !important; }
.hd_login li{ float:none !important; border-left:none !important; padding-left:0 !important; }

#hd_sch #sch_stx{
  float:none !important; width:auto !important; height:auto !important;
  background:var(--cl-input-bg) !important; color:var(--cl-text) !important;
  border-radius:999px 0 0 999px !important; padding:8px 14px !important; font-size:14px !important;
}
#hd_sch #sch_submit{
  float:none !important; width:auto !important; height:auto !important;
  background:var(--cl-card) !important; color:var(--cl-muted-2) !important;
  border-radius:0 999px 999px 0 !important; padding:8px 14px !important;
}
#hd_sch form{ display:flex !important; align-items:center !important; }

/* 검색결과 페이지(search.php) - 코어 검색 스킨이 밝은 회색 박스(#f7f7f7)를 하드코딩해서
   다크 배경과 어울리지 않던 문제. 텍스트 자체는 어차피 진한 색이라 안 보이진 않았지만
   카드 톤에 맞춰 통일 - 실제 브라우저 검증(2026-08-10)으로 발견 */
#sch_res_detail{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius) !important; }
#sch_res_detail select, #sch_res_detail input[type="text"]{
  background:var(--cl-input-bg) !important; border:1px solid var(--cl-border) !important; color:var(--cl-text) !important;
}
.sch_result{ color:var(--cl-text) !important; }
.sch_result strong{ color:var(--cl-gold) !important; }

/* aside 고정폭 해제 + 좁은 화면 스택 (2026-08 header/footer 정리)
   2026-08-13: .cl-row3/.cl-compare-grid의 1열 붕괴 임계값을 기존
   860px에서 여기(#aside 스택 임계값 900px)로 맞춤 - #aside가 옆에 붙어있는 채로
   (고정폭 280px, 944행) 그리드만 다열로 남는 861~900px 압착 구간을 제거하기 위함
   (반응형 감사 결과 반영, 원래 정의는 328/456/497행)
   (.cl-hero-grid 규칙은 2026-08-16 히어로 v2 리디자인으로 삭제됨) */
@media (max-width: 900px){
  #container_wr{ flex-direction:column !important; }
  #aside{ width:100% !important; position:static !important; top:auto !important; }
  /* (2026-09-05) 코어 default.css 의 #container{width:930px;float:left} 가 flex-column 전환 시
     교차축 폭이 되어 좁은 뷰포트에서 본문 박스가 뷰포트 밖으로 넘쳐 잘림(html/body overflow-x:clip).
     #aside 는 위에서 width:100% 로 잡혀 있는데 #container 만 누락돼 있었음 - 대칭 보완. */
  #container{ width:100% !important; float:none !important; }
  .cl-row3{ grid-template-columns:1fr; }
  .cl-row2{ grid-template-columns:1fr; }
  .cl-compare-grid{ grid-template-columns:1fr; }
}

/* (2026-09-05) 좁은 뷰포트 오버플로우 방어 — #container 내부 한정.
   B(축소): svg/canvas/table 은 의도적으로 제외(각각 자체 반응형/JS크기계산/시맨틱 이유).
   전역이 아니라 #container 스코프라 히어로/헤더/사이드바 자산엔 영향 없음. */
#container img, #container video, #container iframe{ max-width:100%; height:auto; }
#container pre, #container code{ max-width:100%; overflow-x:auto; }

/* (2026-09-05) C — 홈 브리핑 위젯: flex 자식이 min-width:auto 라 nowrap 텍스트+canvas 로
   최소폭이 커져 좁은 폭에서 밀어냄. min-width:0 허용 + 480px 이하 세로 스택. */
.cl-briefing-card .left, .cl-briefing-card .right{ min-width:0; }
@media (max-width:480px){
  .cl-briefing-card{ flex-direction:column; }
  #clBriefMain.main{ white-space:normal; }
}

/* 푸터 안 visit()/latest() 기본 위젯 축소 + 색상 통일 */
footer ul, footer li{ list-style:none !important; margin:0 !important; padding:0 !important; }
footer ul li, footer a, footer span{ font-size:12px !important; color:var(--cl-muted-2) !important; }
footer table{ font-size:12px !important; }

/* #visit (접속자집계) 스킨 자체 style.css가 다크 전용 흰색(#fff/#e3e3e3)을 하드코딩해서
   라이트 모드 흰 배경 위에서 글자가 사라지는 문제 -> 토큰으로 강제 오버라이드 */
footer #visit h2{ color:var(--cl-text) !important; font-size:13px !important; font-weight:700 !important; margin-bottom:14px !important; }
footer #visit dt{ color:var(--cl-muted) !important; }
footer #visit dd, footer #visit dd strong{ color:var(--cl-text) !important; font-weight:700 !important; }
footer #visit dt span{ background:var(--cl-gold-fill) !important; }

/* 모바일 접속자집계는 mobile/skin/visit/basic/style.css가 #visit/#visit dl에 흰 배경(#fff)을
   하드코딩해서, 다크모드에서도 항상 흰 박스로 보이는 문제였음 -> 전역(footer 스코프 아님) 오버라이드
   (모바일 tail.php는 <footer> 태그를 안 쓰고 #ft를 씀, PC와 마크업 구조가 달라 footer 접두 규칙이
   안 먹었음. 2026-08-07) */
#visit{ background:var(--cl-card) !important; border:1px solid var(--cl-border) !important; }
#visit dl{ background:transparent !important; }
#visit h2{ color:var(--cl-text) !important; }
#visit dt{ color:var(--cl-muted) !important; }
#visit dd{ color:var(--cl-gold) !important; }
#visit dt:after{ background:var(--cl-gold-fill) !important; }

/* 게시판 목록 PC - 분류뱃지/헤더/글쓴이/날짜/조회 가시성 (2026-08-09~10 반복 패치를 토큰 기준으로 통합 정리)
   - 헤더 라벨(번호/제목/글쓴이/날짜/조회): opacity를 걸었더니 너무 흐려 보인다는 재발 피드백이 있었어서
     풀 밝기(var(--cl-text), opacity 없음) 유지
   - 글쓴이(작성자명): 마찬가지로 톤 다운시켰더니 "안 밝다"는 재발 피드백 -> 풀 밝기 유지
   - 날짜/조회수: 보조 정보라 var(--cl-text) + opacity로 톤 다운 */
/* 1차 시도(display:inline-block/float:none/width:auto/vertical-align:top)는 실측 결과 효과 없었음
   (2026-08-10, 컨테이너 실제 사이트에서 flexGrow:"1", 폭 406.7px/436.2px로 그대로 늘어남 확인).
   진짜 원인은 .cl-board-list .title-cell a{ flex:1 1 auto } 규칙이 이 뱃지(.bo_cate_link도 title-cell
   안의 <a>라 같은 선택자에 매치됨)에도 적용되는 것 - .title-cell이 flex-wrap:wrap이라 제목이 길어
   배지가 자기 혼자 flex-line을 차지하면 flex-grow:1이 그 줄 전체 폭을 배지 혼자 채워버림(같은 줄에
   제목과 나란히 있을 때는 grow할 여유 공간이 거의 없어 육안상 정상으로 보였을 뿐, 근본 원인은 항상
   있었음). display/float/width는 flex item의 flex-grow 알고리즘에 영향을 주지 못해 1차 시도로는
   해결이 안 됐음 - flex-grow/shrink/basis를 직접 0 0 auto로 재정의해야 함 */
.bo_cate_link{
  display:inline-block !important;
  flex:0 0 auto !important;
  background: var(--cl-gold-dim) !important;
  color: var(--cl-gold) !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 2px 8px !important; border-radius: 5px !important;
  margin-right: 6px !important; text-decoration: none !important;
}
.cl-board-list table.blist thead th,
.cl-board-list table.blist thead th a,
#bo_list thead th,
#bo_list thead th a{
  color: var(--cl-text) !important;
}
.cl-board-list table.blist tbody td,
#bo_list tbody td{
  color: var(--cl-text) !important;
}
.cl-board-list table.blist tbody td.date,
.cl-board-list table.blist tbody td.view,
#bo_list .td_name, #bo_list .td_num, #bo_list .td_datetime{
  color: var(--cl-text) !important;
  opacity: 0.72;
}
.cl-board-list .author-cell,
.cl-board-list .author-cell span,
.author-cell{
  color: var(--cl-text) !important;
  font-weight: 600 !important;
}
.cl-board-list table.blist tbody .bo_tit a,
#bo_list .bo_tit a{
  color: var(--cl-text) !important;
}

/* 푸터 높이 축소 (2026-08-09e) */
footer{
  padding: 20px 0 16px !important;
  margin-top: 30px !important;
}
footer .cl-wrap{
  margin-bottom: 6px !important;
}
footer h4{
  margin-bottom: 8px !important;
  font-size: 12px !important;
}
footer a, footer p{
  margin-bottom: 5px !important;
  font-size: 12px !important;
}
footer #visit{
  padding: 10px 16px !important;
  margin-top: 10px !important;
}
footer #visit li, footer #visit dt, footer #visit dd{
  padding: 3px 0 !important;
  margin: 0 !important;
}
footer div[style*="margin-top:36px"], footer div[style*="margin-top: 36px"]{
  margin-top: 14px !important;
  padding-top: 10px !important;
}
#top_btn{
  width: 36px !important; height: 36px !important;
}

/* 푸터 재구성: 접속자집계를 컬럼에 편입, 글자 밝기 상향, 높이 재축소 (2026-08-09f) */
footer{
  padding: 16px 0 12px !important;
  margin-top: 20px !important;
}
footer ul li, footer a, footer span, footer p{
  color: var(--cl-text) !important;
}
footer h4{
  color: var(--cl-text) !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}

/* 접속자집계를 별도 줄이 아니라 grid의 다섯 번째 칸으로 편입 */
footer .cl-wrap[style*="grid-template-columns"]{
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr !important;
  gap: 20px !important;
}
footer .cl-wrap[style*="margin-top:24px"]{
  display: none !important;
}
footer #visit{
  margin: 0 !important;
  padding: 0 !important;
}
footer #visit h2{
  font-size: 12px !important;
  margin-bottom: 8px !important;
}
footer #visit dl{
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
footer #visit dt, footer #visit dd{
  font-size: 12px !important;
  display: inline !important;
}
footer #visit dt{ color: var(--cl-text) !important; }
footer #visit dd{ color: var(--cl-text) !important; font-weight: 700 !important; margin-left: 4px !important; }

/* 접속자집계 grid 편입 후 내부 압축 (2026-08-09g) */
.cl-visit-col{
  border-left: 1px solid var(--cl-border) !important;
  padding-left: 20px !important;
}
.cl-visit-col #visit{
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cl-visit-col #visit h2{
  font-size: 12px !important;
  margin-bottom: 8px !important;
}
.cl-visit-col #visit ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* li 자체엔 색을 주지 않음: 안에 있는 dt(라벨)/dd(값)가 footer #visit dt/dd 규칙으로 각각
   다른 밝기를 갖는데, li에 opacity를 걸면 부모→자식으로 곱연산되어 dd의 진한 색이 무력화됨 */
.cl-visit-col #visit li{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  font-size: 12px !important;
}
.cl-visit-col #visit dl, .cl-visit-col #visit dt, .cl-visit-col #visit dd{
  display: inline !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cl-visit-col #visit dd{
  color: var(--cl-text) !important;
  font-weight: 700 !important;
}

/* 푸터 5칸 제목/내용 정렬 통일 (2026-08-09i) */
footer .cl-wrap[style*="grid-template-columns"] > div{
  display: flex !important;
  flex-direction: column !important;
}
footer .cl-wrap[style*="grid-template-columns"] h4,
.notice.ft_cnt h2,
.cl-visit-col #visit h2{
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cl-text) !important;
  opacity: 0.75;
  margin: 0 0 14px 0 !important;
  line-height: 1.2 !important;
}
.notice.ft_cnt h2 a{
  color: inherit !important;
  text-decoration: none !important;
}
footer .cl-wrap[style*="grid-template-columns"] a,
footer .cl-wrap[style*="grid-template-columns"] p{
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}
.notice.ft_cnt ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.notice.ft_cnt li{
  font-size: 12px !important;
  margin-bottom: 8px !important;
}
.cl-visit-col #visit ul{
  margin: 0 !important;
  padding: 0 !important;
}

/* 공지사항 칸 정렬/간격 수정 (2026-08-09j) - 제목 색상은 위 규칙(opacity:0.75)으로 이미 통일됨 */
footer .cl-wrap[style*="grid-template-columns"]{
  gap: 24px !important;
}

.notice.ft_cnt{
  margin: 0 !important;
  padding: 0 !important;
}
.notice.ft_cnt h2{
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

/* overflow-x:hidden 이 sticky를 무효화하는 문제 해결 (2026-08-09m) */
html{ overflow-x: clip !important; }
body{ overflow-x: clip !important; }
#container_wr{ overflow: visible !important; align-items: flex-start !important; }
/* #aside의 position/top 선언은 314행(섹션 8) 하나로 통일 - 여기 있던 !important 중복 선언(100px 고정값)이
   314행의 non-!important 선언을 항상 이겨서 JS로 주입하는 --cl-header-h 변수가 무의미해지는 충돌이 있었음
   (2026-08-14, 사이드바 sticky top 정리) */

/* .cl-wrap 중첩 시 안쪽이 다시 1180px 중앙정렬 되는 문제 - #container 내부는 상속폭 사용 (2026-08-09p, 2026-08-09o의 중복 선언 정리) */
#container .cl-wrap{
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 24px !important;
}

/* default.css 원본 고정폭(1200px)+float 잔재 완전 제거 - 진짜 원인 (2026-08-09q) */
#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr{
  width: auto !important;
}
#aside{
  float: none !important;
  width: 280px !important;
  height: auto !important;
  margin: 0 !important;
}

/* cl_opt_menu 드롭다운 - ID 셀렉터로 강한 우선순위 확보 (2026-08-07 재작성, 2x2 그리드 붕괴 문제 해결) */
.cl_opt_wrap{ position:relative !important; }
#clOptMenu{
  display:flex !important; flex-direction:column !important;
  position:absolute !important; top:calc(100% + 6px) !important; right:0 !important;
  z-index:999 !important; min-width:120px !important; width:auto !important;
  padding:6px 0 !important; margin:0 !important; list-style:none !important;
  background:var(--cl-card) !important; border:1px solid var(--cl-border) !important;
  border-radius:9px !important; box-shadow:var(--cl-shadow-card) !important;
}
#clOptMenu[hidden]{ display:none !important; }
#clOptMenu li{
  display:block !important; float:none !important; width:auto !important;
  padding:8px 14px !important; margin:0 !important;
  background:transparent !important;
  border-bottom:1px solid var(--cl-border) !important;
}
#clOptMenu li:last-child{ border-bottom:0 !important; }
#clOptMenu li a{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:8px !important; text-decoration:none !important; color:var(--cl-text) !important;
  white-space:nowrap !important;
}
#clOptMenu li:hover a{ color:var(--cl-gold) !important; }


/* 로그인 박스(#ol_before) cl- 토큰화 (2026-08-07h)
   netcity_forum 테마용 outlogin 스킨이 따로 없어서 그누보드 기본 skin/outlogin/basic/style.css가
   그대로 나가고 있었음 - 하드코딩된 색(#dde7e9 테두리, #f7f7f7 배경 등)이 다크/라이트 모드 어느
   쪽에도 안 맞아서 흐리게 보이거나 흰 박스선이 보이는 문제. cl- 토큰으로 전면 재정의. */
#ol_before.ol{
  border: none !important;
}
#ol_be_cate{
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  border-bottom: none !important;
}
#ol_be_cate h2{
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  background: var(--cl-card-hover) !important;
  color: var(--cl-text) !important;
}
#ol_be_cate .join{
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--cl-muted) !important;
  text-decoration: none !important;
}
#ol_be_cate .join:hover{ color: var(--cl-gold) !important; }

#ol_before input[type="text"],
#ol_before input[type="password"]{
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--cl-bg) !important;
  color: var(--cl-text) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  font-size: 14px !important;
}
#ol_before input[type="text"]::placeholder,
#ol_before input[type="password"]::placeholder{
  color: var(--cl-muted-2) !important;
}

#ol_before #ol_submit{
  width: 100% !important;
  background: var(--cl-gold-fill) !important;
  color: var(--cl-on-gold) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.ol_auto_wr{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
}
#ol_before label[for="auto_login"]{
  color: var(--cl-muted) !important;
  font-size: 13px !important;
}
#ol_svc a{
  color: var(--cl-muted) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
#ol_svc a:hover{ color: var(--cl-gold) !important; }


/* 모바일 상단 인라인 메뉴(#gnb_inline) - 로고 아래 항상 노출, 좁아지면 2줄로 자연 wrap (2026-08-07i) */
#gnb_inline{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  padding: 10px 16px 12px !important;
  border-top: 1px solid var(--cl-border) !important;
  background: var(--cl-bg-elev) !important;
}
#gnb_inline .cl-nav-link{
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: var(--cl-card) !important;
  border: 1px solid var(--cl-border) !important;
  color: var(--cl-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#gnb_inline .cl-nav-link:hover,
#gnb_inline .cl-nav-link:active{
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
}

/* ============================================================
   진짜 반응형 리팩터링 (2026-08-08)
   지시서: 360px~2000px+ 전 구간에서 가로 스크롤/겹침/잘림 없이 재배치.
   기존 코드는 "특정 폭"(주로 860/900px 단일 breakpoint)에서만 손봐둔 상태였고,
   그 사이 좁은 데스크탑 창(360~700px대, 모바일 UA 아님 - head.php가 그대로 서빙됨)
   폭에서 헤더 우측 그룹이 겹치거나 잘리는 문제, 푸터 5칸 그리드가 아예 반응형이
   없던 문제, 게시판 목록 표가 좁은 폭에서 대응이 없던 문제를 이 섹션에서 해결.
   ============================================================ */

/* --- 1. 데스크탑 헤더 우측 그룹(검색/다크토글/로그인) 좁은 폭 대응 ---
   actions 그룹(#hd .cl-wrap > div:first-child > div:last-child)은 flex-shrink:0로
   자기 폭을 지키게 되어 있는데, 로고+actions 합산 최소폭이 헤더 행 폭보다 커지는
   지점에서 flex-shrink:0가 오히려 actions를 행 밖으로 밀어내 로그인/검색 버튼이
   잘리는 원인이 됨(overflow-x:clip으로 안 보이게만 가려짐 - 스크롤도 안 생기고 그냥
   사라짐). 이 폭 아래에서는 강제로 다음 줄로 자연스럽게 떨어뜨림(줄바꿈) - 잘려서
   안 보이는 것보다 안전.
   2026-08-15(태블릿 반응형 감사) 700px→860px로 상향: 브랜드(로고+타이틀+서브카피)
   ~234px + gap 20px + actions(검색폼 170px 고정폭 포함) ~422px + 좌우 패딩 40px ≈
   716px 소요 계산상 700px 근처(701~768px, 세로 태블릿 폭 포함)에서 여전히 넘쳤을
   구간 - 이 파일의 다른 태블릿 breakpoint(860/900px)와 값을 통일. */
@media (max-width:860px){
  #hd .cl-wrap > div:first-child{
    flex-wrap:wrap !important;
    row-gap:10px !important;
  }
  #hd .cl-wrap > div:first-child > div:last-child{
    flex-shrink:1 !important;
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    row-gap:8px !important;
    width:100%;
  }
  #hd_sch form{ max-width:none !important; flex:1 1 160px !important; }
}

/* --- 2. 게시판 목록/뷰 컨테이너 인라인 width 방어 ---
   #bo_list/#bo_v의 style="width:<?php echo $width; ?>"는 그누보드 관리자 화면의
   "게시판 표 너비"(bo_table_width) 설정값을 그대로 찍는다 - 100 이하면 %지만 100
   초과면 고정 px(예: 770px)가 그대로 박힌다. 현재 값은 100%로 확인됐지만(작업기록
   검증 명령 참고), 관리자가 이 설정을 나중에 px로 바꾸면 즉시 좁은 화면에서 카드가
   넘치는 문제가 재발할 수 있어 선제적으로 상한을 걸어둠 - 카드 디자인 자체가 이미
   %/flex 기반이라 관리자 px 설정에 의존할 이유가 없음. */
#bo_list, #bo_v{ max-width:100% !important; }

/* --- 3. 푸터 5칸 그리드 반응형 (기존엔 breakpoint 자체가 없었음) ---
   footer .cl-wrap[style*="grid-template-columns"]는 tail.php 인라인 스타일
   "1.2fr 1fr 1fr 1fr 1fr"을 그대로 유지한 채 두 차례(2026-08-09f/09o) !important로
   재선언만 해왔고, 좁은 화면용 열 수 축소가 한번도 없었다 - 900px 이하에서 5칸이
   그대로 눌려 텍스트(특히 이메일 주소/방문자 숫자)가 겹치거나 넘칠 위험이 있음. */
@media (max-width:900px){
  footer .cl-wrap[style*="grid-template-columns"]{
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 24px !important;
  }
  .cl-visit-col{
    grid-column: 1 / -1 !important;
    border-left: none !important;
    border-top: 1px solid var(--cl-border) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
  }
}
@media (max-width:560px){
  footer .cl-wrap[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
  }
}

/* --- 4. #aside 900px 스택 규칙이 실제로는 죽어있던 문제 ---
   #container_wr{flex-direction:column}과 짝을 이루는 "@media(max-width:900px){#aside{width:100%
   !important}}"가 490번째 줄 부근에 있는데, 그보다 한참 뒤(2026-08-09q, default.css 고정폭 제거
   섹션)에 조건 없는 "#aside{width:280px !important}"가 또 있다. 두 규칙 다 동일 특이도(#aside 단일
   ID)+!important라서 소스상 "나중에 나온 규칙"이 이긴다 - 900px 이하에서도 결국 조건 없는 280px가
   이겨버려서, container_wr가 세로로 쌓여도(사이드바가 본문 아래로 내려가도) 그 박스 자체는 여전히
   딱 280px 폭으로 좁게 떠 있고 옆에는 빈 공간만 남는 상태였음 - 겹침/잘림은 아니지만 "진짜 반응형"은
   아니었던 부분. 파일 맨 끝에서 다시 한번 재선언해 소스 순서상 최종 승자로 만듦 (2026-08-08). */
@media (max-width:900px){
  #aside{ width:100% !important; }
}

/* --- 5. 게시글 본문(wr_content) 안 표/코드블록 방어 ---
   techlog/autotrade 글 본문은 저자가 <style>로 직접 반응형 처리를 해서 붙여넣는 자기완결형
   구조(.tn-wrap/.fal-ct, [[falette-wr-content-css-traps]] 참고)라 현재 확인된 글들은 이미 안전하지만,
   앞으로 폭이 넓은 표나 코드블록(<pre>/<code>)이 포함된 글이 올라올 경우를 대비한 안전망.
   html/body가 overflow-x:clip이라(2026-08-09m, sticky 유지 목적) 넘치는 요소는 스크롤 없이 그냥
   잘려서 안 보이게 되므로, 본문 안 표/코드블록만은 자체 가로 스크롤을 갖도록 미리 열어둠
   (현재 존재하는 표들은 전부 폭 100%라 이 규칙이 있어도 없어도 렌더링 결과는 동일 - 순수 안전망). */
#bo_v_con table{ display:block; overflow-x:auto; max-width:100%; }
#bo_v_con pre, #bo_v_con code{ overflow-x:auto; max-width:100%; }
/* 내용관리(content.php) 비로그인 레이아웃 깨짐 방지 강제 적용
   (2026-08-13 복구: 이전 세션에서 이 규칙을 셸 echo 명령으로 파일에 append하려다
   명령 자체가 실행되지 않고 텍스트 그대로 파일 본문에 박혀버렸던 것을 발견 -
   tinycss2로 실제 파싱 검증한 결과 echo/작은따옴표가 CSS bad-string 토큰으로
   해석되어 이 #ctt 규칙과 바로 다음 .cl-content-wrapper 규칙의 선택자가 통째로
   무효화된 상태였음. 규칙 내용 자체(주석 문구/속성)는 원본 그대로 손상 없이
   남아있어 추정이 아니라 셸 래퍼만 제거해 복구함) */
#ctt { width: 100% !important; max-width: 100% !important; background: transparent !important; color: inherit !important; }
/* ==========================================================================
   내용 관리 (Content Page) - coinlab custom style
   ========================================================================== */
/* 2026-08-13: 라이트 전용 하드코딩 색상(#fff/#212529/#333333/#dee2e6/#f8f9fa) ->
   기존 --cl-* 토큰으로 전환(신규 토큰 없이 전부 재사용). 카드 배경/테두리/그림자는
   사이트 공통 .cl-card 패턴과 동일 토큰(--cl-card/--cl-border/--cl-shadow-card)을
   그대로 씀. 제목/본문은 var(--cl-text) 재사용 - #bo_v_con(게시글 본문)과 동일하게
   "풀 밝기 읽기용 텍스트"로 취급(--cl-muted은 보조정보용이라 부적합 판단).
   표 헤더 배경은 --cl-card-hover(카드보다 한 톤 다른 강조면)로 매핑.
   WCAG 계산 확인(coinlab.css 토큰 실값 기준): 본문/제목 텍스트는 다크 15.38:1,
   라이트 16.65:1, 표 헤더 셀은 다크 14.63:1, 라이트 16.11:1 - 전부 AA(4.5:1) 여유
   통과. border-bottom(구분선)만 예외적으로 --cl-text를 재사용 - 원본이 --cl-border류
   옅은 회색이 아니라 근흑색(#212529)으로 강한 대비를 의도했던 값이라, 톤이 가장
   가까운 --cl-text로 맞춤(다크에서도 동일하게 강한 대비 유지). */
.cl-content-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    padding: 30px;
    background-color: var(--cl-card);
    border-radius: 12px;
    box-shadow: var(--cl-shadow-card);
    border: 1px solid var(--cl-border);
}

.cl-content-header {
    border-bottom: 2px solid var(--cl-text);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.cl-content-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--cl-text);
    margin: 0;
    line-height: 1.3;
}

.cl-content-body {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--cl-text);
    word-break: break-all;
}

.cl-content-body p {
    margin-bottom: 1em;
}

.cl-content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.cl-content-body th,
.cl-content-body td {
    border: 1px solid var(--cl-border);
    padding: 10px 12px;
}

.cl-content-body th {
    background-color: var(--cl-card-hover);
    font-weight: 600;
}

/* ================= 2026-08-14 헤더 프리미엄 업그레이드 FIX ================= */
.cl-header-shell{
  background: transparent !important;
  border-bottom: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  z-index: 100;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.cl-header-top{
  max-width:1320px; margin:0 auto; display:flex; justify-content:space-between;
  align-items:center; gap:clamp(10px, 2vw, 20px);
  padding:16px clamp(12px, 3vw, 32px) 14px !important;
  background:transparent !important;
}
.cl-site-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.cl-site-brand-text{font-size:15px;font-weight:800;color:#111827;line-height:1.1;letter-spacing:-0.02em}
.cl-site-brand-sub{display:block;font-size:11px;font-weight:500;color:#a08c6a;margin-top:3px}
.cl-header-actions{display:flex;align-items:center;gap:clamp(8px, 1.5vw, 12px)}
.cl-search-pill{position:relative;background:#ffffff;border:1px solid #e8e0d0;border-radius:999px;padding:2px 4px 2px 14px;display:flex;align-items:center;transition:.25s;box-shadow:0 1px 2px rgba(0,0,0,.04) inset}
.cl-search-pill:focus-within{border-color:#d69e2e;box-shadow:0 0 0 3px rgba(214,158,46,.15)}
.cl-search-pill form{display:flex;align-items:center}
#sch_stx{border:0;background:transparent;outline:none;width:clamp(90px, 14vw, 170px);font-size:13px;color:#111827;padding:6px 0}
#sch_stx::placeholder{color:#b8a88e}
#sch_submit{width:30px;height:30px;border-radius:50%;border:0;background:#f7f3ea;color:#8a7a5a;cursor:pointer;transition:.2s}
#sch_submit:hover{background:#b7791f;color:#fff}
.cl-theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid #e8e0d0;background:#fffdf5;color:#b7791f;font-size:14px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.hd_login{display:flex;align-items:center;gap:clamp(8px, 1.5vw, 14px);list-style:none;margin:0;padding:0}
.hd_login li a{font-size:12px;font-weight:600;color:#8a7a5a;text-decoration:none}
.cl-cta-primary{background:linear-gradient(135deg,#b7791f,#8a5a12)!important;color:#fff!important;padding:7px 18px!important;border-radius:999px!important;font-weight:800!important;box-shadow:0 4px 14px rgba(183,121,31,.3)}
.cl-header-nav{
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 clamp(12px, 3vw, 32px) !important;
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: clamp(12px, 2.5vw, 32px) !important;
  background: rgba(255,255,255,.55) !important;
  border-top: 1px solid rgba(240,223,176,.8) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(0,0,0,.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: blur(12px);
}
.cl-nav-link{ position:relative; height:48px; display:inline-flex; align-items:center; color:#4a3f2a !important; font-weight:700 !important; font-size:14px !important; letter-spacing:-0.02em; transition:.2s; text-decoration:none; padding:6px 0; }
.cl-nav-link:hover{ color:#111827 !important; }

/* === 라이트 모드 - 강제 === */
html[data-theme="light"] .cl-header-shell{background:linear-gradient(180deg,#fffdf7 0%,#ffffff 100%)!important;border-bottom-color:#f0e6d3!important}
html[data-theme="light"] .cl-header-nav{background:#111827!important}

/* === 다크 모드 - 제대로 띄어쓰기 === */
html[data-theme="dark"] .cl-header-shell{background:linear-gradient(180deg, #1e1a12 0%, #121216 100%)!important;border-bottom-color:rgba(255,255,255,.06)!important;backdrop-filter:blur(18px)}
html[data-theme="dark"] .cl-site-brand-text{color:#fff!important}
html[data-theme="dark"] .cl-site-brand-sub{color:rgba(255,255,255,.45)!important}
html[data-theme="dark"] .cl-search-pill{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important}
html[data-theme="dark"] #sch_stx{color:#fff!important}
html[data-theme="dark"] #sch_stx::placeholder{color:rgba(255,255,255,.35)!important}
html[data-theme="dark"] #sch_submit{background:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important}
html[data-theme="dark"] .cl-theme-toggle{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important;color:#f6ad55!important}
html[data-theme="dark"] .hd_login li a{color:rgba(255,255,255,.6)!important}
html[data-theme="dark"] .hd_login li a:hover{color:#fff!important}
html[data-theme="dark"] .cl-cta-primary{background:linear-gradient(135deg,#f6ad55,#d69e2e)!important;color:#000!important}
html[data-theme="dark"] .cl-header-nav{background:rgba(0,0,0,.25)!important;border:1px solid rgba(255,255,255,.06)!important}
html[data-theme="dark"] .cl-nav-link{color:rgba(255,255,255,.7)!important}
html[data-theme="dark"] .cl-nav-link:hover{color:#fff!important}


/* === 2026-08-14 헤더 통합 FIX v3 - 박스-in-박스 제거 === */
.cl-header-shell::before{ display:none !important; }

/* === 2026-08-14 v4 헤더 풀폭 옅은 노랑 그라데이션 + 호버밑줄 === */
#hd{
  background: linear-gradient(90deg, #FFF7CC 0%, #FFF9DE 18%, #FFFEF5 50%, #FFF8DA 82%, #FFF3B5 100%) !important;
  border-bottom: 1px solid #F0DFB0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  overflow: visible !important;
  height: auto !important;
}

.cl-nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, #D69E2E, #B7791F);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.cl-nav-link:hover::after{ transform: scaleX(1); }

/* 다크모드 동일 구조 */
html[data-theme="dark"] #hd{ background: linear-gradient(90deg, #221e12 0%, #18151a 50%, #1a1c12 100%) !important; border-bottom-color: rgba(255,255,255,.08) !important; }

/* === 다크/화이트 토글 스위치 === */
.cl-theme-switch{ position:relative; display:inline-flex; align-items:center; cursor:pointer; user-select:none; }
.cl-theme-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cl-switch-track{
  width:54px; height:30px; border-radius:999px;
  background: linear-gradient(180deg, #fff 0%, #FFF7D6 100%);
  border: 1px solid #E8D6B0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 6px; position:relative; transition:.28s;
}
.cl-switch-icon{ font-size:12px; line-height:1; opacity:.9; transition:.2s; }
.cl-switch-icon.sun{ margin-left:1px; }
.cl-switch-icon.moon{ margin-right:1px; opacity:.45; }
.cl-switch-thumb{
  position:absolute; left:2px; top:2px; width:24px; height:24px; border-radius:50%;
  background: #ffffff !important;
  border: 1px solid #E8D6B0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,1) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), background .28s;
}
.cl-theme-switch input:checked + .cl-switch-track{ background: linear-gradient(180deg, #1a1a22, #0f0f14); border-color: rgba(255,255,255,.14); }
.cl-theme-switch input:checked + .cl-switch-track .cl-switch-icon.sun{ opacity:.35; }
.cl-theme-switch input:checked + .cl-switch-track .cl-switch-icon.moon{ opacity:1; }
.cl-theme-switch input:checked + .cl-switch-track .cl-switch-thumb{
  transform: translateX(24px);
  background: linear-gradient(180deg, #2a2a32, #111117) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* 다크모드에서 헤더와 자연스럽게 */
html[data-theme="dark"] .cl-switch-track{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }


/* 본문+사이드바 래퍼는 헤더 높이만큼 패딩 필요없음 - 헤더가 같이 올라가므로 */
body{
  padding-top:0 !important;
}
#container_wr.cl-wrap{
  display:flex !important;
  align-items:flex-start !important;
  gap:26px !important;
}
/* 사이드바는 헤더 높이를 top으로 사용, 푸터 만나면 부모(#container_wr) 끝에서 멈춤 */

/* === 2026-08-14 FIX FINAL: 본문/사이드 같이 올라가다 푸터에서 고정 === */
#aside{
  position:sticky !important;
  bottom:24px !important; /* 푸터 상단 24px 위에 붙음 */
  top:auto !important;
  align-self:flex-end !important; /* 부모 끝(푸터 직전)에서 멈추도록 */
  z-index:1 !important;
}

/* === 2026-09-05 태블릿 폭(<=900px) #aside 겹침 수정 ===
   위 무조건부 #aside{position:sticky} 는 900px 이하에서도 그대로 적용된다.
   이를 되돌리려던 745행 @media(max-width:860px){#aside{position:static}} 와
   911~912행 @media(max-width:900px){#aside{position:static;top:auto}} 는
   둘 다 소스 순서상 위 블록(1632행)보다 앞이라 !important·동일특이도 경합에서 져
   죽어 있었다 = 사각지대. 그래서 #container_wr가 flex-direction:column 으로 세로 스택돼도
   #aside 는 여전히 position:sticky(+bottom:24px, z-index:1, align-self:flex-end)라
   위젯 카드 묶음이 본문 위로 떠서 겹쳐 덮었다.
   이 블록을 그 뒤에 둬서 소스 순서상 최종 승자로 만든다. 특정 px 땜질이 아니라
   "900px 이하에서 sticky 를 끈다"는 규칙 자체를 정상 위치에 두는 것.
   900px = 이 파일 전역에서 #container_wr 스택·footer-grid·TOC 접힘에 쓰는 관례 임계값.
   다크모드는 #aside 에 position 관련 별도 선언이 없어 영향 없음(색상 토큰만 사용). */
@media (max-width:900px){
  #aside{
    position:static !important;
    align-self:auto !important;
    top:auto !important;
    bottom:auto !important;
    z-index:auto !important;
  }
}

/* ============================================================
   히어로 v2 리디자인 (2026-08-16) — PC/모바일 공용
   구 .cl-hero / .cl-hero-banner* / .cl-hero-grid 규칙(440~565행 부근 + 713~715/777/865~867/
   1020행 산발분)은 2026-08-16 정리 작업에서 전량 삭제됨 - 재확인 결과 어디서도 안 쓰였음.
   (2026-08-16 추가 수정: 바로 위 "banner*"와 "/.cl-hero-grid" 사이에 공백이 없어 CSS 주석이
   조기종료돼 아래 .cl-hero-v2 규칙 전체가 무효 셀렉터에 먹혀 드롭되던 실사고 있었음 - 별표와
   슬래시 사이 공백으로 해결. 라이트모드 배경 실종/그래프 페이지 전체 유출 버그의 원인이었음)
   ============================================================ */
.cl-hero-v2{position:relative;overflow:hidden;border-radius:18px;padding:clamp(28px,5vw,64px) clamp(20px,4vw,56px);background:linear-gradient(155deg,#0d0f14 0%,#15181f 55%,#1b1710 100%);border:1px solid rgba(212,175,55,.22);isolation:isolate}
.cl-hero-v2__grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(212,175,55,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.055) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(120% 90% at 20% 0%,#000 35%,transparent 78%)}
.cl-hero-v2__glow{position:absolute;z-index:0;width:60%;aspect-ratio:1;right:-12%;top:-32%;background:radial-gradient(circle,rgba(212,175,55,.22),transparent 68%);filter:blur(12px)}
.cl-hero-v2__chart{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;z-index:0;opacity:.5}
.cl-hero-v2__area{fill:url(#clHeroFill)}
.clhf-a{stop-color:rgba(212,175,55,.30)}
.clhf-b{stop-color:rgba(212,175,55,0)}
.cl-hero-v2__line{fill:none;stroke:rgba(212,175,55,.75);stroke-width:2;vector-effect:non-scaling-stroke}
.cl-hero-v2__inner{position:relative;z-index:1;max-width:720px}
.cl-hero-v2__badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#e8c766;background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.35)}
.cl-hero-v2__dot{width:7px;height:7px;border-radius:50%;background:#e8c766;box-shadow:0 0 0 0 rgba(232,199,102,.7);animation:clHeroPulse 2s infinite}
@keyframes clHeroPulse{70%{box-shadow:0 0 0 9px rgba(232,199,102,0)}100%{box-shadow:0 0 0 0 rgba(232,199,102,0)}}
.cl-hero-v2__title{margin:0 0 16px;font-size:clamp(30px,5.2vw,52px);line-height:1.18;font-weight:800;color:#fff;letter-spacing:-.02em}
.cl-hero-v2__title em{font-style:normal;background:linear-gradient(92deg,#f0d27a,#d4af37 55%,#b8912a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-hero-v2__lede{margin:0 0 26px;font-size:clamp(14.5px,1.6vw,17px);line-height:1.72;color:rgba(255,255,255,.74);max-width:600px}
.cl-hero-v2__lede b{color:#e8c766;font-weight:600}
.cl-hero-v2__stats{display:flex;align-items:baseline;flex-wrap:wrap;gap:14px 32px;margin:0 0 28px;padding:18px 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.cl-hero-v2__stat-primary{display:flex;flex-direction:column;gap:5px;min-width:0}
.cl-hero-v2__num{font-size:clamp(24px,3.6vw,34px);font-weight:800;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-hero-v2__lab{font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.5)}
.cl-hero-v2__stat-inline{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:rgba(255,255,255,.56)}
.cl-hero-v2__stat-inline b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums;margin-right:3px}
.cl-hero-v2__dotsep{color:rgba(255,255,255,.28)}
.cl-hero-v2__cta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:20px}
.cl-hero-v2__btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:11px;font-size:15px;font-weight:700;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
/* 2026-08-16 라이트모드 버그 수정: 전역 "a:link, a:visited, a{ color:inherit; }"(127행)가
   element+pseudo-class 특이도(0,0,1,1)라 단일 클래스(0,0,1,0)인 .cl-hero-v2__btn--*보다 이겨서
   버튼 글자색이 조상 요소(테마별 --cl-text) 색으로 상속돼버렸다. 라이트모드에선 어두운 텍스트가
   히어로의 항상-다크 배경 위에 얹혀 사실상 안 보였고, 다크모드는 상속색이 우연히 밝아 눈에 안 띄었을
   뿐 똑같이 깨져있었다(프라이머리 버튼도 동일 원인으로 다크모드에서 대비 저하 - 선제 수정).
   !important 없이 조상 셀렉터(.cl-hero-v2 ...)를 붙여 특이도를 (0,0,2,0)으로 올려 이기게 한다. */
.cl-hero-v2 .cl-hero-v2__btn--primary{background:linear-gradient(94deg,#e0bb47,#c99f2e);color:#14110a;box-shadow:0 8px 24px rgba(212,175,55,.26)}
.cl-hero-v2__btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(212,175,55,.36)}
.cl-hero-v2 .cl-hero-v2__btn--ghost{background:rgba(255,255,255,.05);color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.16)}
.cl-hero-v2__btn--ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.cl-hero-v2__disc{margin:0;font-size:12px;line-height:1.6;color:rgba(255,255,255,.42)}
@media (max-width:640px){
  .cl-hero-v2{border-radius:14px;padding:26px 18px}
  .cl-hero-v2__stats{flex-direction:column;align-items:flex-start;gap:14px}
  .cl-hero-v2__btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.cl-hero-v2__dot{animation:none}.cl-hero-v2__btn:hover{transform:none}}


/* 스크랩 버튼 줄바꿈으로 이미지 영역과 겹치는 문제 수정 */
#bo_v_share .btn { width: auto !important; min-width: 90px; white-space: nowrap !important; padding: 0 14px !important; }

/* ===== tn-wrap 디자인 시스템 전역화 (2026-08-17, 기존엔 글 본문마다 <style>로 내장하던 구조를 coinlab.css로 통합) ===== */
.tn-wrap{
  --tn-paper:#fbfaf8; --tn-ink:#1d2126; --tn-muted:#6a7480; --tn-line:#e3e1db;
  --tn-teal:#0d7a72; --tn-teal-soft:#e8f3f1; --tn-up:#c8382f; --tn-down:#2a63b8; --tn-warn:#a8650f;
}
html[data-theme="dark"] .tn-wrap{
  --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;
}
.tn-wrap *{box-sizing:border-box}
.tn-wrap{background:transparent!important;color:var(--tn-ink);
  font-family:Pretendard,-apple-system,system-ui,sans-serif;
  font-size:17px;line-height:1.8;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  max-width:100%!important;width:100%!important;margin:0 auto;padding:0!important}
.tn-wrap *{color:inherit!important}
.tn-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tn-teal)!important;margin:0 0 14px;font-weight:600}
.tn-wrap h1{font-family:'Noto Serif KR',serif;font-weight:700;font-size:clamp(26px,5.2vw,36px);
  line-height:1.34;letter-spacing:-.025em;margin:0 0 20px}
.tn-wrap h2{font-family:'Noto Serif KR',serif;font-weight:700;font-size:clamp(21px,3.6vw,25px);
  line-height:1.44;letter-spacing:-.02em;margin:56px 0 6px;padding-top:26px;border-top:1px solid var(--tn-line)}
.tn-wrap h3{font-size:17px;font-weight:700;margin:32px 0 10px;letter-spacing:-.014em}
.tn-wrap p{margin:0 0 21px}
.tn-wrap a{color:var(--tn-teal)!important;text-decoration:none;border-bottom:1px dotted var(--tn-teal)}
.tn-wrap a:hover{text-decoration:underline}
.tn-lede{font-size:18px;color:var(--tn-muted)!important;line-height:1.74;margin-bottom:32px}
.tn-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tn-line);
  border:1px solid var(--tn-line);border-radius:12px;overflow:hidden;margin:32px 0 40px}
.tn-strip div{background:var(--tn-paper);padding:15px 8px;text-align:center}
.tn-strip dt{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:var(--tn-muted)!important;text-transform:uppercase;margin:0 0 6px}
.tn-strip dd{margin:0;font-family:'JetBrains Mono',monospace;font-weight:600;
  font-size:clamp(14px,3vw,18px);letter-spacing:-.02em}
@media(max-width:520px){.tn-strip{grid-template-columns:repeat(2,1fr)}}
.tn-wrap figure{margin:36px 0}
.tn-wrap figure svg{width:100%;height:auto;display:block}
.tn-wrap figcaption{font-size:13.5px;color:var(--tn-muted)!important;margin-top:12px;line-height:1.65;
  padding-left:13px;border-left:2px solid var(--tn-line)}
.tn-note{border-left:3px solid var(--tn-teal);background:var(--tn-teal-soft);
  border-radius:0 10px 10px 0;padding:16px 18px;margin:28px 0;font-size:15.5px;line-height:1.72}
.tn-note b{display:block;font-size:11px;font-family:'JetBrains Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tn-teal)!important;margin-bottom:8px}
.tn-flaw{border-left:3px solid var(--tn-warn);padding:14px 0 14px 18px;margin:26px 0;
  font-size:15.5px;line-height:1.74}
.tn-flaw b{display:block;font-size:11px;font-family:'JetBrains Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tn-warn)!important;margin-bottom:8px}
.tn-code{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;
  background:var(--tn-teal-soft);border:1px solid var(--tn-line);border-radius:10px;
  padding:16px 18px;margin:24px 0;overflow-x:auto;white-space:pre}
.tn-wrap ul,.tn-wrap ol{margin:0 0 22px;padding-left:22px}
.tn-wrap li{margin-bottom:10px}
.tn-series{margin:36px 0;border:1px solid var(--tn-line);border-radius:13px;overflow:hidden}
.tn-series-h{padding:14px 18px;border-bottom:1px solid var(--tn-line);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tn-muted)!important}
.tn-series-g{padding:15px 18px;border-bottom:1px solid var(--tn-line)}
.tn-series-g:last-child{border-bottom:none}
.tn-series-t{font-size:12px;font-weight:700;color:var(--tn-teal)!important;letter-spacing:.04em;margin-bottom:8px}
.tn-series-g ol{margin:0;padding-left:19px;font-size:14px;line-height:1.62}
.tn-series-g li{margin-bottom:4px;color:var(--tn-muted)!important}
.tn-series-g li.now{color:var(--tn-ink)!important;font-weight:700}
.tn-nav{margin:40px 0;padding:20px 0;border-top:1px solid var(--tn-line);border-bottom:1px solid var(--tn-line);
  display:flex;justify-content:space-between;font-size:14px;gap:16px}
.tn-nav-prev,.tn-nav-next{color:var(--tn-teal)!important;text-decoration:none}
.tn-nav-prev:hover,.tn-nav-next:hover{text-decoration:underline}
.tn-foot{margin-top:52px;padding-top:24px;border-top:1px solid var(--tn-line);
  font-size:13.5px;color:var(--tn-muted)!important;line-height:1.72}
.tn-divider{display:none}
/* --- tn-tbl(2열 표) / h4 소제목 보강 (2026-09-10). 위 블록의 --tn-line/--tn-paper 변수 재사용,
   다크모드는 html[data-theme="dark"] .tn-wrap 의 변수 재정의로 자동 대응(별도 규칙 불필요).
   가로 스크롤은 기존 #bo_v_con table{display:block;overflow-x:auto;max-width:100%} (1423행)이
   이미 처리하므로 여기서 반응형/overflow 는 다시 선언하지 않음. --- */
.tn-wrap h4{font-size:15px;font-weight:700;margin:26px 0 8px;letter-spacing:-.012em}
.tn-wrap .tn-tbl{width:100%;border-collapse:collapse;margin:28px 0;font-size:15.5px;line-height:1.7}
.tn-wrap .tn-tbl th,.tn-wrap .tn-tbl td{border:1px solid var(--tn-line);padding:10px 13px;text-align:left;vertical-align:top}
.tn-wrap .tn-tbl th{background:var(--tn-paper);font-weight:600}
/* ===== tn-wrap 전역화 끝 ===== */

[data-theme="dark"] .cl-notch-item.is-active{ background:#fff; color:#111; }
/* === Classic Luxury Nav v5 - No Scroll, 7 items visible === */
.cl-classic-wrap{
  width:100%;
  background:#FFFEF7;
  border-top:1px solid rgba(0,0,0,0.06);
  border-bottom:1px solid rgba(0,0,0,0.08);
  padding:0;
}
[data-theme="dark"] .cl-classic-wrap{ background:#1a1a1a; border-color:rgba(255,255,255,0.08); }

.cl-classic-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0;
  padding:6px 0;
}
.cl-classic-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  font-family:var(--cl-serif, 'Noto Serif KR', serif);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-0.3px;
  color:#444;
  text-decoration:none;
  transition:all .2s ease;
  border-right:1px solid rgba(0,0,0,0.06);
}
.cl-classic-item:last-child{ border-right:none; }
[data-theme="dark"] .cl-classic-item{ color:#aaa; border-color:rgba(255,255,255,0.06); }

.cl-classic-item.is-active{
  color:var(--cl-gold, #8B6A2B);
}
.cl-classic-item.is-active::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:2px;
  background:var(--cl-gold, #C9A86A);
  border-radius:1px;
}
.cl-classic-item:hover{ color:#111; background:rgba(0,0,0,0.02); }
[data-theme="dark"] .cl-classic-item:hover{ background:rgba(255,255,255,0.04); color:#fff; }

/* 7개를 4+3으로 자연스럽게 떨어지게 */
@media(max-width:420px){
  .cl-classic-item{ padding:9px 12px; font-size:12.5px; }
}

/* 운영현황 카드(공지/매매일지/기술노트 등) 표면 스타일 - 2026-08-24 정리: 하드코딩 hex +
   이중 box-shadow + 그라데이션 오버라이드를 걷어내고 --cl-* 토큰 기반으로 되돌림(다크모드는
   토큰 재정의로 자동 대응, 별도 [data-theme="dark"] 오버라이드 불필요) */
.cl-card-list{
  background: var(--cl-card);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cl-card-list:hover{
  transform: translateY(-2px);
  border-color: var(--cl-muted-2);
  box-shadow: var(--cl-shadow-card-hover);
}

/* 핵심 콘텐츠 매매일지는 골드 왼쪽 바 + 살짝 크고 그림자 강조 */
.cl-card-featured{
  border-left: 4px solid var(--cl-gold-fill);
}

.cl-card-head{
  padding: 16px 18px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.cl-card-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.cl-more-link{
  font-size: 12.5px;
  color: #888;
  text-decoration: none;
  font-weight: 600;
  transition: color .2s;
}
.cl-more-link:hover{ color: #111; }

.cl-list-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background .2s ease;
  gap: 12px;
}
.cl-list-item:last-child{ border-bottom: none; }
.cl-list-item:hover{ background: rgba(0,0,0,0.02); }
[data-theme="dark"] .cl-list-item:hover{ background: rgba(255,255,255,0.03); }

.cl-li-title{
  flex: 1;
  font-size: 13.5px;
  color: #222;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .cl-li-title{ color: #e5e5e5; }

.cl-li-meta{
  font-size: 12px;
  color: #999;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* N 배지 - 빨간 펄스 */
.cl-new{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #FF3B30;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  animation: clPulse 2s infinite;
  flex-shrink: 0;
}
@keyframes clPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,59,48,0.4); }
  70%{ box-shadow: 0 0 0 6px rgba(255,59,48,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}

.cl-empty-card{ padding: 24px; text-align: center; color: #999; font-size: 13px; }

/* === Density FIX v7 - 빈공간 줄이고 5개 표시 === */
.cl-section-title-row{ margin-bottom:8px !important; }
.cl-card-head{ padding:12px 14px 10px !important; }
.cl-card-title{ font-size:14px !important; }
.cl-icon-badge{ width:22px !important; height:22px !important; font-size:12px !important; }
.cl-list-item{ padding:9px 14px !important; }
.cl-li-title{ font-size:13px !important; line-height:1.35 !important; }
.cl-li-meta{ font-size:11px !important; }
/* PC 3열 그리드일 때 카드 높이 맞추기 - 5개 들어가도 넘치지 않게 */
@media(min-width:768px){
  .cl-card-list{ min-height:auto !important; }
  .cl-card-list .cl-list-item{ padding:8px 14px !important; }
}
/* 빈 카드 문구도 작게 */
.cl-empty-card{ padding:12px !important; font-size:12px !important; }

/* ALIVE v8 다크/화이트 대응 */
[data-theme="dark"] #clAliveSymbol{ color:#fff!important; }
[data-theme="dark"] #clAliveText{ color:#ccc!important; }

/* === ALIVE v13 - 다크모드 하얀 바 FIX (확실한 버전) === */
html[data-theme="dark"] .cl-briefing-card,
html.dark .cl-briefing-card,
body[data-theme="dark"] .cl-briefing-card,
body.dark .cl-briefing-card {
  background: #2A2A30 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important;
}
html[data-theme="dark"] .cl-briefing-card .main,
body[data-theme="dark"] .cl-briefing-card .main {
  color: #f3f4f6 !important;
}
html[data-theme="dark"] .cl-briefing-card .label,
html[data-theme="dark"] .cl-briefing-card .sep,
html[data-theme="dark"] .cl-briefing-card .time {
  color: #9ca3af !important;
}
html[data-theme="dark"] .cl-briefing-card .mini-btn {
  background: #fff !important;
  color: #111 !important;
}

/* =========================================================
   CoinLab 최근 수다 위젯
   ========================================================= */

.cl-recent-chat {
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--cl-card, #111827);
    border: 1px solid var(--cl-border, #263244);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.cl-recent-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.cl-recent-chat-head h2 {
    margin: 3px 0 0;
    font-size: 18px;
    line-height: 1.3;
}

.cl-recent-chat-head > a {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.cl-recent-chat-list {
    border-top: 1px solid rgba(255,255,255,.07);
}

.cl-recent-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 8px 2px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.cl-recent-chat-item:last-child {
    border-bottom: 0;
}

.cl-recent-chat-name {
    flex: 0 0 90px;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-recent-chat-message {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--cl-text, #e5e7eb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-recent-chat-time {
    flex: 0 0 38px;
    text-align: right;
    font-size: 11px;
    opacity: .5;
}

.cl-recent-chat-empty {
    padding: 22px 5px 8px;
    text-align: center;
    font-size: 13px;
    opacity: .65;
}

.cl-recent-chat-empty a {
    display: block;
    margin-top: 7px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 700px) {

    .cl-recent-chat {
        margin-top: 18px;
        padding: 17px 15px;
        border-radius: 12px;
    }

    .cl-recent-chat-item {
        gap: 7px;
    }

    .cl-recent-chat-name {
        flex-basis: 65px;
    }

    .cl-recent-chat-message {
        font-size: 12px;
    }

    .cl-recent-chat-time {
        font-size: 10px;
    }
}

/* =========================================================
   CoinLab Memo UI
   ========================================================= */

#memo_list,
#memo_write,
#memo_view{
  width:100%;
  max-width:760px;
  margin:0 auto;
  box-sizing:border-box;
  color:var(--cl-text);
}

#memo_list .new_win_con2,
#memo_write .new_win_con2,
#memo_view .new_win_con2{
  background:var(--cl-card);
  border:1px solid var(--cl-border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

#memo_list #win_title,
#memo_write #win_title,
#memo_view #win_title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  height:auto;
  margin:0;
  padding:22px 24px 8px;
  background:transparent;
  box-shadow:none;
  -webkit-box-shadow:none;
  line-height:1.3;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--cl-text);
}

#memo_list .win_total{
  flex:0 0 auto;
  float:none;
  margin-top:2px;
  padding:6px 12px;
  border-radius:10px;
  background:var(--cl-bg-elev);
  font-size:11px;
  font-weight:500;
  line-height:1.5;
  text-align:right;
  color:var(--cl-muted);
}

#memo_list .win_ul,
#memo_write .win_ul,
#memo_view .win_ul{
  display:flex;
  gap:6px;
  margin:12px 20px 0;
  padding:5px;
  list-style:none;
  background:var(--cl-bg-elev);
  border:1px solid var(--cl-border);
  border-radius:12px;
}

#memo_list .win_ul li,
#memo_write .win_ul li,
#memo_view .win_ul li{
  flex:1;
  margin:0;
}

#memo_list .win_ul li a,
#memo_write .win_ul li a,
#memo_view .win_ul li a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 10px;
  border-radius:8px;
  color:var(--cl-muted);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  transition:.18s;
}

#memo_list .win_ul li.selected a,
#memo_write .win_ul li.selected a,
#memo_view .win_ul li.selected a{
  background:var(--cl-card);
  color:var(--cl-text);
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}

#memo_list .memo_list{
  margin:18px 20px 0;
}

#memo_list .memo_list ul{
  margin:0;
  padding:0;
  list-style:none;
}

#memo_list .memo_list li{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:76px;
  padding:13px 42px 13px 8px;
  border-bottom:1px solid var(--cl-border);
  box-sizing:border-box;
}

#memo_list .memo_list li:last-child{
  border-bottom:0;
}

#memo_list .memo_li.profile_big_img{
  flex:0 0 46px;
  position:relative;
}

#memo_list .profile_big_img img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--cl-border);
}

#memo_list .memo_name{
  min-width:0;
  flex:1;
  font-size:13px;
  font-weight:800;
  color:var(--cl-text);
}

#memo_list .memo_datetime{
  margin-left:7px;
  font-size:10px;
  font-weight:500;
  color:var(--cl-muted);
}

#memo_list .memo_preview{
  margin-top:5px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:500;
  color:var(--cl-muted);
}

#memo_list .memo_preview a{
  color:inherit;
  text-decoration:none;
}

#memo_list .no_read{
  position:absolute;
  left:28px;
  bottom:-2px;
  padding:2px 5px;
  border-radius:5px;
  background:var(--cl-gold-fill);
  color:var(--cl-on-gold);
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}

#memo_list .memo_del{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  color:var(--cl-muted);
  text-decoration:none;
  font-size:13px;
}

#memo_list .memo_del:hover{
  color:#ef4444;
}

#memo_list .empty_table{
  justify-content:center;
  padding:40px 10px;
  color:var(--cl-muted);
}

#memo_list .win_desc{
  margin:16px 20px 0;
  padding:11px 14px;
  border-radius:10px;
  background:var(--cl-bg-elev);
  color:var(--cl-muted);
  font-size:11px;
  text-align:center;
}

#memo_list .win_desc strong{
  color:var(--cl-text);
}

#memo_list .win_btn{
  padding:20px;
  box-sizing:border-box;
}

#memo_list .win_btn .btn_close{
  min-width:110px;
  height:38px;
  padding:0 16px;
  border-radius:10px;
  background:var(--cl-bg-elev);
  color:var(--cl-text);
  border:1px solid var(--cl-border);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

#memo_list .pg_wrap{
  margin:6px 20px 0;
}

#memo_write form{
  margin:0;
}

#memo_write .form_01{
  margin:20px;
}

#memo_write .form_01 ul{
  margin:0;
  padding:0;
  list-style:none;
}

#memo_write .form_01 li{
  margin-bottom:14px;
}

#memo_write .form_01 label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:700;
  color:var(--cl-text);
}

#memo_write .form_01 label .required_mark{
  margin-left:3px;
  color:var(--cl-gain);
  font-weight:700;
}

#memo_write .frm_input{
  width:100%;
  height:46px;
  padding:0 14px;
  box-sizing:border-box;
  border:1px solid var(--cl-border);
  border-radius:10px;
  background:var(--cl-bg);
  color:var(--cl-text);
  outline:none;
  font-size:13px;
}

#memo_write .frm_input:focus{
  border-color:var(--cl-gold);
  box-shadow:0 0 0 3px rgba(200,164,90,.12);
}

#memo_write #me_memo{
  display:block;
  width:100%;
  min-height:220px;
  padding:14px;
  box-sizing:border-box;
  resize:vertical;
  border:1px solid var(--cl-border);
  border-radius:10px;
  background:var(--cl-bg);
  color:var(--cl-text);
  outline:none;
  font-size:13px;
  line-height:1.7;
}

#memo_write #me_memo:focus{
  border-color:var(--cl-gold);
  box-shadow:0 0 0 3px rgba(200,164,90,.12);
}

#memo_write .frm_info{
  display:block;
  margin-top:6px;
  font-size:11px;
  line-height:1.5;
  color:var(--cl-muted);
}

#memo_write .win_btn,
#memo_view .win_btn{
  display:flex;
  gap:8px;
  padding:0 20px 20px;
  box-sizing:border-box;
}

#memo_write .win_btn button,
#memo_view .win_btn button,
#memo_view .reply_btn{
  flex:1;
  min-height:44px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

#memo_write .reply_btn,
#memo_write #btn_submit,
#memo_view .reply_btn{
  background:var(--cl-gold-fill);
  color:var(--cl-on-gold);
  border:1px solid var(--cl-gold-fill);
}

#memo_write .btn_close,
#memo_view .btn_close{
  background:var(--cl-bg-elev);
  color:var(--cl-text);
  border:1px solid var(--cl-border);
}

#memo_view #memo_view_contents{
  margin:20px;
  border:1px solid var(--cl-border);
  border-radius:14px;
  overflow:hidden;
  background:var(--cl-bg);
}

#memo_view #memo_view_contents header{
  padding:15px 18px;
  border-bottom:1px solid var(--cl-border);
  background:var(--cl-bg-elev);
}

#memo_view #memo_view_contents header h2{
  margin:0;
  font-size:13px;
  font-weight:800;
  color:var(--cl-text);
}

#memo_view #memo_view_ul{
  padding:16px 18px;
}

#memo_view .memo_from{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

#memo_view .memo_profile img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
}

#memo_view .memo_view_nick{
  font-size:13px;
  font-weight:800;
  color:var(--cl-text);
}

#memo_view .memo_view_date{
  margin-left:auto;
  font-size:10px;
  color:var(--cl-muted);
}

#memo_view .memo_op_btn{
  margin-left:4px;
}

#memo_view .memo_op_btn a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:8px;
  background:var(--cl-card);
  border:1px solid var(--cl-border);
  color:var(--cl-muted);
  text-decoration:none;
}

#memo_view #memo_view_contents > p{
  margin:0;
  padding:20px 18px 24px;
  min-height:150px;
  box-sizing:border-box;
  border-top:1px solid var(--cl-border);
  color:var(--cl-text);
  font-size:13px;
  line-height:1.8;
  word-break:break-word;
}

#memo_view .memo_btn{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
}

#memo_view .memo_btn a{
  color:var(--cl-muted);
  font-size:11px;
  font-weight:700;
  text-decoration:none;
}

#memo_view .memo_btn a:hover{
  color:var(--cl-gold);
}

@media(max-width:640px){
  #memo_list,
  #memo_write,
  #memo_view{
    max-width:none;
  }

  #memo_list #win_title,
  #memo_write #win_title,
  #memo_view #win_title{
    flex-wrap:wrap;
    padding:18px 16px 6px;
    font-size:19px;
  }

  #memo_list .win_total{
    text-align:left;
  }

  #memo_list .win_ul,
  #memo_write .win_ul,
  #memo_view .win_ul{
    margin:10px 12px 0;
  }

  #memo_list .memo_list,
  #memo_write .form_01,
  #memo_view #memo_view_contents{
    margin-left:12px;
    margin-right:12px;
  }

  #memo_list .memo_datetime{
    display:block;
    margin:3px 0 0;
  }

  #memo_write .form_01{
    margin-top:16px;
  }

  #memo_write #me_memo{
    min-height:180px;
  }

  #memo_view .memo_view_date{
    display:none;
  }

  #memo_view .win_btn{
    padding:0 12px 12px;
  }

  #memo_list .win_desc{
    margin:14px 12px 0;
  }

  #memo_list .win_btn{
    padding:16px 12px;
  }

  #memo_list .pg_wrap{
    margin:6px 12px 0;
  }
}

/* =========================================================
   CoinLab Point / Scrap Popup UI
   (그누보드 순정 basic 스킨 - html/skin/member/basic/point.skin.php,
   scrap.skin.php - 마크업은 그대로 두고 CSS만 --cl-* 토큰으로 재작성)
   ========================================================= */

#point,
#scrap{
  width:100%;
  max-width:760px;
  margin:0 auto;
  box-sizing:border-box;
  color:var(--cl-text);
}

#point #win_title,
#scrap #win_title{
  margin:0;
  padding:22px 24px 8px;
  background:transparent;
  box-shadow:none;
  -webkit-box-shadow:none;
  height:auto;
  line-height:1.3;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--cl-text);
}

#point .new_win_con2,
#scrap > ul{
  margin:0;
  padding:0;
  list-style:none;
  background:var(--cl-card);
  border:1px solid var(--cl-border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

/* 포인트: 보유포인트 요약 */
#point .point_all{
  margin:0;
  padding:0;
  list-style:none;
  border-bottom:1px solid var(--cl-border);
  background:var(--cl-bg-elev);
}

#point .point_all .full_li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  font-size:13px;
  font-weight:700;
  color:var(--cl-muted);
}

#point .point_all .full_li span{
  font-family:var(--cl-mono);
  font-size:20px;
  font-weight:700;
  color:var(--cl-gold);
}

/* 포인트: 내역 리스트 */
#point .point_list{
  margin:0;
  padding:0;
  list-style:none;
}

#point .point_list li{
  padding:14px 20px;
  border-bottom:1px solid var(--cl-border);
}

#point .point_list li:last-child{
  border-bottom:0;
}

#point .point_top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

#point .point_tit{
  min-width:0;
  font-size:13px;
  font-weight:700;
  color:var(--cl-text);
}

#point .point_num{
  flex:0 0 auto;
  font-family:var(--cl-mono);
  font-size:14px;
  font-weight:700;
  color:var(--cl-gain);
}

#point .point_list li.point_use .point_num{
  color:var(--cl-loss);
}

#point .point_date1,
#point .point_date{
  display:inline-block;
  margin-top:5px;
  font-size:11px;
  color:var(--cl-muted);
}

#point .point_date{
  float:right;
}

#point .point_date.txt_expired{
  color:var(--cl-gain);
}

#point .point_status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:14px 20px;
  background:var(--cl-bg-elev);
  font-size:12px;
  font-weight:700;
  color:var(--cl-muted);
}

#point .point_status span{
  font-family:var(--cl-mono);
  font-weight:700;
  color:var(--cl-text);
}

#point .empty_li,
#scrap .empty_li{
  padding:40px 10px;
  text-align:center;
  color:var(--cl-muted);
}

/* 스크랩 리스트 */
#scrap > ul > li{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  padding:14px 44px 14px 18px;
  border-bottom:1px solid var(--cl-border);
  box-sizing:border-box;
}

#scrap > ul > li:last-child{
  border-bottom:0;
}

#scrap .scrap_tit{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:700;
  color:var(--cl-text);
  text-decoration:none;
}

#scrap .scrap_cate{
  flex:0 0 auto;
  padding:2px 8px;
  border-radius:999px;
  background:var(--cl-bg-elev);
  border:1px solid var(--cl-border);
  font-size:10px;
  font-weight:600;
  color:var(--cl-muted);
  text-decoration:none;
}

#scrap .scrap_datetime{
  flex:0 0 100%;
  font-size:10px;
  color:var(--cl-muted);
}

#scrap .scrap_del{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--cl-muted);
  text-decoration:none;
}

#scrap .scrap_del:hover{
  color:#ef4444;
}

/* 포인트/스크랩 공통: 페이지네이션 여백 + 닫기버튼 */
#point .pg_wrap,
#scrap .pg_wrap{
  margin:16px 0 0;
}

#point .btn_close,
#scrap .win_btn{
  margin-top:16px;
}

#point .btn_close,
#scrap .btn_close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  height:38px;
  padding:0 16px;
  border-radius:10px;
  background:var(--cl-bg-elev);
  color:var(--cl-text);
  border:1px solid var(--cl-border);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

#point .btn_close:hover,
#scrap .btn_close:hover{
  color:#fff;
  background:var(--cl-border);
}

@media(max-width:640px){
  #point,
  #scrap{
    max-width:none;
  }

  #point #win_title,
  #scrap #win_title{
    padding:18px 16px 6px;
    font-size:19px;
  }

  #point .point_all .full_li,
  #point .point_list li,
  #point .point_status{
    padding-left:16px;
    padding-right:16px;
  }

  #scrap > ul > li{
    padding-left:16px;
    padding-right:40px;
  }

  #point .pg_wrap,
  #scrap .pg_wrap,
  #point .btn_close,
  #scrap .win_btn{
    margin-left:16px;
    margin-right:16px;
  }
}


/* =========================================================
   CoinLab 수다방
   ========================================================= */

.cl-chat-page{
    width:100%;
    max-width:900px;
    margin:32px auto 60px;
    padding:0 16px;
    box-sizing:border-box;
}

.cl-chat-box{
    overflow:hidden;
    background:var(--cl-card,#111827);
    border:1px solid var(--cl-border,#263244);
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.cl-chat-head{
    padding:22px 24px;
    border-bottom:1px solid var(--cl-border,#263244);
    background:linear-gradient(
        135deg,
        rgba(94,231,255,.06),
        transparent 55%
    );
}

.cl-chat-head h2{
    margin:0;
    color:var(--cl-text,#fff);
    font-size:21px;
    font-weight:800;
    letter-spacing:-.03em;
}

.cl-chat-head p{
    margin:7px 0 0;
    color:var(--cl-muted,#8b98aa);
    font-size:13px;
}

.cl-chat-name{
    color:#5ee7ff;
    font-size:13px;
    font-weight:800;
}

.cl-chat-time{
    margin-left:7px;
    color:var(--cl-muted,#687587);
    font-size:11px;
}

.cl-chat-text{
    margin-top:5px;
    color:var(--cl-text,#e5e7eb);
    font-size:14px;
    line-height:1.65;
    word-break:break-word;
}

.cl-chat-report,
.cl-chat-delete{
    margin-left:7px;
    padding:0;
    border:0;
    background:transparent;
    color:#687587;
    font-size:10px;
    cursor:pointer;
}

.cl-chat-report:hover,
.cl-chat-delete:hover{
    color:#ef6b73;
}

.cl-chat-guide{
    padding:9px 18px;
    border-top:1px solid var(--cl-border,#263244);
    background:rgba(255,255,255,.018);
    color:var(--cl-muted,#8b98aa);
    font-size:11px;
    text-align:center;
}

.cl-chat-form{
    display:flex;
    gap:9px;
    padding:14px;
    border-top:1px solid var(--cl-border,#263244);
    background:var(--cl-card,#111827);
}

.cl-chat-form input{
    flex:1;
    min-width:0;
    height:46px;
    box-sizing:border-box;
    padding:0 14px;
    border:1px solid var(--cl-border,#334155);
    border-radius:10px;
    background:var(--cl-bg,#0b1220);
    color:var(--cl-text,#fff);
    outline:none;
    font-size:14px;
}

.cl-chat-form input:focus{
    border-color:#18b6d9;
    box-shadow:0 0 0 3px rgba(24,182,217,.10);
}

.cl-chat-form button{
    flex:0 0 78px;
    height:46px;
    border:0;
    border-radius:10px;
    background:#18b6d9;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    transition:.18s ease;
}

.cl-chat-form button:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
}

@media(max-width:600px){

    .cl-chat-page{
        margin:15px auto 35px;
        padding:0 10px;
    }

    .cl-chat-box{
        border-radius:14px;
    }

    .cl-chat-head{
        padding:17px 16px;
    }

    .cl-chat-head h2{
        font-size:18px;
    }

    .cl-chat-form{
        padding:10px;
    }

    .cl-chat-form button{
        flex-basis:64px;
    }
}

.cl-chat-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.cl-chat-online{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:1px solid rgba(94,231,255,.15);
    border-radius:20px;
    color:var(--cl-muted,#8b98aa);
    font-size:11px;
    white-space:nowrap;
}

.cl-chat-online span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#32d583;
    box-shadow:0 0 8px rgba(50,213,131,.7);
}

@media(max-width:600px){
    .cl-chat-title-row{
        align-items:flex-start;
    }

    .cl-chat-online{
        padding:5px 8px;
        font-size:10px;
    }
}


.cl-chat-message-wrap{
    position:relative;
}

.cl-chat-latest{
    display:none;
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:5;
    padding:8px 12px;
    border:1px solid rgba(94,231,255,.25);
    border-radius:20px;
    background:#111827;
    color:#5ee7ff;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 15px rgba(0,0,0,.35);
}

.cl-chat-latest:hover{
    border-color:#5ee7ff;
}


/* 수다방 전체 다크 배경 */
html[data-theme="dark"] body,
body{
    background:var(--cl-bg,#0b1220);
}

.cl-chat-page{
    background:transparent;
}

.cl-chat-box{
    background:var(--cl-card,#111827);
}

/* 입력창 바깥 영역 */
.cl-chat-form-wrap{
    background:var(--cl-card,#111827);
}

.cl-chat-form{
    background:var(--cl-card,#111827);
}

/* 채팅 안내 영역 */
.cl-chat-guide{
    background:var(--cl-card,#111827);
}

/* 모바일/새창에서도 흰 여백 방지 */
#wrap,
#wrapper,
#container{
    background:transparent;
}


/* 수다방 라이트모드 다크 패널 보정 */
.cl-chat-box{
    background:#111827 !important;
    border-color:#263244 !important;
}

.cl-chat-guide{
    background:#111827 !important;
    border-color:#263244 !important;
    color:#8b98aa !important;
}

.cl-chat-form{
    background:#111827 !important;
    border-color:#263244 !important;
}

.cl-chat-form input{
    background:#070d17 !important;
    border-color:#334155 !important;
    color:#fff !important;
}

.cl-chat-head{
    background:linear-gradient(135deg,rgba(94,231,255,.06),transparent 55%) !important;
    border-color:#263244 !important;
}

.cl-chat-head h2{
    color:#fff !important;
}

.cl-chat-head p{
    color:#8b98aa !important;
}


.cl-chat-floating{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.cl-chat-new,
.cl-chat-latest{
    display:none;
    padding:8px 12px;
    border:1px solid rgba(94,231,255,.25);
    border-radius:20px;
    background:#111827;
    color:#5ee7ff;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 15px rgba(0,0,0,.35);
}

.cl-chat-new{
    border-color:rgba(50,213,131,.3);
    color:#32d583;
}

.cl-chat-new:hover,
.cl-chat-latest:hover{
    border-color:#5ee7ff;
}

@media(max-width:600px){
    .cl-chat-floating{
        right:10px;
        bottom:10px;
    }
}


.cl-chat-name-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.cl-chat-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    font-size:9px;
    font-weight:800;
    line-height:1;
}

.cl-chat-badge-member{
    border:1px solid rgba(94,231,255,.22);
    background:rgba(94,231,255,.08);
    color:#5ee7ff;
}

.cl-chat-badge-guest{
    border:1px solid rgba(148,163,184,.18);
    background:rgba(148,163,184,.08);
    color:#94a3b8;
}

.cl-chat-badge-admin{
    border:1px solid rgba(234,179,8,.25);
    background:rgba(234,179,8,.10);
    color:#eab308;
}

.cl-chat-input-area{
    position:relative;
    background:#111827;
}

.cl-chat-counter{
    padding:0 16px 8px;
    text-align:right;
    color:#687587;
    font-size:10px;
}

.cl-chat-counter.warning{
    color:#efb44d;
    font-weight:700;
}


.cl-chat-form button:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none !important;
}

.cl-chat-image{
    display:block;
    max-width:min(320px,100%);
    max-height:260px;
    margin-top:10px;
    border:1px solid #263244;
    border-radius:10px;
    object-fit:contain;
    cursor:pointer;
    background:#070d17;
}
.cl-chat-image:hover{
    opacity:.92;
}
@media(max-width:600px){
    .cl-chat-image{
        max-width:100%;
        max-height:220px;
    }
}
.cl-chat-image-btn{
    flex:0 0 auto;
    min-width:120px;
    height:46px;
    padding:0 12px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #334155;
    border-radius:10px;
    background:#0b1220;
    color:#9aa7b8;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
    overflow:hidden;
}

.cl-chat-image-btn:hover{
    border-color:#18b6d9;
    color:#5ee7ff;
}

.cl-chat-image-icon{
    flex:0 0 auto;
    font-size:17px;
}

#cl-chat-image-name{
    max-width:75px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

@media(max-width:600px){
    .cl-chat-image-btn{
        min-width:48px;
        width:48px;
        padding:0;
    }

    .cl-chat-image-icon{
        font-size:18px;
    }

    #cl-chat-image-name{
        display:none;
    }
}
.cl-chat-image-wrap{
    display:flex;
    align-items:center;
    gap:5px;
}

.cl-chat-image-clear{
    width:30px;
    height:46px;
    border:1px solid #334155;
    border-radius:10px;
    background:#0b1220;
    color:#7f8da3;
    font-size:18px;
    line-height:1;
    cursor:pointer;
}

.cl-chat-image-clear:hover{
    border-color:#ef6b73;
    color:#ef6b73;
}

@media(max-width:600px){
    .cl-chat-image-clear{
        width:30px;
    }
}
.cl-chat-image-clear{
    width:30px;
    height:34px;
    font-size:16px;
}
.cl-chat-image-clear{
    width:28px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    box-sizing:border-box !important;
}
.cl-chat-image-preview{
    display:none;
    width:42px;
    height:42px;
    flex:0 0 42px;
    object-fit:cover;
    border:1px solid #334155;
    border-radius:8px;
    background:#070d17;
}

/* =========================================================
   CoinLab 수다방 FINAL
   ========================================================= */

body.cl-chat-body{
    background:var(--cl-bg,#0b1220) !important;
}

body.cl-chat-body #wrapper,
body.cl-chat-body #container{
    background:transparent !important;
}

.cl-chat-page{
    width:100%;
    max-width:900px;
    margin:30px auto 60px;
    padding:0 15px;
    box-sizing:border-box;
}

.cl-chat-box{
    overflow:hidden;
    background:#111827 !important;
    border:1px solid #263244 !important;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.18);
}

.cl-chat-head{
    padding:22px 24px;
    border-bottom:1px solid #263244 !important;
    background:linear-gradient(135deg,rgba(94,231,255,.06),transparent 55%) !important;
}

.cl-chat-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.cl-chat-kicker{
    margin-bottom:6px;
    color:#c8a45a;
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
}

.cl-chat-head h2{
    margin:0;
    color:#fff !important;
    font-size:21px;
    font-weight:800;
    letter-spacing:-.03em;
}

.cl-chat-head p{
    margin:7px 0 0;
    color:#8b98aa !important;
    font-size:13px;
}

.cl-chat-online{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 11px;
    border:1px solid rgba(94,231,255,.15);
    border-radius:20px;
    color:#8b98aa;
    font-size:11px;
    white-space:nowrap;
}

.cl-chat-online span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#32d583;
    box-shadow:0 0 8px rgba(50,213,131,.7);
}

.cl-chat-online strong{
    color:#dbe6ef;
}

.cl-chat-message-wrap{
    position:relative;
}

.cl-chat-messages{
    height:min(70vh, 800px);
    min-height:500px;
    overflow-y:auto;
    padding:20px;
    box-sizing:border-box;
    background:#0b1220 !important;
    scrollbar-width:thin;
}

.cl-chat-loading{
    padding:40px;
    text-align:center;
    color:#687587;
    font-size:12px;
}

.cl-chat-message{
    position:relative;
    margin:0 0 12px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.cl-chat-message.cl-chat-admin{
    border-color:rgba(234,179,8,.12);
    background:rgba(234,179,8,.025);
}

.cl-chat-message-top{
    display:flex;
    align-items:center;
    gap:8px;
}

.cl-chat-name-wrap{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.cl-chat-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    font-size:9px;
    font-weight:800;
    line-height:1;
}

.cl-chat-badge-member{
    border:1px solid rgba(94,231,255,.22);
    background:rgba(94,231,255,.08);
    color:#5ee7ff;
}

.cl-chat-badge-guest{
    border:1px solid rgba(148,163,184,.18);
    background:rgba(148,163,184,.08);
    color:#94a3b8;
}

.cl-chat-badge-admin{
    border:1px solid rgba(234,179,8,.25);
    background:rgba(234,179,8,.10);
    color:#eab308;
}

.cl-chat-name{
    color:#f1f5f9;
    font-size:13px;
    font-weight:800;
}

.cl-chat-time{
    color:#687587;
    font-size:10px;
}

.cl-chat-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:5px;
}

.cl-chat-report,
.cl-chat-delete{
    padding:0;
    border:0;
    background:transparent;
    color:#687587;
    font-size:10px;
    cursor:pointer;
}

.cl-chat-report:hover,
.cl-chat-delete:hover{
    color:#ef6b73;
}

.cl-chat-text{
    margin-top:6px;
    padding-right:145px;
    color:#e5e7eb;
    font-size:14px;
    line-height:1.65;
    word-break:break-word;
}

.cl-chat-image{
    display:block;
    max-width:min(340px,100%);
    max-height:280px;
    margin-top:10px;
    border:1px solid #263244;
    border-radius:10px;
    object-fit:contain;
    background:#070d17;
    cursor:pointer;
}

.cl-chat-image:hover{
    opacity:.92;
}

.cl-chat-floating{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.cl-chat-new,
.cl-chat-latest{
    display:none;
    padding:8px 12px;
    border:1px solid rgba(94,231,255,.25);
    border-radius:20px;
    background:#111827;
    color:#5ee7ff;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 15px rgba(0,0,0,.35);
}

.cl-chat-new{
    border-color:rgba(50,213,131,.3);
    color:#32d583;
}

.cl-chat-new:hover,
.cl-chat-latest:hover{
    border-color:#5ee7ff;
}

.cl-chat-guide{
    padding:9px 18px;
    border-top:1px solid #263244 !important;
    background:#111827 !important;
    color:#8b98aa !important;
    font-size:11px;
    text-align:center;
}

.cl-chat-input-area{
    background:#111827 !important;
}

.cl-chat-form{
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px;
    border-top:1px solid #263244 !important;
    background:#111827 !important;
}

.cl-chat-form input{
    flex:1;
    min-width:0;
    height:46px;
    padding:0 14px;
    box-sizing:border-box;
    border:1px solid #334155 !important;
    border-radius:10px;
    background:#070d17 !important;
    color:#fff !important;
    outline:none;
    font-size:14px;
}

.cl-chat-form input:focus{
    border-color:#18b6d9 !important;
    box-shadow:0 0 0 3px rgba(24,182,217,.10);
}

.cl-chat-form button[type="submit"]{
    flex:0 0 78px;
    height:46px;
    border:0;
    border-radius:10px;
    background:#18b6d9;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    transition:.18s ease;
}

.cl-chat-form button[type="submit"]:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
}

.cl-chat-form button[type="submit"]:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none !important;
}

.cl-chat-counter{
    padding:0 16px 8px;
    background:#111827;
    text-align:right;
    color:#687587;
    font-size:10px;
}

.cl-chat-counter.warning{
    color:#efb44d;
    font-weight:700;
}

.cl-chat-image-wrap{
    position:relative;
    display:flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
}

.cl-chat-image-btn{
    min-width:120px;
    height:46px;
    padding:0 12px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #334155;
    border-radius:10px;
    background:#0b1220;
    color:#9aa7b8;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
    overflow:hidden;
}

.cl-chat-image-btn:hover{
    border-color:#18b6d9;
    color:#5ee7ff;
}

.cl-chat-image-icon{
    flex:0 0 auto;
    font-size:17px;
}

#cl-chat-image-name{
    max-width:130px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.cl-chat-image-clear{
    width:28px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    border:1px solid #334155;
    border-radius:8px;
    background:#0b1220;
    color:#7f8da3;
    font-size:16px;
    line-height:1;
    cursor:pointer;
}

.cl-chat-image-clear:hover{
    border-color:#ef6b73;
    color:#ef6b73;
}

.cl-chat-image-preview{
    display:none;
    position:absolute;
    left:0;
    bottom:54px;
    width:42px;
    height:42px;
    flex:0 0 42px;
    object-fit:cover;
    border:1px solid #334155;
    border-radius:8px;
    background:#070d17;
    box-shadow:0 5px 15px rgba(0,0,0,.35);
}

@media(max-width:600px){

    .cl-chat-page{
        margin:15px auto 35px;
        padding:0 10px;
    }

    .cl-chat-box{
        border-radius:14px;
    }

    .cl-chat-head{
        padding:17px 16px;
    }

    .cl-chat-title-row{
        align-items:flex-start;
    }

    .cl-chat-head h2{
        font-size:18px;
    }

    .cl-chat-online{
        padding:5px 8px;
        font-size:10px;
    }

    .cl-chat-text{
        font-size:13px;
    }

    .cl-chat-image{
        max-width:100%;
        max-height:220px;
    }

    .cl-chat-form{
        padding:10px;
    }

    .cl-chat-form button[type="submit"]{
        flex-basis:64px;
    }

    .cl-chat-image-btn{
        min-width:48px;
        width:48px;
        padding:0;
    }

    .cl-chat-image-icon{
        font-size:18px;
    }

    #cl-chat-image-name{
        display:none;
    }

    .cl-chat-image-clear{
        width:26px !important;
    }

    .cl-chat-image-preview{
        bottom:50px;
    }
}

.cl-chat-name-link{
    text-decoration:none;
    cursor:pointer;
}

.cl-chat-name-link:hover{
    text-decoration:underline;
    text-underline-offset:3px;
}

.cl-chat-member .cl-chat-name,
.cl-chat-member .cl-chat-name-link{
    color:#5ee7ff !important;
}

.cl-chat-guest .cl-chat-name{
    color:#c2cbd6 !important;
}

.cl-chat-admin .cl-chat-name,
.cl-chat-admin .cl-chat-name-link{
    color:#eab308 !important;
}

.cl-chat-name-link{
    display:inline-block;
    text-decoration:none;
    cursor:pointer;
}

.cl-chat-name-link:hover{
    text-decoration:underline;
    text-underline-offset:3px;
}

/* =========================================================
   CoinLab 회원 프로필 팝업
   ========================================================= */

body:has(#cl-profile){
    background:#0b1220 !important;
    margin:0 !important;
}

#cl-profile{
    min-height:100vh;
    padding:18px;
    box-sizing:border-box;
    background:#0b1220;
    color:#e5e7eb;
}

.cl-profile-card{
    width:100%;
    max-width:480px;
    margin:0 auto;
    overflow:hidden;
    background:#111827;
    border:1px solid #263244;
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);
}

.cl-profile-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding:20px 22px 16px;
    border-bottom:1px solid #263244;
    background:linear-gradient(135deg,rgba(94,231,255,.07),transparent 60%);
}

.cl-profile-kicker{
    display:block;
    margin-bottom:5px;
    color:#c8a45a;
    font-size:9px;
    font-weight:800;
    letter-spacing:.15em;
}

.cl-profile-top h1{
    margin:0;
    color:#fff;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.03em;
}

.cl-profile-x{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border:1px solid #334155;
    border-radius:9px;
    background:#0b1220;
    color:#94a3b8;
    font-size:18px;
    line-height:1;
    cursor:pointer;
}

.cl-profile-x:hover{
    border-color:#ef6b73;
    color:#ef6b73;
}

.cl-profile-user{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px;
}

.cl-profile-avatar{
    width:62px;
    height:62px;
    flex:0 0 62px;
    overflow:hidden;
    border:1px solid rgba(94,231,255,.25);
    border-radius:50%;
    background:#0b1220;
}

.cl-profile-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.cl-profile-name{
    color:#5ee7ff;
    font-size:17px;
    font-weight:800;
}

.cl-profile-sub{
    margin-top:4px;
    color:#687587;
    font-size:10px;
}

.cl-profile-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    margin:0 18px 18px;
    overflow:hidden;
    border:1px solid #263244;
    border-radius:12px;
    background:#263244;
}

.cl-profile-stat{
    padding:13px;
    background:#0f1725;
}

.cl-profile-stat span{
    display:block;
    margin-bottom:5px;
    color:#687587;
    font-size:10px;
}

.cl-profile-stat strong{
    color:#e5e7eb;
    font-size:13px;
    font-weight:800;
    word-break:break-word;
}

.cl-profile-section{
    margin:0 18px 16px;
    padding:15px;
    border:1px solid #263244;
    border-radius:12px;
    background:#0f1725;
}

.cl-profile-section-title{
    margin-bottom:8px;
    color:#687587;
    font-size:9px;
    font-weight:800;
    letter-spacing:.12em;
}

.cl-profile-home{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#5ee7ff;
    font-size:12px;
    text-decoration:none;
    word-break:break-all;
}

.cl-profile-home:hover{
    color:#fff;
}

.cl-profile-message{
    color:#d8dee7;
    font-size:12px;
    line-height:1.75;
    word-break:break-word;
}

.cl-profile-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 18px 18px;
    color:#526176;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.cl-profile-footer button{
    min-width:70px;
    height:34px;
    border:1px solid #334155;
    border-radius:8px;
    background:#0b1220;
    color:#94a3b8;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.cl-profile-footer button:hover{
    border-color:#18b6d9;
    color:#5ee7ff;
}

@media(max-width:600px){
    #cl-profile{
        padding:10px;
    }

    .cl-profile-card{
        border-radius:14px;
    }

    .cl-profile-top{
        padding:17px 16px 14px;
    }

    .cl-profile-user{
        padding:18px 16px;
    }

    .cl-profile-stats{
        margin-left:12px;
        margin-right:12px;
    }

    .cl-profile-section{
        margin-left:12px;
        margin-right:12px;
    }
}


/* 수다방 이미지 라이트박스 */
.cl-chat-lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    align-items:center;
    justify-content:center;
    padding:20px;
    box-sizing:border-box;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(4px);
}

.cl-chat-lightbox.is-open{
    display:flex;
}

.cl-chat-lightbox img{
    display:block;
    max-width:min(92vw,1000px);
    max-height:88vh;
    border:1px solid #334155;
    border-radius:12px;
    object-fit:contain;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.cl-chat-lightbox-close{
    position:absolute;
    top:18px;
    right:18px;
    width:40px;
    height:40px;
    border:1px solid #475569;
    border-radius:10px;
    background:#111827;
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.cl-chat-lightbox-close:hover{
    border-color:#5ee7ff;
    color:#5ee7ff;
}

.cl-chat-image{
    transition:transform .16s ease,opacity .16s ease;
}

.cl-chat-image:hover{
    transform:translateY(-1px);
    opacity:.94;
}


/* =========================================================
   CoinLab 신고 모달
   ========================================================= */

.cl-report-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:100000;
    align-items:center;
    justify-content:center;
    padding:16px;
    box-sizing:border-box;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(4px);
}

.cl-report-modal.is-open{
    display:flex;
}

.cl-report-dialog{
    width:min(440px,100%);
    overflow:hidden;
    border:1px solid #263244;
    border-radius:16px;
    background:#111827;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

.cl-report-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px;
    border-bottom:1px solid #263244;
    background:linear-gradient(135deg,rgba(239,107,115,.05),transparent 60%);
}

.cl-report-kicker{
    display:block;
    margin-bottom:4px;
    color:#ef6b73;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
}

.cl-report-head h3{
    margin:0;
    color:#fff;
    font-size:17px;
    font-weight:800;
}

.cl-report-close{
    width:30px;
    height:30px;
    border:1px solid #334155;
    border-radius:8px;
    background:#0b1220;
    color:#94a3b8;
    font-size:18px;
    line-height:1;
    cursor:pointer;
}

.cl-report-close:hover{
    border-color:#ef6b73;
    color:#ef6b73;
}

.cl-report-body{
    padding:18px 20px;
}

.cl-report-desc{
    margin:0 0 12px;
    color:#8b98aa;
    font-size:12px;
}

.cl-report-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.cl-report-option{
    min-height:42px;
    padding:0 10px;
    border:1px solid #334155;
    border-radius:9px;
    background:#0b1220;
    color:#aeb8c5;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.cl-report-option:hover,
.cl-report-option.selected{
    border-color:#ef6b73;
    background:rgba(239,107,115,.08);
    color:#ff9ba2;
}

#cl-report-detail{
    width:100%;
    min-height:90px;
    margin-top:12px;
    padding:11px 12px;
    box-sizing:border-box;
    resize:vertical;
    border:1px solid #334155;
    border-radius:9px;
    outline:none;
    background:#0b1220;
    color:#fff;
    font-size:12px;
    line-height:1.6;
}

#cl-report-detail:focus{
    border-color:#ef6b73;
    box-shadow:0 0 0 3px rgba(239,107,115,.08);
}

.cl-report-count{
    margin-top:5px;
    text-align:right;
    color:#687587;
    font-size:9px;
}

.cl-report-footer{
    display:flex;
    gap:8px;
    padding:14px 20px 18px;
    border-top:1px solid #263244;
}

.cl-report-cancel,
.cl-report-submit{
    flex:1;
    height:42px;
    border-radius:9px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.cl-report-cancel{
    border:1px solid #334155;
    background:#0b1220;
    color:#94a3b8;
}

.cl-report-submit{
    border:1px solid #ef6b73;
    background:#ef6b73;
    color:#fff;
}

.cl-report-submit:disabled{
    opacity:.55;
    cursor:not-allowed;
}

@media(max-width:520px){
    .cl-report-options{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   CoinLab 수다방 신고 관리
   ========================================================= */

.cl-report-admin{
    max-width:1000px;
    margin:35px auto 60px;
    padding:0 16px;
}

.cl-report-admin-head{
    margin-bottom:20px;
}

.cl-report-admin-head > span{
    color:#ef6b73;
    font-size:9px;
    font-weight:800;
    letter-spacing:.15em;
}

.cl-report-admin-head h1{
    margin:5px 0;
    color:var(--cl-text,#fff);
    font-size:24px;
}

.cl-report-admin-head p{
    margin:0;
    color:var(--cl-muted,#8b98aa);
    font-size:12px;
}

.cl-report-admin-card{
    margin-bottom:12px;
    padding:18px;
    border:1px solid #263244;
    border-radius:14px;
    background:#111827;
}

.cl-report-admin-top{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.cl-report-admin-top strong{
    color:#fff;
    font-size:14px;
}

.cl-report-admin-top span{
    margin-left:8px;
    color:#ef6b73;
    font-size:11px;
}

.cl-report-admin-status{
    color:#eab308;
    font-size:10px;
    font-weight:800;
}

.cl-report-admin-meta{
    margin-top:6px;
    color:#687587;
    font-size:10px;
}

.cl-report-admin-message{
    margin-top:14px;
    padding:12px;
    border:1px solid #263244;
    border-radius:10px;
    background:#0b1220;
    color:#d8dee7;
    font-size:13px;
    line-height:1.65;
}

.cl-report-admin-image{
    display:block;
    max-width:300px;
    max-height:220px;
    margin-top:10px;
    border-radius:9px;
}

.cl-report-admin-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:14px;
}

.cl-report-admin-actions form{
    margin:0;
}

.cl-report-admin-actions button{
    height:34px;
    padding:0 12px;
    border:1px solid #334155;
    border-radius:8px;
    background:#0b1220;
    color:#94a3b8;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
}

.cl-report-admin-actions button:hover{
    border-color:#18b6d9;
    color:#5ee7ff;
}

.cl-report-admin-actions button.danger{
    border-color:rgba(239,107,115,.35);
    color:#ef6b73;
}

@media(max-width:600px){
    .cl-report-admin{
        margin-top:18px;
        padding:0 10px;
    }

    .cl-report-admin-top{
        flex-direction:column;
        gap:7px;
    }

    .cl-report-admin-actions{
        justify-content:stretch;
    }

    .cl-report-admin-actions button{
        width:100%;
    }
}


.cl-chat-head-actions{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.cl-chat-admin-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:30px;
    padding:0 10px;
    border:1px solid rgba(234,179,8,.25);
    border-radius:9px;
    background:rgba(234,179,8,.06);
    color:#eab308;
    font-size:10px;
    font-weight:800;
    text-decoration:none;
}

.cl-chat-admin-link:hover{
    border-color:#eab308;
    background:rgba(234,179,8,.10);
}

@media(max-width:600px){
    .cl-chat-head-actions{
        gap:5px;
    }

    .cl-chat-admin-link{
        height:28px;
        padding:0 8px;
        font-size:9px;
    }
}


/* 관리자 신고 관리 버튼 */
.cl-chat-admin-link,
.cl-chat-admin-link:visited{
    color:#eab308 !important;
    background:rgba(234,179,8,.08) !important;
    border:1px solid rgba(234,179,8,.35) !important;
    text-decoration:none !important;
}

/* 이미지 첨부 취소 - 작은 빨간 정사각형 */
.cl-chat-image-clear{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    border:1px solid rgba(239,107,115,.45) !important;
    border-radius:7px !important;
    background:rgba(239,107,115,.08) !important;
    color:#ef6b73 !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1 !important;
}

.cl-chat-image-clear:hover{
    border-color:#ef6b73 !important;
    background:rgba(239,107,115,.18) !important;
    color:#ff8b91 !important;
}


/* =========================================================
   수다방 모바일 최종 보정
   ========================================================= */

@media(max-width:600px){

    .cl-chat-page{
        width:100%;
        margin:8px auto 25px;
        padding:0 7px;
    }

    .cl-chat-box{
        border-radius:12px;
    }

    .cl-chat-head{
        padding:14px 13px;
    }

    .cl-chat-title-row{
        align-items:flex-start;
        gap:8px;
    }

    .cl-chat-kicker{
        font-size:8px;
    }

    .cl-chat-head h2{
        font-size:17px;
    }

    .cl-chat-head p{
        margin-top:5px;
        font-size:11px;
    }

    .cl-chat-head-actions{
        flex-direction:column;
        align-items:flex-end;
        gap:4px;
    }

    .cl-chat-online{
        padding:4px 7px;
        font-size:9px;
    }

    .cl-chat-admin-link{
        height:26px !important;
        padding:0 7px !important;
        border-radius:7px;
        font-size:8px !important;
    }

    .cl-chat-messages{
        height:58vh;
        min-height:330px;
        max-height:520px;
        padding:10px 9px;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .cl-chat-message{
        margin-bottom:9px;
        padding:9px 10px;
        border-radius:10px;
    }

    .cl-chat-message-top{
        gap:5px;
    }

    .cl-chat-badge{
        height:16px;
        padding:0 5px;
        font-size:8px;
    }

    .cl-chat-name{
        font-size:12px;
    }

    .cl-chat-time{
        font-size:9px;
    }

    .cl-chat-text{
        margin-top:5px;
        font-size:13px;
        line-height:1.55;
    }

    .cl-chat-image{
        max-width:100%;
        max-height:220px;
        border-radius:8px;
    }

    .cl-chat-guide{
        padding:7px 10px;
        font-size:9px;
        line-height:1.4;
    }

    .cl-chat-form{
        gap:5px;
        padding:8px;
    }

    .cl-chat-form input{
        height:42px;
        padding:0 11px;
        font-size:13px;
    }

    .cl-chat-form button[type="submit"]{
        flex:0 0 58px;
        height:42px;
        font-size:11px;
    }

    .cl-chat-image-wrap{
        gap:3px;
    }

    .cl-chat-image-btn{
        width:44px;
        min-width:44px;
        height:42px;
        padding:0;
        border-radius:8px;
    }

    .cl-chat-image-icon{
        font-size:17px;
    }

    #cl-chat-image-name{
        display:none;
    }

    .cl-chat-image-clear{
        width:25px !important;
        height:25px !important;
        min-width:25px !important;
        min-height:25px !important;
        border-radius:6px !important;
        font-size:15px !important;
    }

    .cl-chat-image-preview{
        width:38px;
        height:38px;
        left:0;
        bottom:47px;
    }

    .cl-chat-counter{
        padding:0 11px 6px;
        font-size:9px;
    }

    .cl-chat-floating{
        right:8px;
        bottom:8px;
    }

    .cl-chat-new,
    .cl-chat-latest{
        padding:7px 10px;
        font-size:10px;
    }

    .cl-chat-lightbox{
        padding:10px;
    }

    .cl-chat-lightbox img{
        max-width:96vw;
        max-height:82vh;
        border-radius:9px;
    }

    .cl-chat-lightbox-close{
        top:10px;
        right:10px;
        width:36px;
        height:36px;
    }
}


@media(max-width:600px){
    .cl-chat-form input{
        scroll-margin-bottom:120px;
    }

    .cl-chat-input-area{
        position:sticky;
        bottom:0;
        z-index:20;
    }
}



/* 수다방 고정 메시지 */
.cl-chat-pinned{
    display:none;
    padding:10px 14px 0;
    background:#0b1220;
}

.cl-chat-pinned-card{
    padding:12px 14px;
    border:1px solid rgba(234,179,8,.28);
    border-radius:11px;
    background:rgba(234,179,8,.05);
}

.cl-chat-pinned-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.cl-chat-pinned-title{
    color:#eab308;
    font-size:10px;
    font-weight:800;
}

.cl-chat-pinned-name{
    margin-top:7px;
    color:#f1f5f9;
    font-size:12px;
    font-weight:800;
}

.cl-chat-pinned-text{
    margin-top:4px;
    color:#d8dee7;
    font-size:12px;
    line-height:1.55;
    word-break:break-word;
}

.cl-chat-pinned-image{
    display:block;
    max-width:240px;
    max-height:160px;
    margin-top:8px;
    border-radius:8px;
}

.cl-chat-pin-button{
    padding:0 5px;
    border:0;
    background:transparent;
    color:#eab308;
    font-size:9px;
    cursor:pointer;
}

.cl-chat-pin-button:hover{
    color:#fff;
}

.cl-chat-report.reported{
    color:#4ade80 !important;
    cursor:default;
}

.cl-chat-report.reported:hover{
    color:#4ade80 !important;
}

.cl-chat-report:disabled{
    opacity:1;
}

.cl-chat-image-error{
    width:220px;
    height:90px;
    object-fit:none;
    border:1px dashed #475569;
    background:#0f1725;
}

.cl-chat-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:240px;
    color:#687587;
    font-size:12px;
    text-align:center;
}

.cl-chat-admin-link{
    gap:5px;
}

.cl-chat-report-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    box-sizing:border-box;
    border-radius:999px;
    background:#ef6b73;
    color:#fff !important;
    font-size:9px;
    font-weight:800;
    line-height:1;
}


.cl-chat-message.cl-chat-mine{
    border-color:rgba(94,231,255,.14);
    background:rgba(94,231,255,.035);
}

.cl-chat-message.cl-chat-mine .cl-chat-name{
    color:#72e9ff !important;
}

.cl-chat-message.cl-chat-mine .cl-chat-badge-member{
    background:rgba(94,231,255,.12);
}


/* 수다방 검색 */
.cl-chat-search{
    display:flex;
    gap:6px;
    padding:10px 14px;
    border-top:1px solid #263244;
    border-bottom:1px solid #263244;
    background:#0f1725;
}

.cl-chat-search input{
    flex:1;
    min-width:0;
    height:36px;
    padding:0 11px;
    border:1px solid #334155;
    border-radius:8px;
    outline:none;
    background:#0b1220;
    color:#fff;
    font-size:12px;
}

.cl-chat-search input:focus{
    border-color:#18b6d9;
}

.cl-chat-search button{
    height:36px;
    padding:0 10px;
    border:1px solid #334155;
    border-radius:8px;
    background:#111827;
    color:#94a3b8;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
}

.cl-chat-search button:hover{
    border-color:#18b6d9;
    color:#5ee7ff;
}

.cl-chat-search-results{
    display:none;
    position:relative;
    z-index:30;
    max-height:260px;
    overflow-y:auto;
    padding:8px 14px;
    background:#0b1220;
    border-bottom:1px solid #263244;
}

.cl-chat-search-item{
    padding:10px 11px;
    border:1px solid #263244;
    border-radius:9px;
    background:#111827;
    cursor:pointer;
}

.cl-chat-search-item + .cl-chat-search-item{
    margin-top:6px;
}

.cl-chat-search-item:hover{
    border-color:#18b6d9;
}

.cl-chat-search-item-top{
    display:flex;
    justify-content:space-between;
    gap:8px;
}

.cl-chat-search-item-top strong{
    color:#5ee7ff;
    font-size:11px;
}

.cl-chat-search-item-top span{
    color:#687587;
    font-size:9px;
}

.cl-chat-search-item-message{
    margin-top:4px;
    color:#d8dee7;
    font-size:11px;
    line-height:1.45;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cl-chat-search-empty{
    padding:18px;
    text-align:center;
    color:#687587;
    font-size:11px;
}

.cl-chat-search-highlight{
    animation:clChatSearchFlash 1.6s ease;
}

@keyframes clChatSearchFlash{
    0%,100%{box-shadow:none;}
    30%,70%{box-shadow:0 0 0 2px rgba(94,231,255,.28);}
}

@media(max-width:600px){
    .cl-chat-search{
        padding:8px;
        gap:4px;
    }

    .cl-chat-search button{
        padding:0 8px;
        font-size:9px;
    }
}

/* =========================================================
   CoinLab 수다방 2차 패키지
   ========================================================= */

.cl-chat-online{
    border:0;
    cursor:pointer;
}

.cl-chat-online-panel{
    display:none;
    position:relative;
    z-index:40;
    margin:0 14px 10px;
    padding:10px;
    border:1px solid #263244;
    border-radius:10px;
    background:#111827;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.cl-chat-online-panel.is-open{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.cl-chat-online-panel a{
    padding:6px 9px;
    border:1px solid #334155;
    border-radius:999px;
    color:#5ee7ff;
    background:#0b1220;
    font-size:10px;
    text-decoration:none;
}

.cl-chat-online-empty{
    color:#687587;
    font-size:10px;
}

.cl-chat-reply-bar{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 14px;
    border-top:1px solid #263244;
    background:rgba(94,231,255,.035);
}

.cl-chat-reply-bar.is-open{
    display:flex;
}

.cl-chat-reply-bar span{
    margin-right:6px;
    color:#5ee7ff;
    font-size:9px;
    font-weight:800;
}

.cl-chat-reply-bar strong{
    color:#f1f5f9;
    font-size:11px;
}

.cl-chat-reply-bar small{
    display:block;
    margin-top:2px;
    color:#687587;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:520px;
}

.cl-chat-reply-bar button{
    width:25px;
    height:25px;
    border:1px solid rgba(239,107,115,.45);
    border-radius:6px;
    background:rgba(239,107,115,.08);
    color:#ef6b73;
    cursor:pointer;
}

.cl-chat-reply-quote{
    margin-top:7px;
    padding:6px 8px;
    border-left:2px solid #18b6d9;
    background:rgba(24,182,217,.045);
    color:#8090a3;
    font-size:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
}

.cl-chat-reply-quote:hover{
    background:rgba(24,182,217,.09);
    color:#5ee7ff;
}

.cl-chat-quick-actions{
    position:absolute;
    top:34px;
    right:10px;
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}

.cl-chat-quick-btn,
.cl-chat-reaction{
    height:24px;
    padding:0 7px;
    border:1px solid #263244;
    border-radius:7px;
    background:#0b1220;
    color:#748398;
    font-size:9px;
    cursor:pointer;
}

.cl-chat-quick-btn:hover,
.cl-chat-reaction:hover,
.cl-chat-reaction.active{
    border-color:#18b6d9;
    color:#5ee7ff;
    background:rgba(24,182,217,.06);
}

.cl-chat-reaction-count{
    margin-left:3px;
}

.cl-chat-quick-actions{
    opacity:0;
    transition:opacity .15s;
}

.cl-chat-message:hover .cl-chat-quick-actions,
.cl-chat-message:focus-within .cl-chat-quick-actions{
    opacity:1;
}

@media (hover:none){
    .cl-chat-quick-actions{
        opacity:1;
    }
}

.cl-chat-date-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:14px 0;
    color:#687587;
    font-size:10px;
}

.cl-chat-date-divider span{
    padding:4px 12px;
    border:1px solid #263244;
    border-radius:999px;
    background:#0b1220;
}

.cl-chat-unread-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:14px 0;
    color:#5ee7ff;
    font-size:10px;
    font-weight:700;
}

.cl-chat-unread-divider span{
    padding:4px 12px;
    border:1px solid #18b6d9;
    border-radius:999px;
    background:rgba(24,182,217,.08);
}

.cl-chat-edit-form{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:4px;
}

.cl-chat-edit-input{
    width:100%;
    min-height:54px;
    padding:6px 8px;
    border:1px solid #263244;
    border-radius:7px;
    background:#0b1220;
    color:#e9ecf1;
    font-size:12px;
    font-family:inherit;
    resize:vertical;
}

.cl-chat-edit-actions{
    display:flex;
    gap:5px;
}

.cl-chat-ticker{
    display:inline-block;
    padding:1px 6px;
    margin:0 1px;
    border-radius:5px;
    background:var(--cl-gold-dim);
    color:var(--cl-gold);
    font-weight:700;
    font-size:.92em;
    cursor:pointer;
    white-space:nowrap;
}

.cl-chat-ticker:hover{
    background:var(--cl-gold);
    color:var(--cl-on-gold);
}

.cl-chat-price-popover{
    z-index:200;
    min-width:140px;
    padding:10px 12px;
    border:1px solid var(--cl-border);
    border-radius:10px;
    background:var(--cl-card);
    color:var(--cl-text);
    box-shadow:var(--cl-shadow-card);
    font-size:12px;
}

.cl-chat-price-popover-name{
    margin-bottom:4px;
    color:var(--cl-muted);
    font-size:11px;
}

.cl-chat-price-popover-price{
    margin-bottom:2px;
    color:var(--cl-text);
    font-weight:800;
    font-size:14px;
}

.cl-chat-price-popover-chg.is-gain{
    color:var(--cl-gain);
}

.cl-chat-price-popover-chg.is-loss{
    color:var(--cl-loss);
}

.cl-chat-market-badge{
    display:none;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    border:1px solid;
    font-size:9px;
    font-weight:700;
}

.cl-chat-market-badge.is-open{
    display:inline-block;
}

.cl-chat-market-badge.is-gain{
    color:var(--cl-gain);
    border-color:var(--cl-gain);
    background:var(--cl-gain-tint);
}

.cl-chat-market-badge.is-loss{
    color:var(--cl-loss);
    border-color:var(--cl-loss);
    background:var(--cl-loss-tint);
}

.cl-chat-market-badge.is-flat{
    color:#8090a3;
    border-color:#334155;
    background:rgba(255,255,255,.03);
}

.cl-chat-mention{
    display:inline-block;
    padding:1px 6px;
    margin:0 1px;
    border-radius:5px;
    background:rgba(94,231,255,.12);
    color:#5ee7ff;
    font-weight:700;
    font-size:.92em;
}

.cl-chat-message.cl-chat-mentioned-me{
    border-color:rgba(94,231,255,.25);
    background:rgba(94,231,255,.06);
}

.cl-chat-admin-page{
    max-width:950px;
    margin:35px auto 60px;
    padding:0 16px;
}

.cl-chat-admin-title{
    margin-bottom:20px;
}

.cl-chat-admin-title span{
    color:#eab308;
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}

.cl-chat-admin-title h1{
    margin:4px 0 0;
    color:#fff;
    font-size:24px;
}

.cl-chat-admin-section{
    margin-bottom:16px;
    padding:18px;
    border:1px solid #263244;
    border-radius:14px;
    background:#111827;
}

.cl-chat-admin-section h2{
    margin:0 0 14px;
    color:#fff;
    font-size:15px;
}

.cl-chat-admin-form{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.cl-chat-admin-form input{
    min-width:0;
    height:38px;
    padding:0 10px;
    box-sizing:border-box;
    border:1px solid #334155;
    border-radius:8px;
    outline:none;
    background:#0b1220;
    color:#fff;
    font-size:11px;
}

.cl-chat-admin-form input:first-of-type{
    flex:1;
}

.cl-chat-admin-form button{
    height:38px;
    padding:0 12px;
    border:1px solid #334155;
    border-radius:8px;
    background:#0b1220;
    color:#5ee7ff;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}

.cl-chat-admin-list{
    margin-top:12px;
}

.cl-chat-admin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-top:1px solid #1d293b;
}

.cl-chat-admin-row strong{
    color:#e5e7eb;
    font-size:11px;
}

.cl-chat-admin-row span,
.cl-chat-admin-row small{
    display:block;
    margin-top:2px;
    color:#687587;
    font-size:9px;
}

.cl-chat-admin-row button{
    height:30px;
    padding:0 9px;
    border:1px solid #334155;
    border-radius:7px;
    background:#0b1220;
    color:#94a3b8;
    font-size:9px;
    cursor:pointer;
}

.cl-chat-admin-row button:hover{
    border-color:#ef6b73;
    color:#ef6b73;
}

@media(max-width:600px){
    .cl-chat-reply-bar{
        padding:7px 9px;
    }

    .cl-chat-reply-bar small{
        max-width:210px;
    }

    .cl-chat-admin-page{
        margin-top:18px;
        padding:0 10px;
    }

    .cl-chat-admin-section{
        padding:13px;
    }

    .cl-chat-admin-form input{
        width:100%;
        flex:1 1 100%;
    }

    .cl-chat-admin-form button{
        width:100%;
    }
}

.cl-chat-guide-info{
    margin:16px 14px 6px;
    border:1px solid var(--cl-border);
    border-radius:var(--cl-radius);
    background:var(--cl-card);
    overflow:hidden;
}

.cl-chat-guide-info-summary{
    cursor:pointer;
    padding:12px 16px;
    color:var(--cl-text);
    font-size:12px;
    font-weight:700;
    list-style:none;
}

.cl-chat-guide-info-summary::-webkit-details-marker{
    display:none;
}

.cl-chat-guide-info-summary::marker{
    content:'';
}

.cl-chat-guide-info-summary::after{
    content:'▾';
    float:right;
    color:var(--cl-muted);
    transition:transform .15s;
}

.cl-chat-guide-info[open] .cl-chat-guide-info-summary::after{
    transform:rotate(180deg);
}

.cl-chat-guide-info-body{
    padding:2px 16px 16px;
    border-top:1px solid var(--cl-border);
}

.cl-chat-guide-info-section{
    margin-top:14px;
}

.cl-chat-guide-info-section h4{
    margin:0 0 8px;
    color:var(--cl-text);
    font-size:11px;
    font-weight:800;
}

.cl-chat-guide-table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
}

.cl-chat-guide-table th,
.cl-chat-guide-table td{
    padding:7px 8px;
    border-bottom:1px solid var(--cl-border);
    text-align:left;
    color:var(--cl-muted);
    vertical-align:top;
}

.cl-chat-guide-table th{
    color:var(--cl-muted-2);
    font-weight:700;
    font-size:10px;
}

.cl-chat-guide-table td:first-child{
    color:var(--cl-text);
    font-weight:600;
    white-space:nowrap;
}

.cl-chat-guide-table code{
    padding:1px 5px;
    border-radius:5px;
    background:var(--cl-bg-elev);
    color:var(--cl-text);
    font-family:var(--cl-mono);
    font-size:10px;
}

@media(max-width:600px){
    .cl-chat-guide-info{
        margin:14px 8px 4px;
    }

    .cl-chat-guide-table{
        font-size:10px;
    }

    .cl-chat-guide-table th,
    .cl-chat-guide-table td{
        padding:6px 5px;
    }

    .cl-chat-guide-table td:first-child{
        white-space:normal;
    }
}

/* ============================================================
   #bo_list / #bo_v 태블릿 폭(600~900px) 반응형 보강 (2026-08-19)
   사전 감사 결과: #bo_v(게시글 뷰)는 어떤 폭에서도 padding/폰트 조정이 전혀 없었고,
   #bo_list(목록, list.skin.php 내 .cl-board-list)는 640px에서 표->카드 완전 전환은
   이미 있었지만 그 위 641~900px 구간(태블릿 가로/좁은 데스크탑 창)은 번호·날짜·조회
   3개 고정폭(80px x3=240px) 컬럼 + 28px 컨테이너 패딩이 그대로라 제목 칸이 상대적으로
   좁아짐. 새 breakpoint를 만들지 않고 이 파일에 이미 있는 관례값만 재사용:
   900px(#aside 스택/footer-grid/TOC와 동일 - "사이드바·보조열이 접히는 지점"),
   600px(.cl-chat-* 등 다수 컴포넌트가 쓰는 "좁은 모바일" 지점). */
@media (max-width:900px){
  #bo_list, #bo_v{ padding:18px !important; }
  #bo_vc{ padding:14px !important; }
  .cl-board-list table.blist thead th.num,
  .cl-board-list table.blist thead th.date,
  .cl-board-list table.blist thead th.view{ width:56px !important; }
}
@media (max-width:600px){
  #bo_list, #bo_v{ padding:14px !important; }
  #bo_vc{ padding:12px !important; }
}

/* ============================================================
   반응형 리팩터링 5단계 - 전역 스코프 나머지 고정폭/gap 보강 (2026-08-19)
   이전 감사(A/B/C 191건)를 전부 selector 단위로 다른 @media 블록과 교차검증한 결과,
   대다수는 이미 다른 곳에서 처리돼 있었음(그리드 컬럼 축소, ellipsis 말줄임, 카드
   전체폭 스택 등). 실제로 어디에도 대응이 없고 진짜 넘침/압박 위험이 있는 것만 3건
   추림 - 새 breakpoint 없이 기존 640px 관례 재사용.

   1) #container .cl-wrap{padding:0 24px !important} - #container_wr(#hd)와 별개로
      #container 내부 섹션 wrap 전용 규칙인데, !important+ID특이도라 .cl-wrap의 860px
      패딩 축소(16px)가 이 컨텍스트에선 전혀 안 먹히고 있었음(진짜 버그) - 홈페이지/
      autotrade 등 #container 내부 모든 섹션이 640px 이하에서도 계속 24px 고정.
   2) .cl-content-wrapper{padding:30px} - 정적 콘텐츠 페이지(회사소개/약관 등) 카드,
      max-width:1200px는 있지만 30px 4방향 고정 패딩은 어떤 폭에서도 안 줄어듦.
   3) .cl-ticker{padding:26px 24px} - 홈 시세 티커 카드. 형제 카드들(.cl-today-trade-card/
      .cl-operator-card 등)은 이미 640px에서 패딩이 줄어드는데 이 카드만 빠져있었음
      (일관성 보강, 내부 .cl-ticker-stats는 1fr 그리드라 넘침 자체는 없었음). */
@media (max-width:640px){
  #container .cl-wrap{ padding:0 16px !important; }
  .cl-content-wrapper{ padding:18px; }
  .cl-ticker{ padding:18px 16px; }
}

/* ============================================================
   서브메뉴(자동매매 하위: 실시간 대시보드/추세추종 거래) - 2026-08-21
   데스크톱: nav#gnb .cl-nav-item 안에 hover/클릭 드롭다운
   모바일: .cl-classic-nav 상위 항목 탭 -> .cl-classic-sub 아코디언
   색상은 --cl-* 토큰만 사용(하드코딩 금지 규칙 준수).
   ============================================================ */

/* ---- 데스크톱 드롭다운 ---- */
.cl-nav-item{ position:relative; display:inline-flex; align-items:center; }
.cl-nav-trigger{ display:inline-flex; align-items:center; gap:4px; background:none; cursor:pointer; }
.cl-nav-caret{ font-size:10px; line-height:1; opacity:.7; transition:transform .2s ease; }
.cl-nav-item.is-open .cl-nav-caret{ transform:rotate(180deg); }

.cl-nav-dropdown{
  position:absolute; top:100%; left:0; margin-top:4px;
  min-width:180px; max-height:0; overflow:hidden;
  background:var(--cl-bg-elev); border:1px solid transparent; border-radius:10px;
  box-shadow:var(--cl-shadow-card); z-index:50;
  transition:max-height .22s ease;
}
.cl-nav-item.has-sub:hover .cl-nav-dropdown,
.cl-nav-item.has-sub.is-open .cl-nav-dropdown{
  max-height:220px; border-color:var(--cl-border); padding:6px 0;
}
.cl-nav-dropdown-link{
  display:block; padding:9px 18px; font-size:13.5px; font-weight:600;
  color:var(--cl-text); text-decoration:none; white-space:nowrap;
}
.cl-nav-dropdown-link:hover{ background:var(--cl-card-hover); color:var(--cl-gold); }

/* ---- 모바일 .cl-classic-nav 한 줄 유지 ----
   overflow-x:auto는 폰트/패딩 축소로도 안 들어가는 극단적으로 좁은 화면에서
   항목이 잘려서 안 보이는 사고를 막기 위한 안전장치(가로 스크롤 허용, 평소엔 비활성). */
.cl-classic-nav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.cl-classic-nav::-webkit-scrollbar{ display:none; }
.cl-classic-item.cl-classic-toggle{
  background:transparent; border:none; border-right:1px solid rgba(0,0,0,0.06);
  font:inherit; font-family:var(--cl-serif, 'Noto Serif KR', serif); cursor:pointer;
  display:inline-flex; align-items:center; gap:3px;
}
[data-theme="dark"] .cl-classic-item.cl-classic-toggle{ border-color:rgba(255,255,255,0.06); }
.cl-classic-caret{ font-size:10px; line-height:1; opacity:.7; transition:transform .2s ease; }
.cl-classic-toggle.is-open .cl-classic-caret{ transform:rotate(180deg); }

.cl-classic-sub{
  max-height:0; overflow:hidden; border-top:1px solid transparent;
  background:var(--cl-bg-elev); transition:max-height .25s ease;
}
.cl-classic-sub.is-open{ max-height:160px; border-color:var(--cl-border); }
.cl-classic-sub-link{
  display:block; padding:12px 16px; font-size:13px; font-weight:600;
  color:var(--cl-text); text-decoration:none; border-bottom:1px solid var(--cl-border);
}
.cl-classic-sub-link:last-child{ border-bottom:none; }
.cl-classic-sub-link:active{ background:var(--cl-card-hover); }

/* 480px 이하(360~430px 실기기 전부 포함): 상위 6개(매매일지/기술노트/자동매매▾/
   공지사항/자유게시판/Q&A) 텍스트 폭 계산 결과 421~430px 구간은 기존 420px
   breakpoint 밖이라 축소가 전혀 안 먹혔고, 420px 이하도 1단계 축소만으론 실제
   합산 폭(~386px)이 360px 기기에서 넘쳤다(2026-08-21 재검증) - 임계값을 480px로
   넓히고 패딩/폰트를 한 단계 더 축소해 360px에서도 여유(~322px)를 확보.
   (기존 @media(max-width:420px) .cl-classic-item 규칙보다 뒤에 와야 이긴다) */
@media(max-width:480px){
  .cl-classic-item{ padding:6px 6px; font-size:10.5px; }
  .cl-classic-toggle{ gap:2px; }
  .cl-classic-caret{ font-size:8px; }
}


/* ===== 회원 로그인 / 비밀번호확인 스킨 보강 (2026-09-10) =====
   skin/member/basic/login.skin.php · member_confirm.skin.php 는 스톡 그누보드 마크업
   (#mb_login .mbskin / .frm_input / .btn_submit)인데, 이 스킨이 로드하는
   skin/member/basic/style.css 가 register 전용 .cl-reg-* 규칙으로 교체돼 있어
   로그인 폼이 무스타일로 렌더되던 것을 보강. 모든 규칙을 #mb_login / #mb_confirm 하위로만 스코프. */

/* 스킨이 자체 <h1>(로그인 / 회원 비밀번호 확인)을 출력하므로 _site_header.php 의
   #container_title 과 제목이 2중으로 보인다 → 해당 페이지에서만 #container_title 숨김.
   (:has() 는 coinlab.css 내 기존 사용처 있음 - 873,3982행) */
#container:has(> #mb_login) > #container_title,
#container:has(> #mb_confirm) > #container_title{ display:none; }

#mb_login.mbskin, #mb_confirm.mbskin{ max-width:440px; margin:8px auto 44px; }
#mb_login .mbskin_box, #mb_confirm.mbskin{
  background:var(--cl-card); border:1px solid var(--cl-border);
  border-radius:var(--cl-radius); padding:30px 28px 26px;
  box-shadow:0 6px 20px rgba(15,23,42,.05);
}
html[data-theme="dark"] #mb_login .mbskin_box,
html[data-theme="dark"] #mb_confirm.mbskin{ box-shadow:0 8px 24px rgba(0,0,0,.35); }
#mb_login h1, #mb_confirm h1{
  font-family:var(--cl-serif); font-size:22px; font-weight:800; letter-spacing:-.02em;
  color:var(--cl-text); text-align:center; margin:0 0 20px;
}
#mb_login .mb_log_cate{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:13px; color:var(--cl-muted-2); margin:0 0 18px;
}
#mb_login .mb_log_cate h2{ font-size:13px; font-weight:700; color:var(--cl-text); margin:0; }
#mb_login .mb_log_cate .join{ color:var(--cl-gold); font-weight:700; text-decoration:none; }
#mb_login .mb_log_cate .join:hover{ text-decoration:underline; }
#login_fs, #mb_confirm fieldset{
  border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
#mb_login .frm_input, #mb_confirm .frm_input{
  width:100%; height:46px; box-sizing:border-box; padding:0 14px; margin:0;
  border:1px solid var(--cl-border); border-radius:10px;
  background:var(--cl-input-bg); color:var(--cl-text); font-size:14px;
}
#mb_login .frm_input:focus, #mb_confirm .frm_input:focus{
  outline:none; border-color:var(--cl-gold);
}
#mb_login .btn_submit, #mb_confirm .btn_submit{
  width:100%; height:48px; margin-top:4px; border:0; border-radius:10px;
  font-size:15px; font-weight:800; cursor:pointer;
}
#login_info{
  display:flex; flex-direction:column; gap:9px; margin-top:14px;
  font-size:12.5px; color:var(--cl-muted-2);
}
#login_info a{ color:var(--cl-muted-2); text-decoration:none; }
#login_info a:hover{ text-decoration:underline; color:var(--cl-text); }
#login_info .login_if_auto label{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
#mb_confirm p{ text-align:center; font-size:13.5px; color:var(--cl-muted); line-height:1.6; margin:0 0 20px; }
#mb_confirm .confirm_id{ display:block; font-size:12px; color:var(--cl-muted-2); text-align:center; }
#mb_confirm #mb_confirm_id{ display:block; font-weight:700; color:var(--cl-text); text-align:center; margin:0 0 8px; }
/* ===== /회원 로그인·확인 스킨 보강 ===== */