/* theme.css */
:root{

  scrollbar-gutter: stable;
  /* Opacity steps */
  --op-xxs:.03; --op-xs:.05; --op-sm:.06; --op-md:.10; --op-lg:.14;

 --mask-bg: rgba(0,0,0,.62);
  /* Core */
  --bg:#f9f9f9;

  /* Text */
  --text:rgba(0,0,0,.76);
  --text-md:rgba(0,0,0,.68);
  --text-sub:rgba(0,0,0,.55);
  --text-sub2:rgba(0,0,0,.35);

  /* Links */
  --link-color:#3bbfbf; --link-hover:#2fa9a9; --link-active:#269090;

  /* Borders (라이트) */
  --border-light:rgba(0,0,0,.06);
  --border-medium:rgba(0,0,0,.10);
  --border-dark:rgba(0,0,0,.14);

  /* Surfaces & Tints (라이트) */
  --surface-1: color-mix(in srgb, var(--bg) 100%, #fff 100%);
  --surface-2: color-mix(in srgb, var(--bg) 86%, #000 8%);
  --surface-3: color-mix(in srgb, var(--bg) 82%, #000 10%);

  --bg-light:rgba(0,0,0,var(--op-sm));
  --bg-medium:rgba(0,0,0,var(--op-md));
  --bg-dark:rgba(0,0,0,var(--op-lg));

  /* Inputs */
  --input-bg:#fff;
  --input-text:var(--text-md);
  --input-border:var(--border-medium);
  --input-focus:#7c5cff;

  /* 버튼 공통 토큰 (기본/유틸) */
  --btn-bg:rgba(0,0,0,.05);
  --btn-text:var(--text);
  --btn-border:var(--border-light);
  --btn-bg-hover:rgba(0,0,0,.08);
  --btn-bg-active:rgba(0,0,0,.12);

  /* Elevation (outline + shadow) */
  --elev-outline:rgba(0,0,0,.06);
  --elev-1:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --elev-2:0 6px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --elev-3:0 14px 28px rgba(0,0,0,.16), 0 8px 16px rgba(0,0,0,.10);

  /* Brand helpers */
  --color-blue:#2593e3; --color-red:#f1356e;
  --color-green:#16a34a; --color-amber:#f59e0b; --color-purple:#7C5CFF;
  --color-blue-op:rgba(37,147,227,.25); --color-red-op:rgba(241,53,110,.25);

  /* 라이트 모드용 브랜드 톤 (액션 버튼) */
  --color-pr-op:#7C5CFF;
  --brand-500:#7C5CFF;
  --brand-600:#6B4BEF; /* hover */
  --brand-700:#5A3BDF; /* active */

  /* 세컨더리(회색 계열) */
  --btn-secondary-bg: rgba(0,0,0,.05);
  --btn-secondary-bg-hover: rgba(0,0,0,.08);
  --btn-secondary-bg-active: rgba(0,0,0,.12);
  --btn-secondary-text: var(--text);
--fancybox-scrollbar-compensate: 0px !important;

   --text-placeholder: color-mix(in oklab, var(--text, #e6e8ec), transparent 40%);
  --scrollbar-bg: transparent; /* 기본 트랙 배경 */
  --scrollbar-thumb: rgba(0,0,0,.25); /* 라이트 모드 */
}

/* ===================== 시스템 다크(자동) ===================== */
@media (prefers-color-scheme: dark){
  :root:not(.theme-light):not(.theme-dark){
    --bg:#121212;

    --text:rgba(255,255,255,.92);
    --text-md:rgba(255,255,255,.72);
    --text-sub:rgba(255,255,255,.62);
    --text-sub2:rgba(255,255,255,.42);

    --border-light:rgba(255,255,255,.06);
    --border-medium:rgba(255,255,255,.10);
    --border-dark:rgba(255,255,255,.14);

    --surface-1: color-mix(in srgb, var(--bg) 88%, #fff 4%);
    --surface-2: color-mix(in srgb, var(--bg) 84%, #fff 8%);
    --surface-3: color-mix(in srgb, var(--bg) 80%, #fff 16%);

    --bg-light:rgba(0,0,0,var(--op-sm));
    --bg-medium:rgba(0,0,0,var(--op-md));
    --bg-dark:rgba(0,0,0,var(--op-lg));

    --input-bg:rgba(255,255,255,.06);
    --input-text:rgba(255,255,255,.92);
    --input-border:var(--border-medium);
    --input-focus:#7c5cff;

    /* 버튼 공통 토큰 (다크) */
    --btn-bg:rgba(255,255,255,.06);
    --btn-text:rgba(255,255,255,.92);
    --btn-border:var(--border-light);
    --btn-bg-hover:rgba(255,255,255,.10);
    --btn-bg-active:rgba(255,255,255,.14);

    --btn-disabled-bg: rgba(255,255,255,.08);
    --btn-disabled-border: var(--border-dark);
    --btn-disabled-text: var(--text-sub);

    --elev-outline:rgba(255,255,255,.06);
    --elev-1:0 8px 20px rgba(0,0,0,.45);
    --elev-2:0 12px 28px rgba(0,0,0,.52);
    --elev-3:0 18px 36px rgba(0,0,0,.60);

    /* 액션(브랜드) 버튼 톤 */
    --brand-500:#8E75FF;
    --brand-600:#7C5CFF;
    --brand-700:#6B4BEF;

    /* 세컨더리 */
    --btn-secondary-bg: rgba(255,255,255,.06);
    --btn-secondary-bg-hover: rgba(255,255,255,.10);
    --btn-secondary-bg-active: rgba(255,255,255,.14);
    --btn-secondary-text: var(--text);

      --scrollbar-bg: #0f1220;
  --scrollbar-thumb: rgba(255,255,255,.20);
  }
}

/* ===================== 강제 라이트 ===================== */
html.theme-light{
  --bg:#f9f9f9;
  --text:rgba(0,0,0,.76);
  --text-md:rgba(0,0,0,.68);
  --text-sub:rgba(0,0,0,.55);
  --text-sub2:rgba(0,0,0,.35);

  --border-light:rgba(0,0,0,.06);
  --border-medium:rgba(0,0,0,.10);
  --border-dark:rgba(0,0,0,.14);

  --mask: rgba(0,0,0,.45);

  --surface-1: color-mix(in srgb, var(--bg) 100%, #fff 100%);
  --surface-2: color-mix(in srgb, var(--bg) 86%, #000 8%);
  --surface-3: color-mix(in srgb, var(--bg) 82%, #000 10%);

  --btn-disabled-bg: rgba(0,0,0,.04);
  --btn-disabled-border: var(--border-medium);
  --btn-disabled-text: var(--text-sub);

  --input-bg:#fff;
  --input-text:var(--text-sub);
  --input-border:var(--border-medium);
  --input-focus:#7c5cff;

   --text-placeholder: color-mix(in oklab, var(--text), transparent 40%);

     --scrollbar-bg: #f2f3f5;
  --scrollbar-thumb: rgba(0,0,0,.25);


  /* 버튼 토큰은 :root 기본 사용 */
}

/* ===================== 강제 다크 ===================== */
html.theme-dark{
  --bg:#121212;
  --text:rgba(255,255,255,.92);
  --text-md:rgba(255,255,255,.72);
  --text-sub:rgba(255,255,255,.62);
  --text-sub2:rgba(255,255,255,.42);

  --border-light:rgba(255,255,255,.06);
  --border-medium:rgba(255,255,255,.10);
  --border-dark:rgba(255,255,255,.14);

  --surface-1: color-mix(in srgb, var(--bg) 88%, #fff 4%);
  --surface-2: color-mix(in srgb, var(--bg) 84%, #fff 8%);
  --surface-3: color-mix(in srgb, var(--bg) 80%, #fff 16%);

  --input-bg:rgba(255,255,255,.06);
  --input-text:rgba(255,255,255,.92);
  --input-border:var(--border-medium);
  --input-focus:#7c5cff;

  --btn-disabled-bg: rgba(255,255,255,.08);
  --btn-disabled-border: var(--border-dark);
  --btn-disabled-text: var(--text-sub);




  /* 브랜드 톤(다크) */
  --brand-500:#8E75FF;
  --brand-600:#7C5CFF;
  --brand-700:#6B4BEF;

  --btn-secondary-bg: rgba(255,255,255,.06);
  --btn-secondary-bg-hover: rgba(255,255,255,.10);
  --btn-secondary-bg-active: rgba(255,255,255,.14);
  --btn-secondary-text: var(--text);
   --text-placeholder: color-mix(in oklab, var(--text), transparent 40%);

  --scrollbar-bg: #14161c;                 /* 트랙: 배경보다 살짝 밝음 */
  --scrollbar-thumb: rgba(255,255,255,.25);/* thumb: 은은한 밝은 회색 */
}

/* ===================== Base ===================== */
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);margin:0;}
a{color:var(--brand-500);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--brand-500)}
a:active{color:var(--brand-600)}

/* =========================================================
   코인주라 Board List common UI
   ========================================================= */
#bo_list.cj-board-list .cj-board-list-searchform{
  grid-template-columns:minmax(150px, 180px) minmax(0, 1fr) !important;
  align-items:start !important;
  gap:8px 10px !important;
}

#bo_list.cj-board-list select.cj-board-list-select,
#bo_list.cj-board-list .nice-select.cj-board-list-select{
  width:100% !important;
  height:40px !important;
  min-height:40px !important;
  line-height:38px !important;
  padding:0 34px 0 12px !important;
  border:1px solid var(--input-border) !important;
  border-radius:10px !important;
  background:var(--input-bg) !important;
  color:var(--input-text) !important;
  font-size:14px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

#bo_list.cj-board-list .nice-select.cj-board-list-select:after{
  right:14px;
  border-color:var(--text-sub);
}

#bo_list.cj-board-list .nice-select.cj-board-list-select.open,
#bo_list.cj-board-list .nice-select.cj-board-list-select:focus,
#bo_list.cj-board-list select.cj-board-list-select:focus{
  border-color:var(--input-focus) !important;
  box-shadow:0 0 0 1px var(--input-focus) !important;
}

#bo_list.cj-board-list .nice-select.cj-board-list-select .list{
  width:100% !important;
  max-height:260px !important;
  margin-top:6px !important;
  overflow:auto !important;
  border:1px solid var(--border-medium) !important;
  border-radius:10px !important;
  background:var(--surface-1) !important;
  color:var(--text) !important;
  box-shadow:var(--elev-2) !important;
}

#bo_list.cj-board-list .nice-select.cj-board-list-select .option{
  min-height:36px !important;
  line-height:36px !important;
  padding:0 12px !important;
  color:var(--text-md) !important;
  font-size:14px !important;
}

#bo_list.cj-board-list .nice-select.cj-board-list-select .option:hover,
#bo_list.cj-board-list .nice-select.cj-board-list-select .option.focus,
#bo_list.cj-board-list .nice-select.cj-board-list-select .option.selected.focus{
  background:color-mix(in srgb, var(--surface-1) 84%, var(--brand-500) 16%) !important;
  color:var(--text) !important;
}

#bo_list.cj-board-list .cj-board-list-searchinput{
  height:40px !important;
  min-height:40px !important;
  border-color:var(--input-border) !important;
  background:var(--input-bg) !important;
}

#bo_list.cj-board-list .cj-board-list-searchinput input{
  height:38px !important;
  min-height:38px !important;
  padding:0 8px !important;
  color:var(--input-text) !important;
  font-size:14px !important;
}

#bo_list.cj-board-list .cj-board-list-searchinput input::placeholder{
  color:var(--text-placeholder);
}

#bo_list.cj-board-list .cj-board-list-btn.board-list-search{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  border-radius:9px !important;
}

#bo_list.cj-board-list .cj-board-list-index{
  min-width:auto !important;
  flex:0 0 auto;
}

