/* 매도왕 2026 디자인 개편 — 재사용 컴포넌트
   반복 UI(버튼/카드/배지/칩/입력/select)를 design-tokens.css 토큰 기반으로 추출.
   1회성 섹션 스타일은 각 템플릿에 인라인 유지. */

/* ── Button ───────────────────────────────────────────── */
.sk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-body);font-weight:600;letter-spacing:var(--tracking);
  border:none;border-radius:var(--radius-control);
  background:var(--primary);color:#fff;cursor:pointer;
  transition:background .15s ease;text-decoration:none;box-sizing:border-box;
}
.sk-btn:hover{background:var(--primary-hover);color:#fff}
.sk-btn--sm{height:38px;padding:0 16px;font-size:13.5px}
.sk-btn--md{height:46px;padding:0 18px;font-size:15px}
.sk-btn--lg{height:54px;padding:0 22px;font-size:16px}
.sk-btn--block{width:100%}
.sk-btn--outline{background:var(--surface-card);color:var(--text-strong);border:1.5px solid var(--border)}
.sk-btn--outline:hover{background:var(--surface-sunken);color:var(--text-strong)}
.sk-btn:disabled,.sk-btn.is-disabled{background:var(--grey-200);color:var(--grey-400);cursor:default}

/* ── Card ─────────────────────────────────────────────── */
.sk-card{
  background:var(--surface-card);border-radius:var(--radius-card-lg);
  box-shadow:var(--shadow-card);box-sizing:border-box;
}
.sk-card--sheet{border-radius:var(--radius-sheet)}

/* ── Badge (pill) ─────────────────────────────────────── */
.sk-badge{
  display:inline-flex;align-items:center;gap:6px;line-height:1;
  font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius-pill);
}
.sk-badge--primary{background:var(--primary-bg);color:var(--primary)}
.sk-badge--grey{background:var(--grey-100);color:var(--grey-700)}
.sk-badge--success{background:#E6F6EC;color:#0F9D58}
.sk-badge--chip{border-radius:var(--radius-chip);padding:4px 10px;font-size:12.5px}

/* ── Chip (탭 pill) ───────────────────────────────────── */
.sk-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sk-chips--primary{--chip-accent:var(--primary)}
.sk-chips--dark{--chip-accent:var(--black)}
.sk-chip{
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  font-family:var(--font-body);font-weight:600;cursor:pointer;
  padding:10px 16px;font-size:13.5px;border-radius:var(--radius-pill);
  border:1.5px solid var(--border);background:var(--surface-card);color:var(--grey-700);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.sk-chip.is-on{background:var(--chip-accent);border-color:var(--chip-accent);color:#fff}

/* ── Input ────────────────────────────────────────────── */
.sk-input{
  width:100%;box-sizing:border-box;height:50px;
  border:1px solid var(--border);border-radius:var(--radius-control);
  padding:0 14px;font-family:var(--font-body);font-size:15px;
  color:var(--text-strong);background:#fff;outline-color:var(--primary);
}

/* ── Select (화살표: 인라인 SVG 금지, Material 아이콘 절대배치) ── */
.sk-select-wrap{position:relative}
.sk-select{
  width:100%;box-sizing:border-box;height:50px;
  border:1px solid var(--border);border-radius:var(--radius-control);
  padding:0 40px 0 14px;font-family:var(--font-body);font-size:15px;
  color:var(--text-strong);background:#fff;outline-color:var(--primary);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.sk-select-wrap__arrow{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-family:var(--font-icon);font-size:20px;
  color:var(--grey-600);line-height:1;
}

/* ── Icon 채움 ────────────────────────────────────────── */
.sk-fill{font-variation-settings:'FILL' 1}

/* ── 사이트 헤더 네비 링크 (공용 헤더 전 페이지 적용, 부트스트랩/토큰 파란색 링크 방지) ──
   기본·방문·포커스·활성 = 회색, hover 에서만 파랑. (visited까지 파랑으로 두면 클릭 후 파랗게 굳음) */
.mdw-nav-link,.mdw-nav-link:visited,.mdw-nav-link:focus,.mdw-nav-link:active{color:var(--grey-700);text-decoration:none}
.mdw-nav-link:hover{color:var(--primary);text-decoration:none}

/* ── 재설계 스코프: Bootstrap / style.css 전역 element 규칙보다 우선 ──
   style.css가 body{font-weight:700; font-family:Noto Sans; font-size:16px}와
   h2/h3{font-family:Noto Sans}를 강제해 새 디자인으로 새어 들어오는 것을 차단.
   클래스 특정성(0,1,0)이 element 규칙(0,0,1)을 이기고, 인라인 스타일은 그대로 우선. */
.mdw-scope{
  font-family:var(--font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  color:var(--text-strong);
  letter-spacing:var(--tracking);
}
.mdw-scope h1,.mdw-scope h2,.mdw-scope h3,.mdw-scope h4,.mdw-scope h5,.mdw-scope h6,
.mdw-scope p,.mdw-scope span,.mdw-scope div,.mdw-scope a,.mdw-scope button,
.mdw-scope input,.mdw-scope select,.mdw-scope textarea,.mdw-scope label{
  font-family:var(--font-body);
}
/* 헤딩: 인라인 크기·굵기·색은 유지하되, 폰트/줄간격만 재설계 기준으로 복원 */
.mdw-scope h1,.mdw-scope h2,.mdw-scope h3,.mdw-scope h4,.mdw-scope h5,.mdw-scope h6{
  line-height:1.3;
  color:var(--text-strong);
}
/* .material-symbols-rounded는 아이콘 폰트 유지 (위 규칙보다 뒤에 와서 우선) */
.mdw-scope .material-symbols-rounded{font-family:'Material Symbols Rounded'}

/* 박스 모델: 원본 프로토타입은 content-box 기본 + 인라인으로 필요한 곳만 border-box.
   Bootstrap reboot의 전역 border-box(*)를 스코프 안에서 content-box로 되돌려
   padding 있는 박스 크기를 원본과 일치시킴. 인라인 box-sizing:border-box는 그대로 우선. */
.mdw-scope *{box-sizing:content-box}
/* width:100%가 필요한 입력·버튼은 border-box 유지 */
.mdw-scope .sk-btn,.mdw-scope .sk-input,.mdw-scope .sk-select{box-sizing:border-box}
/* Bootstrap 로그인 모달은 border-box 유지(모달 레이아웃 보호) */
.mdw-scope .modal,.mdw-scope .modal *{box-sizing:border-box}