/* ============================================================================
   connecthub-theme.css — .ch-* 공용 컴포넌트 (관리자 문제은행 탭 등이 사용)
   클래스명은 admin.html 이 참조하므로 유지하고, 스킨만 애플 시스템으로 교체했다.
   토큰 정의는 css/apple.css 한 곳에만 있다.
   ============================================================================ */

.ch-theme{
  font-family:var(--ap-font);
  color:var(--ap-label);
  background:var(--ap-bg);
  -webkit-font-smoothing:antialiased;
  font-size:var(--ap-t-subhead);
  line-height:var(--ap-t-subhead-lh);
}
.ch-theme *{box-sizing:border-box}
.ch-mono{font-family:var(--ap-font-mono);font-variant-numeric:tabular-nums}

/* ── 앱 셸 ────────────────────────────────────────────────────────────── */
.ch-gnb{
  position:sticky;top:0;z-index:30;
  height:52px;display:flex;align-items:center;gap:var(--ap-s1);padding:0 var(--ap-s6);
  background:var(--ap-chrome);color:var(--ap-label);
  backdrop-filter:var(--ap-material);-webkit-backdrop-filter:var(--ap-material);
  border-bottom:1px solid var(--ap-separator-hair);
  font-size:var(--ap-t-subhead);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ch-gnb{background:var(--ap-chrome-solid)}
}
.ch-gnb-brand{margin-right:var(--ap-s3);font-size:var(--ap-t-callout);font-weight:600;letter-spacing:-.009em}
.ch-gnb-item{
  display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 var(--ap-s3);border-radius:var(--ap-r-sm);white-space:nowrap;
  color:var(--ap-label-2);cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease);
}
.ch-gnb-item:hover{background:var(--ap-fill);color:var(--ap-label)}
.ch-gnb-item.active{background:var(--ap-blue-tint);color:var(--ap-blue-text);font-weight:600}
.ch-gnb-right{margin-left:auto;display:flex;align-items:center;gap:var(--ap-s3)}
.ch-gnb-email{font-size:var(--ap-t-caption);color:var(--ap-label-3)}

.ch-shell{display:flex;min-height:calc(100vh - 52px)}
.ch-lnb{
  width:224px;flex-shrink:0;padding:var(--ap-s3) 0;
  position:sticky;top:52px;align-self:flex-start;max-height:calc(100vh - 52px);overflow-y:auto;
  background:var(--ap-surface-2);border-right:1px solid var(--ap-separator-soft);
}
.ch-lnb-head{
  padding:0 var(--ap-s4) var(--ap-s1);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ap-label-4);
}
.ch-lnb-list{display:flex;flex-direction:column;gap:2px;padding:0 var(--ap-s2)}
.ch-lnb-item{
  display:block;min-height:36px;padding:8px 12px;border-radius:var(--ap-r-sm);
  font-size:var(--ap-t-subhead);color:var(--ap-label-2);cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease);
}
.ch-lnb-item:hover{background:var(--ap-fill);color:var(--ap-label)}
.ch-lnb-item.active{background:var(--ap-blue-tint);color:var(--ap-blue-text);font-weight:600}

.ch-main{flex:1;min-width:0;padding:var(--ap-s6)}
.ch-main-inner{width:var(--ap-content-wide);margin:0 auto}
.ch-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:var(--ap-s2);
  font-size:var(--ap-t-caption);color:var(--ap-label-3);
}
.ch-breadcrumb a{color:var(--ap-label-3);text-decoration:none}
.ch-breadcrumb a:hover{color:var(--ap-blue-text)}
.ch-h1{
  font-size:var(--ap-t-title1);line-height:var(--ap-t-title1-lh);letter-spacing:var(--ap-t-title1-ls);
  font-weight:700;color:var(--ap-label);
}
.ch-subtitle{margin-top:var(--ap-s1);font-size:var(--ap-t-subhead);color:var(--ap-label-3)}