#bo_list.cj-board-list .cj-board-list-num{
  display:none !important;
}

#bo_list.cj-board-list .cj-board-list-check{
  position:static !important;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#bo_list.cj-board-list .cj-board-list-sort{
  align-items:center;
}

#bo_list.cj-board-list .cj-board-list-sort a{
  gap:4px;
  min-height:28px;
  border-radius:999px !important;
}

#bo_list.cj-board-list .cj-board-list-sort a.is-active{
  border-color:color-mix(in srgb, var(--brand-500) 48%, var(--border-light)) !important;
  background:color-mix(in srgb, var(--surface-1) 78%, var(--brand-500) 22%) !important;
  color:var(--text) !important;
}

#bo_list.cj-board-list .cj-board-list-sort a.is-active::after{
  content:attr(data-cj-sort-current);
  color:var(--brand-500);
  font-size:11px;
  font-weight:900;
}

#bo_list.cj-board-list .cj-board-list-pagination .pg{
  justify-content:center;
}

@media (max-width:720px){
  #bo_list.cj-board-list{
    padding:12px !important;
    border-radius:12px !important;
  }

  #bo_list.cj-board-list .cj-board-list-head{
    align-items:flex-start !important;
  }

  #bo_list.cj-board-list .cj-board-list-searchform{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #bo_list.cj-board-list .cj-board-list-sort{
    gap:6px !important;
  }

  #bo_list.cj-board-list .cj-board-list-items{
    margin-top:8px !important;
  }

  #bo_list.cj-board-list .cj-board-list-item{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:13px 0 !important;
  }

  #bo_list.cj-board-list .cj-board-list-left{
    align-items:flex-start !important;
    gap:10px !important;
  }

  #bo_list.cj-board-list .cj-board-list-titlewrap{
    display:block !important;
    min-width:0 !important;
  }

  #bo_list.cj-board-list .cj-board-list-title{
    max-width:100% !important;
    white-space:normal !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }

  #bo_list.cj-board-list .cj-board-list-meta{
    gap:7px !important;
    padding-left:10px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  #bo_list.cj-board-list .cj-board-list-author{
    opacity:.55;
  }
}

