/* ==========================================================================
   코린이 (corin2) 레이아웃 — 코인판식 커뮤니티 껍데기
   tokens/components: /common/css/corin2/
   ========================================================================== */
body {
	margin: 0; background: var(--cp-bg); color: var(--cp-ink);
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
	font-size: 13px; letter-spacing: -0.01em; line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ── 헤더 ── */
.cp-head { background: var(--cp-head-bg); border-bottom: 1px solid var(--cp-line); position: sticky; top: 0; z-index: 100; }
.cp-head-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; gap: 20px; }
.cp-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 20px; font-weight: 900; color: var(--cp-brand); flex-shrink: 0; }
.cp-logo img { width: 30px; height: 30px; }
.cp-gnb { flex: 1; min-width: 0; overflow-x: auto; }
/* 데스크톱: 메뉴 5칸이라 가로스크롤 불필요 — overflow를 풀어야 드롭다운 패널이 잘리지 않음 */
@media (min-width: 901px){ .cp-gnb{ overflow: visible; } }
.cp-gnb ul { display: flex; align-items: center; gap: 1px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.cp-gnb li a { display: inline-block; padding: 8px 8px; font-size: 13px; font-weight: 600; color: var(--cp-sub); text-decoration: none; border-radius: 6px; }
.cp-gnb li a:hover { color: var(--cp-brand); background: var(--cp-brand-soft); }
.cp-gnb li.on a { color: var(--cp-brand); font-weight: 700; }
.cp-account { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; }
.cp-account a { text-decoration: none; color: var(--cp-sub); font-weight: 600; white-space: nowrap; }
.cp-account a:hover { color: var(--cp-ink); }
.cp-account .cp-join { background: var(--cp-brand); color: #fff; padding: 7px 14px; border-radius: 6px; }
.cp-account .cp-join:hover { background: var(--cp-brand-h); color: #fff; }
.cp-account .cp-nick { font-weight: 700; color: var(--cp-ink); }

/* ── 본문 + 사이드바 ── */
.cp-body { max-width: 1280px; margin: 20px auto; padding: 0 16px; display: flex; gap: 20px; align-items: flex-start; }
.cp-content { flex: 1; min-width: 0; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: var(--cp-radius); padding: 16px; box-shadow: var(--cp-shadow); }
.cp-content:has(.board){ padding: 12px 14px; box-shadow: none; }
.cp-content:has(.board){ padding: 12px 14px; box-shadow: none; }
.cp-side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.cp-card { background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 10px; padding: 14px; }
.cp-card-head { font-size: 13px; font-weight: 800; color: var(--cp-ink); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--cp-brand); }
.cp-side-link { display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--cp-ink); font-weight: 600; font-size: 13px; }
.cp-side-link:hover { background: var(--cp-brand-soft); color: var(--cp-brand); }
.cp-side-note { color: var(--cp-sub); font-size: 12.5px; margin: 0 0 12px; line-height: 1.6; }
.cp-side-btn { display: block; text-align: center; background: var(--cp-brand); color: #fff; padding: 10px; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 13px; }
.cp-side-btn:hover { background: var(--cp-brand-h); }

/* ── 실시간 시세 위젯 ── */
.cp-ticker .cp-card-head { display: flex; align-items: center; }
.cp-ticker-src { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--cp-faint); }
.cp-ticker-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #1e8e3e; margin-left: 5px; animation: cpPulse 1.5s infinite; }
@keyframes cpPulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.cp-ticker ul { list-style: none; margin: 0; padding: 0; }
.cp-ticker li { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--cp-line); font-size: 12.5px; }
.cp-ticker li:last-child { border-bottom: none; }
.cp-ticker .cp-tk-loading { color: var(--cp-faint); justify-content: center; }
.cp-tk-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #fff; }
.cph-coin-head { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.cph-coin-icon { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #fff; }
.cp-tk-name { font-weight: 600; color: var(--cp-ink); flex: 1; white-space: nowrap; }
.cp-tk-price { color: var(--cp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-tk-rate { width: 58px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-tk-rate.up { color: var(--cp-up); }
.cp-tk-rate.dn { color: var(--cp-down); }

/* ── 홈 포털 대시보드 ── */
.cp-home { display: flex; flex-direction: column; gap: 16px; }
.cp-home-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cph-metric { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--cp-line); border-radius: 10px; background: var(--cp-panel); text-decoration: none; color: inherit; transition: border-color .12s; }
.cph-metric:hover { border-color: var(--cp-brand); }
.cph-lbl { font-size: 11.5px; font-weight: 600; color: var(--cp-sub); }
.cph-val { font-size: 22px; font-weight: 800; color: var(--cp-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cph-metric.up .cph-val { color: var(--cp-up); }
.cph-metric.dn .cph-val { color: var(--cp-down); }
.cph-sub { font-size: 11px; color: var(--cp-faint); font-variant-numeric: tabular-nums; }
.cph-coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cph-coin { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--cp-line); border-radius: 9px; background: var(--cp-panel); }
.cph-cn { font-size: 12px; font-weight: 700; color: var(--cp-ink); }
.cph-cp { font-size: 14px; font-weight: 700; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.cph-cu { font-size: 11px; color: var(--cp-sub); font-variant-numeric: tabular-nums; }
.cph-cu em { font-style: normal; font-size: 9.5px; color: var(--cp-faint); font-weight: 700; }
.cph-cc { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cph-cc.up { color: var(--cp-up); } .cph-cc.dn { color: var(--cp-down); }
.cph-load { padding: 12px 10px; color: var(--cp-faint); font-size: 12px; list-style: none; }
.cph-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cph-tool { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; border-radius: 10px; background: var(--cp-brand); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; }
.cph-tool:hover { background: var(--cp-brand-h); }
@media (max-width: 640px) {
	.cp-home-metrics { grid-template-columns: repeat(2, 1fr); }
	.cph-coins { grid-template-columns: repeat(2, 1fr); }
	.cp-home-posts { grid-template-columns: 1fr; }
	.cph-tools { grid-template-columns: repeat(2, 1fr); }
	.cph-val { font-size: 19px; }
}

/* ── 푸터 ── */
.cp-foot { border-top: 1px solid var(--cp-line); margin-top: 30px; background: var(--cp-head-bg); }
.cp-foot-inner { max-width: 1280px; margin: 0 auto; padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; }
.cp-foot-brand { font-weight: 800; color: var(--cp-brand); font-size: 14px; }
.cp-foot-text { color: var(--cp-faint); font-size: 12px; }

/* ── 모바일 ── */
@media (max-width: 900px) {
	/* column 전환시 align-items:flex-start(데스크톱 잔재)가 자식을 max-content 폭으로 만들어
	   내부 고정폭(에디터 등)이 판을 밀었음 → stretch + width 강제 */
	.cp-body { flex-direction: column; align-items: stretch; }
	.cp-content { width: 100%; max-width: 100%; box-sizing: border-box; }
	.cp-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
	.cp-card { flex: 1; min-width: 240px; }
}
@media (max-width: 600px) {
	.cp-head-inner { gap: 10px; padding: 0 12px; }
	.cp-logo span { display: none; }
	.cp-gnb li a { padding: 0 12px; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }
	.cp-account .cp-login { display: none; }
	.cp-content { padding: 14px; border-radius: 8px; }
}

/* 야간루프 1회차: 회원 모듈(로그인/가입) 모바일 고정폭 해제 */
@media (max-width:600px) {
	.cp-content section.xm, .cp-content .xm { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
	.cp-content .xm input[type="text"], .cp-content .xm input[type="password"], .cp-content .xm input[type="email"],
	.cp-content .xm input[type="tel"], .cp-content .xm select { max-width: 100%; box-sizing: border-box; }
	.cp-content .xm fieldset, .cp-content .xm .x_control-group { max-width: 100%; }
}

/* 야간루프 1회차b: 모바일 본문 가로스크롤 안전망 (회원모듈 등 고정폭 잔재 클리핑) */
@media (max-width: 600px) {
	.cp-content { overflow-x: hidden; }
	.cp-content .xm li, .cp-content .xm ul { max-width: 100%; }
}

/* ============================================================
   야간루프 2회차 (Batch A): 모바일 헤더/회원폼/버튼/터치/다크 정비
   ============================================================ */

/* [mobile-ux high] GNB 우측 페이드 — '더 있다' 시각단서 */
@media (max-width: 900px){
  .cp-gnb{ -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent); mask-image:linear-gradient(90deg,#000 80%,transparent); }
  .cp-gnb::-webkit-scrollbar{ height:0; }
}

/* [mobile-ux high] 모바일 로그인 진입점 복원 (기존 display:none 무력화) */
@media (max-width: 600px){
  .cp-account .cp-login{ display:inline-block !important; padding:7px 10px; font-size:13px; font-weight:700; color:var(--cp-brand); }
  .cp-account{ gap:6px; }
  .cp-account .cp-join{ padding:7px 12px; }
}

/* [designer high] 전역 버튼 통일 — 구 XE bevel(gradient/radius2) 제거 */
.cp-content .btn, .cp-content input[type="submit"], .cp-content button.btn, .cp-content .submit{
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef1f5; background-image:none !important; box-shadow:none !important; text-shadow:none !important;
  border:1px solid var(--cp-line); border-radius:8px; min-height:40px; padding:0 16px;
  font-size:14px; font-weight:600; color:var(--cp-ink); text-decoration:none; cursor:pointer; line-height:1;
}
.cp-content .btn:hover{ border-color:var(--cp-brand); color:var(--cp-brand); }
.cp-content .btn-inverse, .cp-content input[type="submit"].btn-inverse, .cp-content .submit.btn-inverse{
  background:var(--cp-brand) !important; border-color:var(--cp-brand); color:#fff !important;
}
.cp-content .btn-inverse:hover{ background:var(--cp-brand-h) !important; color:#fff !important; }

/* [designer high] 회원 로그인/가입 카드 — Bootstrap2 잔재 → corin2 톤 */
.cp-content .signin{ max-width:400px; margin:24px auto; background:var(--cp-panel); border:1px solid var(--cp-line); border-radius:12px; overflow:hidden; }
.cp-content .signin .login-header{ padding:18px 22px; border-bottom:1px solid var(--cp-line); background:var(--cp-head-bg); }
.cp-content .signin .login-header h1{ margin:0; font-size:18px; font-weight:800; color:var(--cp-ink); }
.cp-content .signin .login-header i{ color:var(--cp-brand); }
.cp-content .signin .login-body{ padding:20px 22px; }
.cp-content .signin .login-footer{ padding:14px 22px; border-top:1px solid var(--cp-line); background:var(--cp-head-bg); font-size:13px; text-align:center; color:var(--cp-sub); }
.cp-content .signin .login-footer a{ color:var(--cp-brand); text-decoration:none; }
.cp-content .signin .control-group{ margin:0 0 12px; }
.cp-content .signin .submit{ width:100%; margin-top:6px; }

/* 회원 입력창 공통 */
.cp-content .signin input[type="text"], .cp-content .signin input[type="password"], .cp-content .signin input[type="email"],
.cp-content .form-horizontal input[type="text"], .cp-content .form-horizontal input[type="password"],
.cp-content .form-horizontal input[type="email"], .cp-content .form-horizontal input[type="tel"], .cp-content .form-horizontal select, .cp-content .form-horizontal textarea{
  width:100%; box-sizing:border-box; min-height:44px; padding:0 12px;
  border:1px solid var(--cp-line); border-radius:8px; font-size:15px; color:var(--cp-ink); background:var(--cp-panel);
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
}
.cp-content .form-horizontal textarea{ padding:10px 12px; min-height:96px; }
.cp-content .signin input:focus, .cp-content .form-horizontal input:focus, .cp-content .form-horizontal select:focus{ outline:none; border-color:var(--cp-link); box-shadow:0 0 0 3px var(--cp-focus-ring); }

/* [designer high] 회원가입 form-horizontal — 라벨 상단배치(전 폭 대응) */
.cp-content .form-horizontal{ max-width:560px; margin:20px auto; }
.cp-content .form-horizontal .control-group{ margin:0 0 16px; }
.cp-content .form-horizontal .control-label{ display:block; float:none; width:auto; text-align:left; margin:0 0 6px; padding:0; font-size:13px; font-weight:700; color:var(--cp-ink); }
.cp-content .form-horizontal .controls{ margin-left:0; }
.cp-content .form-horizontal .help-inline, .cp-content .form-horizontal .help-block{ display:block; margin:6px 0 0; font-size:12px; color:var(--cp-faint); }
.cp-content .form-horizontal .agreement{ border:1px solid var(--cp-line); border-radius:8px; padding:14px 16px; margin:0 0 16px; background:var(--cp-head-bg); }
.cp-content .form-horizontal .agreement .title{ font-weight:700; margin-bottom:8px; }
.cp-content .form-horizontal .agreement .text{ max-height:120px; overflow:auto; font-size:12px; color:var(--cp-sub); }
.cp-content .form-horizontal .btnArea{ display:flex; gap:8px; margin-top:8px; }
.cp-content .form-horizontal .btnArea .pull-right{ order:2; margin-left:auto; }
.cp-content .form-horizontal .btnArea .pull-left{ order:1; }

/* [designer low / mobile] 스팸 유인 홈페이지 필드 숨김(가입·댓글) */
.cp-content .control-group:has(input[name="homepage"]){ display:none; }
.cp-content input[name="homepage"]{ display:none; }

/* [mobile-ux medium] 터치타겟 44px — 체크박스/라디오 + 라벨 */
@media (max-width: 768px){
  .cp-content input, .cp-content textarea, .cp-content select{ font-size:16px !important; } /* iOS 포커스 확대 방지 */
  .cp-content input[type="checkbox"], .cp-content input[type="radio"]{ width:20px; height:20px; vertical-align:middle; }
  .cp-content .control-group label{ display:inline-flex; align-items:center; gap:6px; min-height:36px; }
  .cp-content .btn, .cp-content input[type="submit"], .cp-content .submit{ min-height:44px; }
}

/* [mobile-ux high] 회원가입 폼 모바일 — 라벨/입력 세로 스택 확정 */
@media (max-width: 640px){
  .cp-content .form-horizontal, .cp-content .signin{ max-width:100%; }
  .cp-content .form-horizontal .control-label, .cp-content .form-horizontal .controls{ width:100% !important; box-sizing:border-box; }
  .cp-content .form-horizontal input, .cp-content .form-horizontal select, .cp-content .form-horizontal textarea{ width:100% !important; max-width:100% !important; }
}

/* [designer high] 다크모드 — 로그인/가입 카드(흰 블록 잔존 해소) */
html.dark .cp-content .signin, html.rx_dark .cp-content .signin,
html.dark .cp-content .form-horizontal .agreement, html.rx_dark .cp-content .form-horizontal .agreement{ background:var(--cp-panel); border-color:var(--cp-line); }
html.dark .cp-content .signin input, html.rx_dark .cp-content .signin input,
html.dark .cp-content .form-horizontal input, html.rx_dark .cp-content .form-horizontal input,
html.dark .cp-content .form-horizontal select, html.rx_dark .cp-content .form-horizontal select,
html.dark .cp-content .form-horizontal textarea, html.rx_dark .cp-content .form-horizontal textarea{ background:#0d1117; color:var(--cp-ink); border-color:var(--cp-line); }

/* [seo] 홈 h1 슬로건 */
.cp-home-h1{ font-size:20px; font-weight:800; color:var(--cp-ink); margin:0 0 14px; letter-spacing:-.3px; }
.cp-home-h1 span{ font-weight:600; color:var(--cp-sub); font-size:15px; }
@media (max-width:640px){ .cp-home-h1{ font-size:17px; } .cp-home-h1 span{ display:block; font-size:13px; margin-top:2px; } }

/* [perf/CWV] 홈 비동기 위젯 공간예약(컨테이너 단위) — 로드시 레이아웃 시프트(CLS) 제거 */
.cp-home-metrics{ min-height:94px; }
#cphCoins{ min-height:100px; }
.cp-home-posts{ min-height:300px; }
.cp-ticker #cpTicker{ min-height:170px; }
@media (max-width:640px){
  .cp-home-metrics{ min-height:191px; }
  #cphCoins{ min-height:318px; }
  .cp-home-posts{ min-height:560px; }
  .cp-ticker #cpTicker{ min-height:170px; }
}

/* [designer low] 회원가입 스팸유인 레거시필드(블로그) 숨김 — homepage와 함께 */
.cp-content .control-group:has(input[name="blog"]){ display:none; }
.cp-content input[name="blog"]{ display:none; }

/* [marketer] 가입 마찰↓: 생일 필드 숨김(블로그/홈페이지에 이어) */
.cp-content .control-group:has(input[name="birthday"]), .cp-content .control-group:has(select[name*="birthday"]){ display:none; }

/* [marketer] 첫방문 가입 CTA 밴드(로그아웃시) */
.cp-cta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:14px 18px; background:linear-gradient(90deg,var(--cp-brand-soft-strong),var(--cp-brand-soft)); border:1px solid var(--cp-brand-border); border-radius:12px; }
.cp-cta-text{ font-size:14px; font-weight:600; color:var(--cp-ink); }
.cp-cta-btn{ flex-shrink:0; display:inline-flex; align-items:center; background:var(--cp-brand); color:#fff; padding:10px 20px; border-radius:8px; font-weight:800; font-size:14px; text-decoration:none; }
.cp-cta-btn:hover{ background:var(--cp-brand-h); color:#fff; }
/* [marketer] 홈 활력 지표 스트립 */
.cp-vitals{ display:flex; gap:20px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; background:var(--cp-head-bg); border:1px solid var(--cp-line); border-radius:10px; }
.cp-vital{ font-size:13px; color:var(--cp-sub); }
.cp-vital b{ color:var(--cp-brand); font-weight:800; font-size:15px; margin-right:3px; }
@media (max-width:640px){ .cp-cta{ flex-direction:column; align-items:stretch; text-align:center; } .cp-cta-btn{ justify-content:center; } .cp-vitals{ justify-content:space-around; gap:10px; } }

/* [marketer] 가입 마찰↓: 이름(user_name) 숨김 — 닉네임만 사용(선택필드라 안전) */
.cp-content .control-group:has(input[name="user_name"]){ display:none; }

/* [a11y] 본문 바로가기 - 포커스시만 노출 */
.cp-skip{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--cp-brand); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; text-decoration:none; }
.cp-skip:focus{ left:0; }

/* [a11y] 커스텀 인터랙티브 요소 포커스 링 통일 */
a:focus-visible, button:focus-visible, .cph-metric:focus-visible, .cph-tool:focus-visible, .cp-cta-btn:focus-visible, .cph-tool:focus-visible, .cp-side-link:focus-visible{ outline:2px solid var(--cp-brand); outline-offset:2px; border-radius:4px; }
/* [seo] 푸터 키워드 내부링크 */
.cp-foot-links{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:2px; }
.cp-foot-links a{ font-size:12px; color:var(--cp-sub); text-decoration:none; }
.cp-foot-links a:hover{ color:var(--cp-brand); text-decoration:underline; }

/* [theme] 라이트/다크 토글 버튼 */
.cp-theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; margin-right:4px; border:1px solid var(--cp-line); background:transparent; border-radius:8px; color:var(--cp-sub); cursor:pointer; vertical-align:middle; }
.cp-theme-btn:hover{ color:var(--cp-brand); border-color:var(--cp-brand); }
.cp-theme-btn svg{ display:block; }
.cp-theme-btn .cp-th-sun{ display:none; }
html.dark .cp-theme-btn .cp-th-sun{ display:block; }
html.dark .cp-theme-btn .cp-th-moon{ display:none; }
@media (max-width:600px){ .cp-theme-btn{ width:34px; height:34px; } }

/* [onchain-menu] 온체인 드롭다운 (body portal) */


/* GNB 드롭다운 (2026-07-09 오너지시: 온체인 기능 메뉴 그룹핑) */
.cp-gnb li.cp-dd { position: relative; }
.cp-gnb li.cp-dd > a::after { content: ""; display: inline-block; margin-left: 5px; vertical-align: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4.5px solid currentColor; opacity: .55; }
.cp-gnb .cp-dd-menu { display: none; position: absolute; top: calc(100% + 2px); left: 0; min-width: 138px; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.12); padding: 6px; margin: 0; list-style: none; z-index: 60; }
.cp-gnb li.cp-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; }
.cp-gnb li.cp-dd:hover > .cp-dd-menu, .cp-gnb li.cp-dd:focus-within > .cp-dd-menu, .cp-gnb li.cp-dd.open > .cp-dd-menu { display: block; }
.cp-gnb .cp-dd-menu li { display: block; }
.cp-gnb .cp-dd-menu a { display: block; padding: 8px 12px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
.cp-gnb .cp-dd-menu a:hover { background: var(--cp-brand-soft); color: var(--cp-brand); }
.cp-gnb a.on { color: var(--cp-brand); font-weight: 700; }
@media (max-width: 900px) {
  /* 모바일: 드롭다운 해체 -> 가로 스크롤 평면 메뉴에 병합 */
  .cp-gnb li.cp-dd { display: contents; }
  .cp-gnb li.cp-dd > a { display: none; }
  .cp-gnb .cp-dd-menu { display: contents; }
  .cp-gnb .cp-dd-menu li { display: inline-block; }
  .cp-gnb .cp-dd-menu a { display: inline-flex; align-items: center; padding: 0 12px; min-height: 44px; border-radius: 6px; background: none; }
}


/* rank-sidebar.css 로 분리 */

/* 로그인 폼 — 체크박스 행/안내문 겹침 수정 (모바일 로그인창 깨짐)
   원인: member 스킨 CSS가 .submit을 position:absolute로 띄워 '로그인 유지' 라벨 위에 겹침 -> 흐름 배치로 강제 */
.cp-content .signin .control-group{ height:auto !important; }
.cp-content .signin .control-group label{ display:flex !important; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; color:var(--cp-sub); line-height:1.5; cursor:pointer; position:static !important; }
.cp-content .signin input[type="checkbox"]{ width:16px; height:16px; margin:0; accent-color:var(--cp-brand); flex-shrink:0; position:static !important; }
.cp-content .signin .submit, .cp-content .signin input[type="submit"]{ position:static !important; display:block; width:100%; margin-top:6px; }
.cp-content .signin #warning p{ margin:0 0 12px; font-size:12px; color:var(--cp-sub); line-height:1.5; background:var(--cp-bg); border:1px solid var(--cp-line); border-radius:8px; padding:10px 12px; }
.cp-content .signin fieldset{ border:0; margin:0; padding:0; min-width:0; }


/* 로그인/가입 전용 셸 — PC에서 사이드바 없이 한 카드에 집중 */
.cp-body:has(.cp-auth){ justify-content:center; }
.cp-body:has(.cp-auth) .cp-content{
  width:100%; max-width:400px; margin:0 auto; padding:38px 0 54px;
  background:transparent; border:0; box-shadow:none;
}
.cp-auth{ width:100%; }
.cp-auth-card{
  width:100%; background:transparent; border:0; border-radius:0; overflow:visible;
}
.cp-auth-head{ padding:0 0 20px; text-align:left; border-bottom:2px solid var(--cp-ink); }
.cp-auth-title{ margin:0; font-size:21px; font-weight:800; color:var(--cp-ink); letter-spacing:-.4px; }
.cp-auth-sub{ display:none; }
.cp-auth-form{ padding:22px 0 0; }
/* 스킨 기본 카드/헤더 중복 제거 — 바깥 카드만 남김 */
.cp-auth .signin{ max-width:none; margin:0; background:transparent; border:0; border-radius:0; overflow:visible; }
.cp-auth .signin .login-header{ display:none; }
.cp-auth .signin .login-body{ padding:8px 0 18px; }
.cp-auth .signin .control-group:first-child{ display:flex; flex-direction:column; gap:10px; }
.cp-auth .signin input[type="text"],
.cp-auth .signin input[type="password"],
.cp-auth .signin input[type="email"]{ margin:0; }

.cp-auth .signin .login-footer{ padding:14px 0 22px; border-top:1px solid var(--cp-line); background:transparent; }
.cp-auth .form-horizontal{ max-width:none; margin:0; padding:8px 0 22px; }
.cp-auth .xm{ width:100% !important; max-width:none !important; }
.cp-auth .message{ margin:0 0 12px; padding:10px 12px; border-radius:8px; font-size:13px; }
.cp-auth .message.error{ background:rgba(224,48,78,.08); color:#c62828; border:1px solid rgba(224,48,78,.25); }
.cp-auth .message.error p{ margin:0; }

/* 회원 가입 — 기본 스킨의 2000년대식 좌우 폼을 세로형 폼으로 재구성 */
.cp-auth .xm .signin{
  width:100%; max-width:none; margin:0; background:transparent; border:0; border-radius:0; box-shadow:none;
}
.cp-auth .xm .signin>.login-body{ max-height:none; padding:8px 0 18px; }
.cp-auth .xm .signin .control-group{ padding:0; margin:0 0 14px; }
.cp-auth .xm .signin input[type="text"],
.cp-auth .xm .signin input[type="email"],
.cp-auth .xm .signin input[type="password"]{
  box-sizing:border-box; width:100%; height:46px; padding:0 13px; border:1px solid var(--cp-line);
  border-radius:5px; background:var(--cp-panel); color:var(--cp-ink); font-size:14px;
}
.cp-auth .xm .signin input:focus,
.cp-auth .xm .form-horizontal input:focus{
  outline:0; border-color:var(--cp-link); box-shadow:0 0 0 2px var(--cp-focus-ring);
}
.cp-auth .xm .signin .submit{
  position:static; width:100%; height:44px; margin-top:14px; border:0; border-radius:5px;
  background:var(--cp-brand) !important; border-color:var(--cp-brand) !important; color:#fff; font-size:14px; font-weight:700;
}
.cp-auth .xm .signin .submit:hover{ background:var(--cp-brand-h) !important; border-color:var(--cp-brand-h) !important; }
.cp-auth .xm .signin .login-footer{
  margin:0; padding:16px 0 0; border:0; background:transparent; box-shadow:none; text-align:center;
  color:var(--cp-line); font-size:12px;
}
.cp-auth .xm .signin .login-footer a{ color:var(--cp-sub); font-weight:600; }
.cp-auth .xm .signin label{ font-size:13px; color:var(--cp-sub); }
.cp-auth .xm .signin #warning{ margin:8px 0 0; font-size:12px; color:var(--cp-faint); }
.cp-auth .xm>h1,
.cp-auth .xm .form-horizontal>h1{ display:none; }
.cp-auth .xm .form-horizontal .control-group{ margin:0 0 17px; }
.cp-auth .xm .form-horizontal .control-label{
  float:none; display:block; width:auto; padding:0; margin:0 0 7px; text-align:left;
  font-size:13px; font-weight:750; color:var(--cp-ink);
}
.cp-auth .xm .form-horizontal .control-label em{ color:#e5484d !important; font-style:normal; }
.cp-auth .xm .form-horizontal .controls{ display:block; margin:0; }
.cp-auth .xm .form-horizontal input[type="text"],
.cp-auth .xm .form-horizontal input[type="email"],
.cp-auth .xm .form-horizontal input[type="password"]{
  box-sizing:border-box; display:block; width:100%; height:46px; padding:0 13px; border:1px solid var(--cp-line);
  border-radius:5px; background:var(--cp-panel); color:var(--cp-ink); font-size:14px;
}
.cp-auth .xm .form-horizontal .help-inline{
  display:block; padding:0; margin:7px 0 0; color:var(--cp-sub); font-size:12px; line-height:1.45;
}
.cp-auth .xm .form-horizontal .btnArea{
  display:flex; flex-direction:row-reverse; gap:10px; align-items:center; margin:24px 0 0 !important;
  padding:20px 0 0 !important; border-color:var(--cp-line) !important;
}
.cp-auth .xm .form-horizontal .btnArea .btn{
  float:none; min-width:106px; height:42px; padding:0 16px; border:0; border-radius:5px;
  background:var(--cp-brand) !important; border-color:var(--cp-brand) !important; color:#fff; font-size:14px; font-weight:700; line-height:42px; text-align:center;
}
.cp-auth .xm .form-horizontal .btnArea .pull-right{ order:2; margin-left:auto; }
.cp-auth .xm .form-horizontal .btnArea .pull-left{
  order:1; background:transparent !important; border-color:transparent !important; color:var(--cp-sub);
}
.cp-auth .xm .form-horizontal .btnArea .pull-left:hover{ color:var(--cp-ink); }
.cp-auth .xm .form-horizontal input[type="radio"]{ margin:0 4px 0 0; accent-color:var(--cp-brand); }

/* 소셜 로그인 — 폼 아래 가로 3열 */
.cp-social-login{ max-width:none; margin:0; padding:2px 0 0; display:flex; flex-direction:column; gap:10px; }
.cp-sso-or{ display:flex; align-items:center; gap:10px; margin:0; font-size:11px; color:var(--cp-faint); }
.cp-sso-or::before, .cp-sso-or::after{ content:""; flex:1; height:1px; background:var(--cp-line); }
.cp-sso-or span{ flex-shrink:0; }
.cp-sso-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
.cp-sso-btn{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px;
  min-height:36px; padding:4px 6px; border-radius:4px; font-size:11.5px; font-weight:650;
  text-decoration:none; border:1px solid var(--cp-line); transition:border-color .12s, background .12s;
}
.cp-sso-btn:hover{ filter:none; border-color:#aeb7c2; background:rgba(107,118,132,.05); }
.cp-sso-btn svg{ width:18px; height:18px; flex-shrink:0; display:block; }
.cp-sso-btn span{ white-space:nowrap; line-height:1; }
.cp-sso-google{ background:var(--cp-panel); color:var(--cp-ink); }
.cp-sso-google svg{ width:19px; height:19px; }
.cp-sso-kakao{ background:var(--cp-panel); color:var(--cp-ink); border-color:var(--cp-line); }
.cp-sso-naver{ background:var(--cp-panel); color:var(--cp-ink); border-color:var(--cp-line); }
.cp-sso-naver path{ fill:#03C75A; }
.cp-sso-naver svg{ width:16px; height:16px; }
html.dark .cp-sso-google,
html.dark .cp-sso-kakao,
html.dark .cp-sso-naver{ background:var(--cp-panel); color:var(--cp-ink); }
/* 로그인 카드 안 푸터와 소셜 사이 간격 */
.cp-auth .signin .login-footer{ margin-bottom:4px; }
@media (max-width:640px){
  .cp-body:has(.cp-auth) .cp-content{ padding:24px 4px 36px; }
  .cp-auth-head{ padding:0 0 16px; }
  .cp-auth-form, .cp-social-login{ padding-left:0; padding-right:0; }
  .cp-auth-title{ font-size:20px; }
  .cp-sso-row{ gap:8px; }
  .cp-sso-btn{ min-height:38px; font-size:11px; gap:4px; padding:5px 4px; }
}


/* 모의선물(/trade) — 진짜 풀스크린 (창/카드 느낌 제거) */
:root { --cp-trade-bar-h: 36px; }
html.cp-trade-root,
html.cp-trade-root body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #0b0e11 !important;
}
html.cp-trade-root .cp-wrap.cp-trade-mode {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #0b0e11;
  overflow: hidden;
}
html.cp-trade-root .cp-wrap.cp-trade-mode .cp-body {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
html.cp-trade-root .cp-wrap.cp-trade-mode .cp-content {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cp-trade-bar-h);
  bottom: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  background: #0b0e11;
  overflow: hidden;
}
.cp-trade-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--cp-trade-bar-h);
  padding: 0 10px;
  background: #161a1e;
  border-bottom: 1px solid #2b3139;
  color: #eaecef;
}
.cp-trade-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 5px 8px 5px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #eaecef;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.cp-trade-back:hover { background: #2b3139; color: #fff; }
.cp-trade-title { font-size: 13px; font-weight: 700; color: #848e9c; }
.cp-trade-demo {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 3px;
  background: #f0b90b;
  color: #181a20;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
#cpTradeFrame {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b0e11;
}
html.dark .cp-wrap.cp-trade-mode,
html.dark .cp-wrap.cp-trade-mode .cp-content { background: #0b0e11; }

/* ==========================================================================
   Bootstrap 4 community UI
   익숙한 1140px 컨테이너, 4px radius, card/list/form 밀도로 통일
   ========================================================================== */
body{ font-size:14px; }
.cp-head-inner,
.cp-foot-inner{ max-width:1140px; }
.cp-head-inner{ height:56px; gap:16px; padding-right:15px; padding-left:15px; }
.cp-logo{ font-size:19px; }
.cp-gnb li a{ padding:7px 9px; border-radius:.25rem; font-weight:500; }
.cp-account .cp-join{ padding:6px 12px; border-radius:.25rem; }

.cp-body{
  max-width:1140px; margin:16px auto; padding:0 15px; gap:16px;
}
.cp-content{
  padding:16px; border-color:var(--cp-line); border-radius:.25rem; box-shadow:var(--cp-shadow);
}
.cp-side{ width:270px; gap:16px; }
.cp-card{
  padding:16px; border-color:var(--cp-line); border-radius:.25rem; box-shadow:var(--cp-shadow);
}
.cp-card-head{
  margin:-16px -16px 12px; padding:10px 16px; border-bottom:1px solid var(--cp-line);
  background:var(--cp-soft-bg); font-size:14px; font-weight:600;
}
.cp-side-link{ padding:7px 9px; border-radius:.25rem; font-weight:500; }
.cp-side-btn{ padding:8px 12px; border-radius:.25rem; font-weight:600; }

.cp-home{ gap:16px; }
.cp-home-metrics{ gap:10px; }
.cph-metric,
.cph-coin{ border-radius:.25rem; box-shadow:none; }
.cph-metric{ padding:12px; }
.cph-coin{ padding:9px 11px; }
.cph-tools{ gap:8px; }
.cph-tool{
  padding:9px 12px; border:1px solid var(--cp-line); border-radius:.25rem;
  background:var(--cp-soft-bg); color:var(--cp-brand); font-weight:600;
}
.cph-tool:hover{ border-color:var(--cp-brand); background:var(--cp-brand); color:#fff; }

.cp-content .btn,
.cp-content input[type="submit"],
.cp-content button.btn,
.cp-content .submit{
  min-height:38px; padding:.375rem .75rem; border-radius:.25rem; font-size:14px; font-weight:500;
}
.cp-cta{
  padding:12px 16px; border-radius:.25rem; background:var(--cp-soft-bg); box-shadow:none;
}
.cp-cta-btn{ padding:8px 14px; border-radius:.25rem; font-weight:600; }
.cp-vitals{ padding:10px 14px; border-radius:.25rem; }
.cp-theme-btn{ width:36px; height:36px; border-radius:.25rem; }
.cp-gnb .cp-dd-menu{
  border-radius:.25rem; padding:5px 0; box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}
.cp-gnb .cp-dd-menu a{ padding:7px 16px; border-radius:0; }

/* 인증 화면도 Bootstrap 4 card/form 규격으로 복귀 */
.cp-body:has(.cp-auth) .cp-content{
  max-width:420px; padding:0; margin:24px auto 48px;
  background:var(--cp-panel); border:1px solid var(--cp-line);
  border-radius:.25rem; box-shadow:var(--cp-shadow);
}
.cp-auth-card{ background:var(--cp-panel); border-radius:.25rem; overflow:hidden; }
.cp-auth-head{
  padding:14px 20px; border-bottom:1px solid var(--cp-line); background:var(--cp-soft-bg); text-align:left;
}
.cp-auth-title{ font-size:18px; font-weight:600; letter-spacing:-.2px; }
.cp-auth-form{ padding:20px 20px 0; }
.cp-auth .xm .signin input[type="text"],
.cp-auth .xm .signin input[type="email"],
.cp-auth .xm .signin input[type="password"],
.cp-auth .xm .form-horizontal input[type="text"],
.cp-auth .xm .form-horizontal input[type="email"],
.cp-auth .xm .form-horizontal input[type="password"]{
  height:38px; min-height:38px; padding:.375rem .75rem; border-radius:.25rem; font-size:14px;
}
.cp-auth .xm .signin .submit{
  height:38px; margin-top:12px; border-radius:.25rem; font-weight:600;
}
.cp-auth .xm .signin .login-footer{ padding:14px 0 0; font-size:13px; }
.cp-auth .xm .form-horizontal .control-group{ margin-bottom:16px; }
.cp-auth .xm .form-horizontal .control-label{ margin-bottom:6px; font-weight:600; }
.cp-auth .xm .form-horizontal .btnArea{ margin-top:20px !important; padding-top:16px !important; }
.cp-auth .xm .form-horizontal .btnArea .btn{ height:38px; border-radius:.25rem; line-height:38px; font-weight:600; }
.cp-social-login{ padding:4px 20px 20px; gap:10px; }
.cp-sso-btn{ min-height:36px; border-radius:.25rem; font-weight:500; }

@media (max-width:900px){
  .cp-body{ margin:12px auto; gap:12px; }
  .cp-side{ gap:12px; }
}
@media (max-width:600px){
  .cp-body{ padding:0 12px; }
  .cp-content{ padding:12px; }
  .cp-card{ padding:14px; }
  .cp-card-head{ margin:-14px -14px 10px; padding:9px 14px; }
  .cp-body:has(.cp-auth) .cp-content{ padding:0; margin:12px auto 28px; }
  .cp-auth-head{ padding:13px 16px; }
  .cp-auth-form{ padding:16px 16px 0; }
  .cp-social-login{ padding:4px 16px 16px; }
  .cp-auth .xm .signin input[type="text"],
  .cp-auth .xm .signin input[type="email"],
  .cp-auth .xm .signin input[type="password"],
  .cp-auth .xm .form-horizontal input[type="text"],
  .cp-auth .xm .form-horizontal input[type="email"],
  .cp-auth .xm .form-horizontal input[type="password"]{ height:44px; min-height:44px; font-size:16px; }
}