/* ── 카드 ─────────────────────────────────────────────────────────────── */
.ch-card{background:var(--ap-surface);border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-lg);box-shadow:var(--ap-shadow-xs)}
.ch-card-outlined{background:var(--ap-surface);border:1px solid var(--ap-separator-soft);border-radius:var(--ap-r-lg)}
.ch-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ap-s3);padding:var(--ap-s4) var(--ap-s5) var(--ap-s2)}
.ch-card-title{font-size:var(--ap-t-subhead);font-weight:600;color:var(--ap-label)}
.ch-card-sub{margin-top:2px;font-size:var(--ap-t-caption);color:var(--ap-label-3)}
.ch-card-body{padding:0 var(--ap-s5) var(--ap-s5)}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.ch-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:8px 16px;border-radius:var(--ap-r-pill);
  font-family:inherit;font-size:var(--ap-t-footnote);font-weight:500;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),
             color var(--ap-dur-1) var(--ap-ease),transform var(--ap-dur-1) var(--ap-ease-out);
}
.ch-btn:active:not(:disabled){transform:scale(.97)}
.ch-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.ch-btn-primary{background:var(--ap-blue);color:#fff}
.ch-btn-primary:hover:not(:disabled){background:var(--ap-blue-hover)}
.ch-btn-outline{background:var(--ap-surface);border-color:var(--ap-separator);color:var(--ap-label)}
.ch-btn-outline:hover:not(:disabled){background:var(--ap-fill);border-color:var(--ap-gray-3)}
.ch-btn-danger{background:var(--ap-red);color:#fff}
.ch-btn-danger:hover:not(:disabled){background:var(--ap-red-hover)}
.ch-btn-ghost{background:transparent;color:var(--ap-label-2)}
.ch-btn-ghost:hover:not(:disabled){background:var(--ap-fill);color:var(--ap-label)}
.ch-btn-sm{min-height:30px;padding:5px 12px;font-size:var(--ap-t-caption)}
@media (pointer:coarse){.ch-btn,.ch-btn-sm{min-height:var(--ap-tap)}}

/* ── 필터 필 · 토글 ───────────────────────────────────────────────────── */
.ch-pill-group{display:flex;flex-wrap:wrap;gap:6px}
.ch-pill{
  display:inline-flex;align-items:center;gap:6px;
  min-height:32px;padding:6px 14px;border-radius:var(--ap-r-pill);
  background:var(--ap-surface);border:1px solid var(--ap-separator);color:var(--ap-label-2);
  font-size:var(--ap-t-footnote);font-weight:500;cursor:pointer;
  transition:background var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease),color var(--ap-dur-1) var(--ap-ease);
}
.ch-pill:hover{background:var(--ap-fill);border-color:var(--ap-gray-3)}
.ch-pill.active{background:var(--ap-blue);border-color:var(--ap-blue);color:#fff}
.ch-pill .ch-count{font-size:var(--ap-t-caption);color:var(--ap-label-4)}
.ch-pill.active .ch-count{color:rgba(255,255,255,.8)}
@media (pointer:coarse){.ch-pill{min-height:var(--ap-tap)}}

/* 세그먼티드 토글 */
.ch-toggle{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;background:var(--ap-fill);border-radius:var(--ap-r)}
.ch-toggle button{
  min-height:30px;padding:5px 12px;border:none;border-radius:8px;
  background:transparent;color:var(--ap-label-2);
  font-family:inherit;font-size:var(--ap-t-caption);font-weight:500;cursor:pointer;
  transition:background var(--ap-dur-2) var(--ap-ease-out),color var(--ap-dur-1) var(--ap-ease),box-shadow var(--ap-dur-2) var(--ap-ease-out);
}
.ch-toggle button:hover{color:var(--ap-label)}
.ch-toggle button.active{background:var(--ap-surface);color:var(--ap-label);font-weight:600;box-shadow:var(--ap-shadow-xs)}

/* ── 밑줄형 탭 ────────────────────────────────────────────────────────── */
.ch-tabs{display:flex;gap:var(--ap-s1);border-bottom:1px solid var(--ap-separator-soft);overflow-x:auto}
.ch-tab{
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:9px 14px;margin-bottom:-1px;white-space:nowrap;
  background:none;border:none;border-bottom:2px solid transparent;
  font-family:inherit;font-size:var(--ap-t-subhead);color:var(--ap-label-3);cursor:pointer;
  transition:color var(--ap-dur-1) var(--ap-ease),border-color var(--ap-dur-1) var(--ap-ease);
}
.ch-tab:hover{color:var(--ap-label)}
.ch-tab.active,.ch-tabs.blue .ch-tab.active{border-bottom-color:var(--ap-blue);color:var(--ap-blue-text);font-weight:600}
.ch-tab .ch-count{font-size:var(--ap-t-caption);color:var(--ap-label-4)}

/* ── 배지 ─────────────────────────────────────────────────────────────── */
.ch-badge{
  display:inline-block;padding:3px 10px;border-radius:var(--ap-r-pill);
  font-size:var(--ap-t-caption2);line-height:16px;font-weight:600;
}
.ch-badge-green{background:var(--ap-green-tint);color:var(--ap-green)}
.ch-badge-blue{background:var(--ap-blue-tint);color:var(--ap-blue-text)}
.ch-badge-amber{background:var(--ap-orange-tint);color:var(--ap-orange)}
.ch-badge-red{background:var(--ap-red-tint);color:var(--ap-red)}
.ch-badge-gray{background:var(--ap-fill);color:var(--ap-label-2)}
.ch-badge-indigo{background:var(--ap-indigo-tint);color:var(--ap-indigo)}
.ch-badge-orange{background:var(--ap-orange-tint);color:var(--ap-orange)}
.ch-badge-purple{background:var(--ap-purple-tint);color:var(--ap-purple)}

/* ── 인풋 · 셀렉트 ────────────────────────────────────────────────────── */
.ch-input,.ch-select,.ch-textarea{
  width:100%;min-height:38px;padding:9px 13px;
  background:var(--ap-surface);color:var(--ap-label);
  border:1px solid var(--ap-separator);border-radius:var(--ap-r);
  font-family:inherit;font-size:var(--ap-t-footnote);line-height:20px;
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--ap-dur-1) var(--ap-ease),box-shadow var(--ap-dur-1) var(--ap-ease);
}
.ch-input:hover,.ch-select:hover,.ch-textarea:hover{border-color:var(--ap-gray-3)}
.ch-input:focus,.ch-select:focus,.ch-textarea:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 4px var(--ap-blue-ring)}
.ch-input::placeholder,.ch-textarea::placeholder{color:var(--ap-label-4)}
.ch-input:disabled,.ch-select:disabled,.ch-textarea:disabled{background:var(--ap-fill);color:var(--ap-label-4);cursor:not-allowed}
.ch-textarea{min-height:96px;line-height:1.65;resize:vertical}
.ch-select{
  cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
@media (pointer:coarse){.ch-input,.ch-select,.ch-textarea{min-height:var(--ap-tap)}}

/* ── 데이터 테이블 ────────────────────────────────────────────────────── */
.ch-table-wrap{
  background:var(--ap-surface);border:1px solid var(--ap-separator-soft);
  border-radius:var(--ap-r-lg);overflow:auto;box-shadow:var(--ap-shadow-xs);
}
.ch-table{width:100%;font-size:var(--ap-t-footnote)}
.ch-table thead th{
  position:sticky;top:0;z-index:1;
  padding:10px 12px;text-align:left;white-space:nowrap;user-select:none;
  background:var(--ap-surface-2);color:var(--ap-label-3);
  font-size:var(--ap-t-caption2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--ap-separator);
}
.ch-table tbody td{
  padding:11px 12px;color:var(--ap-label-2);vertical-align:middle;
  border-bottom:1px solid var(--ap-separator-soft);
}
.ch-table tbody tr{transition:background var(--ap-dur-1) var(--ap-ease)}
.ch-table tbody tr:last-child td{border-bottom:none}
.ch-table tbody tr:hover td{background:var(--ap-surface-2)}
.ch-table tbody tr.selected td{background:var(--ap-blue-tint)}
.ch-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ch-table-filter{padding:6px 8px;background:var(--ap-surface-2);border-bottom:1px solid var(--ap-separator-soft)}
.ch-table-filter input,.ch-table-filter select{
  width:100%;padding:5px 9px;border-radius:var(--ap-r-xs);
  border:1px solid var(--ap-separator);background:var(--ap-surface);
  font-family:inherit;font-size:var(--ap-t-caption);
}
.ch-table-filter input:focus,.ch-table-filter select:focus{outline:none;border-color:var(--ap-blue);box-shadow:0 0 0 3px var(--ap-blue-ring)}
.ch-table-empty{padding:var(--ap-s7) var(--ap-s3);text-align:center;font-size:var(--ap-t-subhead);color:var(--ap-label-3)}

/* ── 모달 · 슬라이드 패널 ─────────────────────────────────────────────── */
.ch-modal-overlay{
  position:fixed;inset:0;z-index:900;
  display:flex;align-items:center;justify-content:center;padding:var(--ap-s4);
  background:rgba(0,0,0,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:ap-fade var(--ap-dur-2) var(--ap-ease) both;
}
.ch-modal{
  width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  background:var(--ap-surface);border-radius:var(--ap-r-xl);box-shadow:var(--ap-shadow-lg);
  animation:ap-rise var(--ap-dur-3) var(--ap-ease-sheet) both;
}
.ch-modal-head{
  padding:16px 20px;border-bottom:1px solid var(--ap-separator-soft);
  font-size:var(--ap-t-headline);font-weight:600;letter-spacing:-.012em;
}
.ch-modal-body{padding:var(--ap-s5)}
.ch-slide-overlay{
  position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.28);
  animation:ap-fade var(--ap-dur-2) var(--ap-ease) both;
}
.ch-slide{
  position:fixed;top:0;right:0;bottom:0;z-index:901;
  width:480px;max-width:100%;overflow-y:auto;
  background:var(--ap-surface);box-shadow:var(--ap-shadow-lg);
  border-left:1px solid var(--ap-separator-soft);
  animation:ch-slide-in var(--ap-dur-3) var(--ap-ease-sheet) both;
}
@keyframes ch-slide-in{from{transform:translateX(100%)}to{transform:none}}

/* ── 유틸 ─────────────────────────────────────────────────────────────── */
.ch-row{display:flex;align-items:center;gap:var(--ap-s2)}
.ch-between{display:flex;align-items:center;justify-content:space-between;gap:var(--ap-s3)}
.ch-stack{display:flex;flex-direction:column;gap:var(--ap-s4)}
.ch-label{font-size:var(--ap-t-footnote);font-weight:500;color:var(--ap-label-2)}
.ch-help{font-size:var(--ap-t-caption);color:var(--ap-label-3)}
.ch-muted{color:var(--ap-label-3)}

@media (max-width:640px){
  .ch-lnb{display:none}
  .ch-main{padding:var(--ap-s4)}
  .ch-slide{width:100%}
}