@media (max-width:480px){
  #bo_list.cj-board-list{
    padding:10px !important;
  }

  #bo_list.cj-board-list .cj-board-list-pagination{
    padding:12px 0 0 !important;
  }

  #bo_list.cj-board-list .cj-board-list-pagination .pg_wrap{
    justify-content:flex-start !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #bo_list.cj-board-list .cj-board-list-pagination .pg{
    flex-wrap:nowrap !important;
    gap:4px !important;
    min-width:max-content;
  }

  #bo_list.cj-board-list .cj-board-list-pagination .pg_page,
  #bo_list.cj-board-list .cj-board-list-pagination .pg_current,
  #bo_list.cj-board-list .cj-board-list-pagination .pg_start,
  #bo_list.cj-board-list .cj-board-list-pagination .pg_prev,
  #bo_list.cj-board-list .cj-board-list-pagination .pg_next,
  #bo_list.cj-board-list .cj-board-list-pagination .pg_end{
    min-width:30px !important;
    width:30px !important;
    height:30px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:14px !important;
  }
}

.container{max-width:1200px;margin:0 auto;padding:24px}
.toolbar{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-bottom:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.section{padding:18px}
.h1{font-size:32px;font-weight:800;margin:4px 0 2px}
.h2{font-size:22px;font-weight:700;margin:0 0 10px}
.p{color:var(--text-md);line-height:1.6}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ===================== Inputs & Select ===================== */
input,textarea,select{
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--input-border);
  outline:none;
  transition:box-shadow .2s ease,background-color .2s ease,border-color .2s ease,filter .2s ease;
}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 2px var(--input-focus)}
select, option{background:var(--input-bg); color:var(--input-text)}
select{appearance:auto}

/* ===================== Buttons (공통) ===================== */
/* 공통(겹치는 스타일)을 전역 button에만 선언.
   hover/active 트랜지션은 각 클래스에서만 관리 */
button{
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  background:var(--btn-bg); color:var(--btn-text);
    border-radius:8px;
}
button[disabled], button[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;filter:grayscale(.25);pointer-events:none;box-shadow:none !important;
}


input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1; /* 브라우저별 기본 흐림 제거 */
}


/* WebKit 기반 (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}



input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1.5px solid var(--input-border, var(--border-medium, #e6e8ef));
  border-radius: 6px;
  background: var(--input-bg, var(--surface-1, #fff));
  cursor: pointer;
  vertical-align: middle;

  /* 아이콘을 배경으로 넣어 안정적으로 표시 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% 70%;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
  padding:0px;
  width: 20px;
  min-height: 20px;
}

/* hover/active */
input[type="checkbox"]:hover{
  background-color: color-mix(in oklab, var(--input-bg, var(--surface-1)), var(--text) 4%);
}
input[type="checkbox"]:active{ transform: translateY(1px); }

/* ✓ 체크 표시: 파란 테마색 + 흰색 체크 */
input[type="checkbox"]:checked{
  background-color: var(--color-blue-op, #3b82f6);
  border-color: color-mix(in oklab, var(--color-blue-op, #3b82f6), black 12%);
  /* 흰색 체크 SVG를 배경으로 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* indeterminate (대시) */
input[type="checkbox"]:indeterminate{
  background-color: var(--color-blue-op, #3b82f6);
  border-color: color-mix(in oklab, var(--color-blue-op, #3b82f6), black 12%);
  background-image: linear-gradient(#fff, #fff);
  background-size: 60% 2px;
  background-position: center;
}

/* disabled */
input[type="checkbox"]:disabled{
  opacity:.55; cursor:not-allowed;
}

/* Summernote 모달 라벨 보정(파란 박스처럼 보이는 현상 제거) */
.note-modal .note-modal-body label{
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--popover-text);
}

/* Firefox 대응 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

/* ===================== Buttons (유틸/액션 별도 차이만) ===================== */
/* (A) 유틸리티 버튼: 상단 “시스템/라이트/다크” & 데모 버튼 */
.u-btn{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.u-btn:hover{ background:var(--btn-bg-hover); }
.u-btn:active{ background:var(--btn-bg-active); }

/* (B) 액션 버튼: 기본 .btn + 변형들 */
.btn{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}


/* 라이트 모드 */
.theme-light {
  --text: #1a1a1a;
  --text-placeholder: color-mix(in oklab, var(--text), transparent 40%);
}

/* 다크 모드 */
.theme-dark {
  --text: #e6e8ec;
  --text-placeholder: color-mix(in oklab, var(--text), transparent 40%);
}

.cj-ns-select{
  /* 배경/텍스트/테두리: 인풋 계열과 동일하게 */
  --ns-bg: var(--bg);
  --ns-text: var(--text);
  --ns-border: var(--input-border);

  --ns-radius: 12px;
  --ns-pad-x: 12px;
  --ns-pad-y: 10px;
  --ns-gap: 8px;
  --ns-focus: color-mix(in oklab, var(--input-focus) 35%, transparent);
  --ns-muted: color-mix(in oklab, var(--text) 28%, transparent);
}

/* primary */
.btn--primary{
  background: var(--brand-700);
  color:#fff;
  border-color: transparent;
}
.btn--primary:hover{ background: var(--brand-600); }
.btn--primary:active{ background: var(--brand-700); }

/* 아이콘 크기 통일 */
.cj-btn > svg{
  width:18px; height:18px;
}



/* secondary */
.btn--secondary{
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}
.btn--secondary:hover{ background: var(--btn-secondary-bg-hover); }
.btn--secondary:active{ background: var(--btn-secondary-bg-active); }

/* outline 강도 변형 */
.btn--outline-strong{ border-color: var(--border-dark); }

/* 모션 선호 존중 */
@media (prefers-reduced-motion: reduce){
  .btn, .u-btn{ transition:none }
}



/* SweetAlert2 버튼 공통 크기/라운드/타이포 */
.swal2-popup .swal2-actions .swal2-styled{
  min-height: 40px !important;
  padding: .55rem 1rem !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}

/* 확인(Primary) */
.swal2-popup .swal2-actions .swal2-confirm{
  background: var(--brand-700) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  min-height:44px !important;
}
.swal2-popup .swal2-actions .swal2-confirm:hover{
  background: var(--brand-600) !important;
}
.swal2-popup .swal2-actions .swal2-confirm:active{
  background: var(--brand-700) !important;
}

/* 취소(Secondary) */
.swal2-popup .swal2-actions .swal2-cancel{
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border: 1px solid var(--btn-border) !important;
   min-height:44px !important;
}
.swal2-popup .swal2-actions .swal2-cancel:hover{
  background: var(--btn-secondary-bg-hover) !important;
}
.swal2-popup .swal2-actions .swal2-cancel:active{
  background: var(--btn-secondary-bg-active) !important;
}

/* 포커스 링(접근성) */
.swal2-popup .swal2-actions .swal2-styled:focus-visible{
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 35%, transparent) !important;
}

/* 비활성 */
.swal2-popup .swal2-actions .swal2-styled:disabled{
  background: var(--btn-disabled-bg) !important;
  border-color: var(--btn-disabled-border) !important;
  color: var(--btn-disabled-text) !important;
  opacity: 1 !important;
  filter: grayscale(.25);
  cursor: not-allowed;
  pointer-events: none;
}



.u-btn--outline-strong{ border-color: var(--border-dark) !important; }

/* disabled 상태(라이트/다크 모두 토큰으로 분리) */
button.u-btn:disabled,
button.u-btn[aria-disabled="true"]{
  background: var(--btn-disabled-bg) !important;
  border-color: var(--btn-disabled-border) !important;
  color: var(--btn-disabled-text) !important;
  opacity: 1;               /* 기존 0.45 대신 명도/보더로 구분 */
  filter: grayscale(.25);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
}

/* 키보드 포커스 링은 비활성에서 제거(브라우저별 안전장치) */
button.u-btn:disabled:focus,
button.u-btn[aria-disabled="true"]:focus{ outline: none; box-shadow: none; }

/* ===================== Card Boxes ===================== */
.card-box {
  border: none;
  border-radius: 16px;
  padding: 16px;
  transition: background-color .18s ease, filter .18s ease;
  background: var(--surface-1);
}
.card-box--2 { background: var(--surface-2); }
.card-box:hover { background: color-mix(in srgb, var(--surface-1) 96%, var(--bg) 4%); }
.card-box--2:hover { background: color-mix(in srgb, var(--surface-2) 96%, var(--bg) 4%); }

@media (prefers-reduced-motion: reduce){
  .card-box{transition:none}
}

/* 카드 보더 단계 */
.card-line{
  border-radius:16px;
  padding:16px;
  background:var(--surface-1);
  border:1px solid var(--border-light);
  transition: background-color .18s ease;
}
.card-line--medium{ border-color:var(--border-medium); }
.card-line--dark{ border-color:var(--border-dark); }
.card-line:hover{ background: color-mix(in srgb, var(--surface-1) 96%, var(--bg) 4%); }

/* ===================== 테이블 ===================== */
table{background:transparent;color:var(--text);border-collapse:collapse;width:100%}
th,td{border:1px solid var(--border-light);padding:.6rem .8rem;text-align:left}
tbody tr:nth-child(odd){background:color-mix(in srgb, var(--bg) 96%, #000 4%)}

/* 섹션 구분선 */
.hr{border:none;height:1px;background:var(--border-light);margin:16px 0}


/* 배경 마스크(토큰 사용) + 살짝 블러 */
.swal2-container{
  background: var(--mask-bg) !important;      /* 반투명만 적용: 가장 매끈함 */
  backdrop-filter: none;                       /* 블러 끔 */
}

/* 팝업 컨테이너: 반투명 마스크만 (blur 제거) */
.swal2-container{
  background: var(--mask-bg) !important;
}

/* 팝업 본체 */
.swal2-popup{
  background: var(--surface-1) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 16px !important;
  box-shadow: var(--elev-3) !important;
  padding: 20px 20px 14px !important;
  width: min(520px, calc(100vw - 48px)) !important; /* 반응형 폭 */
}

/* 타이틀/본문 */
.swal2-title{
  color: var(--text) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
}
.swal2-html-container{
  color: var(--text-md) !important;
  margin: 0 0 2px !important;
  line-height: 1.6 !important;
}

/* 버튼 영역(구분선 + 여백만) */
.swal2-actions{
  display: flex !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--border-light) !important;
}

/* 버튼 터치영역만 확대 (네 .btn 스타일 재사용) */
.swal2-actions .btn{
  min-height: 44px;
  min-width: 104px;
  padding: .7rem 1rem;
  border-radius: 12px;
  line-height: 1;
  font-weight: 700;
}

/* 모바일: 세로 스택 & 풀폭 */
@media (max-width: 480px){
  .swal2-container{ padding: 14px !important; }
  .swal2-popup{
    width: calc(100vw - 28px) !important;
    border-radius: 14px !important;
    padding: 16px 14px 10px !important;
  }
  .swal2-actions{
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
  }
  .swal2-actions .btn{
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
}

.oc-theme-switch {
    margin-left:14px;
  width:28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-3);
}

.oc-theme-switch:focus-visible {
  outline: 2px solid #3ba9ff55;
  outline-offset: 2px;
}

.oc-icon {
  width: 18px;
  height: 18px;
  display: none;
  color: inherit;
}

.oc-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* 라이트 → 달 */
html.theme-light .oc-moon { display: block; }
/* 다크 → 해 */
html.theme-dark .oc-sun { display: block; }
/* 본체 */
.cj-ns-select .nice-select {
  background: var(--ns-bg);
  color: var(--ns-text);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  padding: var(--ns-pad-y) calc(var(--ns-pad-x) + 18px) var(--ns-pad-y) var(--ns-pad-x);
  min-height: 40px;
  line-height: 1.4;
  height: auto;
  display: inline-flex;
  align-items: center;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* 현재 값 */
.cj-ns-select .nice-select .current {
  color: var(--ns-text);
}

/* 화살표 */
.cj-ns-select .nice-select:after {
  right: 12px;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid var(--ns-muted);
  border-right: 2px solid var(--ns-muted);
  transform: rotate(45deg);
  margin-top: -5px;
  transition: transform .15s ease, border-color .15s ease;
}
.cj-ns-select .nice-select.open:after {
  transform: rotate(-135deg);
  border-color: var(--ns-text);
}

/* 호버/포커스 */
.cj-ns-select .nice-select:focus,
.cj-ns-select .nice-select.open {
  outline: none;
}

/* 비활성 */
.cj-ns-select .nice-select.disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* 드롭다운 리스트 */
.cj-ns-select .nice-select .list {
  margin-top: var(--ns-gap);
  background: var(--ns-bg);
  border: 1px solid var(--ns-border);
  border-radius: calc(var(--ns-radius) + 2px);
  box-shadow: var(--ns-shadow);
  padding: 6px;
  max-height: 280px;
  overflow: auto;
}

/* 옵션 */
.cj-ns-select .nice-select .option {
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.35;
  color: var(--ns-text);
  transition: background .12s ease, color .12s ease;
}
.cj-ns-select .nice-select .option:hover,
.cj-ns-select .nice-select .option.focus {
  background: color-mix(in oklab, var(--ns-text) 8%, transparent);
}
.cj-ns-select .nice-select .option.selected {
  background: color-mix(in oklab, var(--ns-text) 12%, transparent);
  font-weight: 600;
}
.cj-ns-select .nice-select .option.disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* 사이즈 변형 */
.cj-ns-select.day-price .nice-select {
  min-height: 23px;
  font-size: 14px;
  border-radius: 8px;
  padding:2px 6px !important;
  background: var(--btn-secondary-bg);
  font-weight: 700;
  font-family: 'Pretendard', sans-serif;
}

.cj-ns-select.day-price .nice-select::after{
  display: none;
}

.cj-ns-select .nice-select .current{
  text-align: center;
  min-width:23px !important;
}

.cj-ns-select.is-lg .nice-select {
  --ns-pad-y: 12px;
  --ns-pad-x: 14px;
  min-height: 46px;
  font-size: 16px;
  border-radius: 14px;
}

/* 테두리 최소화(quiet) */
.cj-ns-select.is-quiet .nice-select {
  border-color: color-mix(in oklab, var(--ns-border) 70%, transparent);
}

/* 폭 100% */
.cj-ns-select.is-fluid .nice-select {
  width: 100%;
}

.nice-select:hover{
  border-color: var(--btn-secondary-bg) !important;
  background: var(--btn-secondary-bg-hover) !important;
}
.nice-select:active, .nice-select.open, .nice-select:focus{
  border-color: var(--border-light) !important;
}



.cj-ns-select .nice-select .option:hover,
.cj-ns-select .nice-select .option.focus {
  background: color-mix(in oklab, var(--input-focus) 18%, transparent);
  color: var(--text); /* hover/focus 시 본문 텍스트와 동일 */
}

.cj-ns-select .nice-select .option.selected.focus {
  background: color-mix(in oklab, var(--input-focus) 28%, transparent);
  color: var(--text);
  font-weight: 600;
}



/* -------- 에디터 프레임/툴바 -------- */
.note-editor.note-frame{
  border:1px solid var(--input-border) !important; 
  border-radius:12px;
  background:var(--surface-1); color:var(--text);
}
.note-editor .note-toolbar{
  background:var(--surface-2);
  border-bottom:1px solid var(--input-border); padding:8px;
}
.note-editor .note-toolbar .note-btn{
  background: color-mix(in oklab,var(--surface-2),transparent 0%);
  color: var(--text);
  border:1px solid var(--input-border);
  border-radius:10px; padding:6px 14px; line-height:1;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.note-editor .note-toolbar .note-btn:hover{
  background: color-mix(in oklab,var(--surface-2), var(--text) 6%);
  border-color: color-mix(in oklab,var(--input-border), var(--text) 10%);
}
.note-editor .note-toolbar .note-btn.active,
.note-editor .note-toolbar .note-btn:active{ 
  background: color-mix(in oklab,var(--surface-2), var(--text) 10%); transform: translateY(1px);
}
.note-editor .note-toolbar .note-btn .note-icon{ vertical-align:middle; }

/* -------- 에디팅 영역/플레이스홀더/스크롤 -------- */
.note-editor .note-editing-area .note-editable{
  background:var(--surface-1); color:var(--input-text);
  min-height:260px; padding:14px 16px;
  scrollbar-width:thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}
.note-editor .note-editing-area .note-editable:focus{ outline:0; }
.note-editor .note-placeholder{ color:var(--text-placeholder); }

/* -------- 상태바 -------- */
.note-editor .note-statusbar{
  background:var(--surface-2);
  border-top:1px solid var(--input-border);
}
.note-editor .note-statusbar .note-resizebar{ color:var(--popover-muted); }

/* -------- 공통 드롭다운/팝오버(폰트/스타일/링크 등) -------- */
.note-editor :is(.dropdown-menu, .note-popover){
  background:var(--bg-dark); color:var(--popover-text);
  border:1px solid var(--bg-dark); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.15); overflow:hidden;
}
.note-editor .dropdown-menu{ padding:6px 0; }
.note-editor .dropdown-menu > li > a{
  padding:8px 14px; color:var(--popover-text); display:block;
}
.note-editor .dropdown-menu > li > a:hover{
  background: color-mix(in oklab,var(--bg-dark), var(--popover-text) 6%);
}
.note-editor .note-popover .popover-content a{ color:var(--popover-text); }

/* -------- 툴팁(툴바 Hover) -------- */
.note-editor :is(.tooltip, .note-tooltip, [role="tooltip"]){
  --tt-bg: color-mix(in oklab, var(--popover-text), black 75%);
  --tt-text: #fff;
}
.note-editor .tooltip-inner{
  background: var(--tt-bg); color: var(--tt-text);
  border-radius:8px; padding:6px 8px; font-size:12px;
}
.note-editor .tooltip-arrow{ display:none; } /* 꼬리 제거 */

/* -------- 테이블 삽입 그리드(차트 픽커) -------- */
.note-dimension-picker{
  background:var(--bg-dark)!important; border:1px solid var(--bg-dark)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.15); border-radius:10px; padding:6px;
}
.note-dimension-picker .note-dimension-picker-mousecatch{ background:transparent!important; }
.note-dimension-picker .note-dimension-picker-unhighlighted{
  background: color-mix(in oklab,var(--bg-dark), var(--popover-text) 6%)!important;
  border:1px solid color-mix(in oklab,var(--bg-dark), var(--popover-text) 6%)!important;
}
.note-dimension-picker .note-dimension-picker-highlighted{
  background: color-mix(in oklab, var(--color-blue-op), white 20%)!important;
  border:1px solid color-mix(in oklab, var(--color-blue-op), black 20%)!important;
}
.note-dimension-display{ color:var(--text)!important; padding:4px 6px; }

/* -------- 스타일/폰트 드롭다운 샘플(가독성 보정) -------- */
.note-editor .note-style .dropdown-menu{ min-width: 200px; }
.note-editor .note-style .dropdown-menu li{ padding:0; }
.note-editor .note-style .dropdown-menu li a{ padding:6px 12px; }
.note-editor .note-style .dropdown-menu li a h1,
.note-editor .note-style .dropdown-menu li a h2,
.note-editor .note-style .dropdown-menu li a h3,
.note-editor .note-style .dropdown-menu li a h4,
.note-editor .note-style .dropdown-menu li a h5,
.note-editor .note-style .dropdown-menu li a h6{
  color:var(--popover-text);
}
.note-editor .note-fontname .dropdown-menu{ min-width: 180px; }

/* -------- 링크/이미지 등 모달 -------- */
.note-modal-open .note-modal-backdrop{ background:rgba(0,0,0,.45); }
.note-modal .note-modal-content{
  background:var(--bg-dark); color:var(--popover-text);
  border:1px solid var(--bg-dark); border-radius:14px;
  box-shadow:0 16px 36px rgba(0,0,0,.28); overflow:hidden;
}
.note-modal .note-modal-header{
  display: flex;
  align-items: center;
justify-content: space-between;
   flex-direction: row-reverse;
  background:var(--bg-dark); color:var(--popover-text);
  border:none;
  border-bottom:1px solid var(--bg-dark); padding:12px 16px;
  
}
.note-modal .note-modal-title{ font-weight:700; display: flex;align-items: center;}
.note-modal .note-close{ color:var(--popover-muted); opacity:1; }
.note-modal .note-close:hover{ color:var(--popover-text); }
.note-modal .note-modal-body{ background:var(--bg-dark); color:var(--popover-text); padding:20px 16px;}
.note-modal .note-modal-footer{
  background: color-mix(in oklab,var(--bg-dark), var(--popover-text) 3%);
  border-top:1px solid var(--bg-dark);
}

/* 모달 입력 요소 */
.note-modal :is(input[type="text"], input[type="url"], input[type="file"], .form-control, textarea, select){
  background:var(--input-bg); color:var(--input-text);
  border:1px solid var(--input-border); border-radius:10px; padding:10px 12px;
}
.note-modal :is(input, textarea, select)::placeholder{ color:var(--text-placeholder); opacity:1; }
.note-modal :is(input, textarea, select):focus{
  outline:0;
  border-color: color-mix(in oklab, var(--input-border), var(--popover-text) 25%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--popover-text), transparent 85%);
}

/* 모달 버튼 */
.note-modal .note-btn{
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--input-border); border-radius:10px; padding:8px 12px; font-weight:600;
}
.note-modal .note-btn:hover{ background: color-mix(in oklab,var(--surface-2), var(--text) 6%); }
.note-modal .note-btn-primary{
  background:var(--color-blue-op); color:#fff;
  border-color: color-mix(in oklab,var(--color-blue-op), black 12%);
  box-shadow:0 6px 18px color-mix(in oklab,var(--color-blue-op), transparent 80%);
}
.note-modal .note-btn-primary:hover{ background: color-mix(in oklab,var(--color-blue-op), white 6%); }

/* -------- 스크롤 전역(편집 영역/드롭다운/모달 내부) -------- */
.note-editor :is(.note-editable, .dropdown-menu, .note-popover, .note-modal-body){
  scrollbar-width:thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}
.note-editor :is(.note-editable, .dropdown-menu, .note-popover, .note-modal-body)::-webkit-scrollbar{ width:10px; height:10px; }
.note-editor :is(.note-editable, .dropdown-menu, .note-popover, .note-modal-body)::-webkit-scrollbar-track{ background:var(--scrollbar-bg); }
.note-editor :is(.note-editable, .dropdown-menu, .note-popover, .note-modal-body)::-webkit-scrollbar-thumb{
  background-color:var(--scrollbar-thumb); border-radius:8px; border:2px solid transparent; background-clip:content-box;
}
.note-editor :is(.note-editable, .dropdown-menu, .note-popover, .note-modal-body)::-webkit-scrollbar-thumb:hover{
  background-color: color-mix(in oklab, var(--scrollbar-thumb), white 20%);
}


.note-dropdown-menu{background: var(--bg) !important; border-color: var(--border-light) !important;}
a.note-dropdown-item{color: var(--text) !important;}
a.note-dropdown-item:hover{background: var(--surface-2);}

/* Summernote 안의 테이블 */
.note-editor .note-editing-area .note-editable table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-medium);   /* 바깥 테두리 */
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-1);
  color: var(--input-text, var(--text));
}

.note-editor .note-editing-area .note-editable th,
.note-editor .note-editing-area .note-editable td {
  border: 1px solid var(--border-light) !important;    /* 내부 그리드 */
  padding: 10px 12px;
  vertical-align: top;
}

.note-editor .note-editing-area .note-editable thead th {
  background: var(--surface-2);
  font-weight: 600;
}

/* hover 강조 */
.note-editor .note-editing-area .note-editable tbody tr:hover td {
  background: color-mix(in oklab, var(--surface-1), var(--text) 4%);
}

/* hr, 툴바/모달/드롭다운 선 공통 적용 */
.note-editor :is(hr,
                 .note-toolbar,
                 .note-statusbar,
                 .dropdown-menu,
                 .note-popover,
                 .note-modal-content,
                 .note-modal-header,
                 .note-modal-footer) {
  border-color: var(--border-medium) !important;
}

.note-modal-title{color: var(--text) !important;}
.note-modal-content{background:var(--bg) !important; border-color: var(--border-dark) !important;}
.note-modal-footer{display:none;}
.note-modal-body{width:100%;}
.note-modal-body span{color: var(--text);}
.note-modal .note-modal-body label{color: var(--text);}
.note-icon-close::before{color:var(--input-text);}
.note-editor .note-toolbar>.note-btn-group, .note-popover .popover-content>.note-btn-group{ margin-top:0px !important;}
.note-dropdown-menu.dropdown-style{min-width: 160px !important;}

.note-modal{
min-height:100% !important;
}


.note-modal.open{
    display: flex !important;
    justify-content: center;
align-items: center;
}
.note-align-list-bt{min-width: auto !important;}
.note-align-list-bt > div{margin:0px !important;}
.note-align-list-bt .note-btn-group {display: flex;}
.note-align-list-bt .note-btn-group.note-list{ margin-top:6px !important;}
.note-bg-color-box {min-width:auto !important;}
.note-bg-color-box button {min-height:auto !important;}


/* =========================================================
   코인주라 Chart Study common theme fit
   ========================================================= */
.cj-chart-study-view-v20260517{
  color-scheme:light;
}

.cj-chart-study-view-v20260517 :is(button, summary){
  font-family:inherit;
}

html.theme-dark .cj-chart-study-view-v20260517{
  color-scheme:dark;
}

html.theme-dark .cj-chart-study-view-v20260517,
html.theme-dark #bo_v_con.cj-chart-study-view-v20260517__post-body{
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}

html.theme-dark .cj-chart-study-view-v20260517__canvas-wrap,
html.theme-dark .cj-chart-study-view-v20260517__summary-card,
html.theme-dark .cj-chart-study-view-v20260517__panel,
html.theme-dark #bo_v_con.cj-chart-study-view-v20260517__post-body ul{
  border-color:var(--border-medium);
}

@media (prefers-color-scheme:dark){
  :root:not(.theme-light):not(.theme-dark) .cj-chart-study-view-v20260517{
    color-scheme:dark;
  }

  :root:not(.theme-light):not(.theme-dark) .cj-chart-study-view-v20260517,
  :root:not(.theme-light):not(.theme-dark) #bo_v_con.cj-chart-study-view-v20260517__post-body{
    box-shadow:0 10px 28px rgba(0,0,0,.34);
  }

  :root:not(.theme-light):not(.theme-dark) .cj-chart-study-view-v20260517__canvas-wrap,
  :root:not(.theme-light):not(.theme-dark) .cj-chart-study-view-v20260517__summary-card,
  :root:not(.theme-light):not(.theme-dark) .cj-chart-study-view-v20260517__panel,
  :root:not(.theme-light):not(.theme-dark) #bo_v_con.cj-chart-study-view-v20260517__post-body ul{
    border-color:var(--border-medium);
  }
}