/* Skills 구매자·판매자 화면. 전체상품(product-catalog.css)과 같은 색·테두리·간격을 쓴다. */
.skills-page, .skills-admin { --sk-ink:#17203a; --sk-blue:#344cdb; --sk-blue-deep:#263fae; --sk-line:#e1e6f0; --sk-line-soft:#edf0f6; --sk-field:#c3cce0; --sk-muted:#536077; --sk-soft:#f6f8fc; --sk-tint:#f1f4ff; --sk-good:#147a52; --sk-bad:#a12627; --sk-radius:14px; --sk-shadow:0 1px 2px rgba(23,32,58,.05); --sk-shadow-up:0 10px 24px -14px rgba(23,32,58,.28); }
.skills-page { color:var(--sk-ink); max-width:1200px; margin:154px auto 64px; padding:0 24px; font-size:14px; line-height:1.6; }
.skills-page *, .skills-page *::before, .skills-page *::after { box-sizing:border-box; }
/* :where 로 우선순위를 클래스 하나 수준에 맞춘다. 아래 부품 규칙(.sk-note--ai·.sk-terms 등)의 여백이 초기화에 눌리지 않게 한다. */
.skills-page :where(h1,h2,h3,p,ul,ol,dl,dd) { margin:0; padding:0; }
.skills-page ul { list-style:none; }
.skills-page a { color:var(--sk-blue-deep); }
.skills-page :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--sk-blue); outline-offset:2px; }
.skills-page [hidden] { display:none !important; }

.sk-crumb { color:#59667b; font-size:13px; margin-bottom:8px; overflow-wrap:anywhere; }
/* 줄 높이는 그대로 두고 눌리는 영역만 44px 로 넓힌다. */
.sk-crumb a, .sk-note a, .sk-help a { padding:13px 0; }
.sk-crumb a { color:#59667b; text-decoration:none; }
.sk-crumb a:hover { color:var(--sk-blue-deep); text-decoration:underline; }
.sk-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.sk-head h1 { font-size:clamp(22px,2.6vw,32px); line-height:1.3; letter-spacing:-.04em; font-weight:800; overflow-wrap:anywhere; }
.sk-head p { color:var(--sk-muted); margin-top:6px; font-size:15px; overflow-wrap:anywhere; }
.sk-head-actions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }

.sk-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px; border-radius:10px; border:1px solid var(--sk-blue); background:var(--sk-blue); color:#fff !important; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; transition:background-color .15s, border-color .15s; }
.sk-btn:hover { background:var(--sk-blue-deep); border-color:var(--sk-blue-deep); }
.sk-btn:disabled { opacity:.55; cursor:not-allowed; }
.sk-btn--ghost { background:#fff; color:var(--sk-blue-deep) !important; border-color:var(--sk-field); }
.sk-btn--ghost:hover { background:var(--sk-tint); border-color:#9aade4; }
.sk-btn--danger { background:#fff; color:var(--sk-bad) !important; border-color:#e2b4b4; }
.sk-btn--danger:hover { background:#fdf3f3; border-color:#d49a9a; }
.sk-btn--small { min-height:44px; padding:6px 14px; font-size:13px; font-weight:600; }

.sk-search { display:flex; gap:8px; }
.sk-search input { flex:1; min-width:0; height:48px; padding:0 16px; border:1px solid var(--sk-field); border-radius:12px; background:#fff; font-size:16px; color:var(--sk-ink); box-shadow:var(--sk-shadow); transition:border-color .15s; }
.sk-search input:hover, .sk-search input:focus { border-color:var(--sk-blue); }
.sk-search .sk-btn { min-height:48px; padding:8px 22px; border-radius:12px; }
.sk-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 18px; }
.sk-chip { display:inline-flex; align-items:center; min-height:44px; padding:6px 16px; border:1px solid var(--sk-line); border-radius:22px; background:#fff; color:#34437c !important; font-size:13px; text-decoration:none; transition:background-color .15s, border-color .15s; }
.sk-chip:hover { background:var(--sk-tint); border-color:#b9c6ee; }
.sk-chip.is-on { background:var(--sk-ink); border-color:var(--sk-ink); color:#fff !important; font-weight:700; }

.sk-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
/* 카드 전체가 링크다. 눌리는 영역이 카드 크기와 같다. */
.sk-card { display:flex; flex-direction:column; min-width:0; height:100%; padding:18px; border:1px solid var(--sk-line); border-radius:var(--sk-radius); background:#fff; box-shadow:var(--sk-shadow); color:var(--sk-ink) !important; text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.sk-card:hover { border-color:#9aade4; box-shadow:var(--sk-shadow-up); transform:translateY(-2px); }
.sk-card-top { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.sk-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px; background:#eef2ff; color:#34437c; font-size:12px; font-weight:600; white-space:nowrap; }
.sk-tag:empty { display:none; }
.sk-tag--ai { background:#fff4d6; color:#7a5200; }
.sk-tag--state { background:#e9f6ef; color:var(--sk-good); }
.sk-tag--wait { background:#fff4d6; color:#7a5200; }
.sk-tag--bad { background:#fdeeee; color:var(--sk-bad); }
.sk-tag--plain { background:var(--sk-soft); color:var(--sk-muted); }
.sk-card h2 { font-size:17px; font-weight:750; line-height:1.4; letter-spacing:-.02em; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.sk-card p { color:var(--sk-muted); font-size:13px; margin:6px 0 14px; overflow-wrap:anywhere; word-break:keep-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.sk-card-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--sk-line-soft); display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:12px; color:#59667b; }
.sk-card-foot strong { font-size:17px; font-weight:800; color:var(--sk-blue-deep); white-space:nowrap; }
.sk-card-foot strong small { font-size:12px; font-weight:500; color:#59667b; margin-left:2px; }
.sk-card-foot span { min-width:0; overflow-wrap:anywhere; text-align:right; }
.sk-empty { padding:32px 16px; text-align:center; background:var(--sk-soft); border:1px dashed #c3cce0; border-radius:var(--sk-radius); color:var(--sk-muted); }
.sk-more { display:flex; justify-content:center; margin-top:16px; }

.sk-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:16px; align-items:start; }
.sk-panel { min-width:0; padding:20px; border:1px solid var(--sk-line); border-radius:var(--sk-radius); background:#fff; box-shadow:var(--sk-shadow); }
.sk-panel + .sk-panel { margin-top:14px; }
.sk-panel h2 { font-size:17px; font-weight:750; letter-spacing:-.02em; margin-bottom:12px; }
.sk-panel h3 { font-size:13px; font-weight:700; color:var(--sk-muted); margin:16px 0 6px; }
.sk-panel h2 + h3 { margin-top:0; }
.sk-panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sk-panel-head h2 { margin-bottom:0; }
.sk-panel--run { border-color:#cbd5f6; }
.sk-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; color:var(--sk-muted); font-size:13px; }
.sk-meta span { padding:3px 10px; border:1px solid var(--sk-line-soft); border-radius:999px; background:var(--sk-soft); }
.sk-meta strong { color:var(--sk-ink); }
.sk-price { font-size:22px; font-weight:800; color:var(--sk-blue-deep); white-space:nowrap; }
.sk-price small { font-size:12px; font-weight:500; color:var(--sk-muted); margin-left:3px; }
.sk-note { color:var(--sk-muted); font-size:13px; overflow-wrap:anywhere; }
.sk-note--ai { margin-top:14px; padding:10px 12px; border-radius:10px; background:#fff8e6; color:#6b4a00; }
.sk-desc { white-space:pre-wrap; overflow-wrap:anywhere; color:#33405c; }

.sk-field { margin-bottom:12px; min-width:0; }
.sk-field > label, .sk-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; font-weight:700; margin-bottom:5px; overflow-wrap:anywhere; }
.sk-field > label small, .sk-label small { color:#647089; font-weight:400; text-align:right; }
.sk-field > label small.sk-key { font-family:"Roboto Mono",Consolas,monospace; font-size:12px; }
.sk-field :is(input[type=text],input[type=number],input[type=url],input[type=password],select,textarea) { width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--sk-field); border-radius:10px; background:#fff; font-size:16px; color:var(--sk-ink); transition:border-color .15s; }
.sk-field :is(input,select,textarea):hover, .sk-field :is(input,select,textarea):focus { border-color:var(--sk-blue); }
.sk-field :is(input,textarea)::placeholder, .sk-search input::placeholder { color:#8e99b0; }
.sk-field textarea { min-height:88px; resize:vertical; line-height:1.5; }
.sk-field textarea.sk-code { font-family:"Roboto Mono",Consolas,monospace; font-size:13px; min-height:132px; white-space:pre; overflow:auto; background:#fbfcfe; }
.sk-field .sk-help { color:#647089; font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.sk-check { display:flex; align-items:center; gap:8px; min-height:44px; font-size:14px; cursor:pointer; }
.sk-check input { width:20px; height:20px; accent-color:var(--sk-blue); flex-shrink:0; }
.sk-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sk-actions { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin-top:12px; }
.sk-actions .sk-note { flex:1 1 180px; }
.sk-toggle { background:none; border:0; padding:0 4px; min-height:44px; color:var(--sk-blue-deep); text-decoration:underline; text-underline-offset:3px; font-size:13px; cursor:pointer; }
.sk-row--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* 판매자 편집: 샘플 고르기, 항목 편집기, 파일 올리기, 참고 자료·단계 */
.sk-sample { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:12px 20px; align-items:end; margin-bottom:14px; background:var(--sk-tint); border-color:#cbd5f6; }
.sk-sample h2 { margin-bottom:4px; }
.sk-schema { margin-top:12px; padding-top:12px; border-top:1px solid var(--sk-line-soft); }
.sk-schema-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; }
.sk-schema-head h3 { margin:0; font-size:14px; color:var(--sk-ink); }
.sk-schema-head h3 small, .sk-more-options summary small { color:#647089; font-weight:400; margin-left:4px; }
.sk-brows { display:flex; flex-direction:column; gap:6px; margin:6px 0 8px; }
.sk-brow { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.9fr) minmax(0,1.4fr) minmax(0,.8fr) auto auto; gap:6px; align-items:center; min-width:0; }
.sk-brow :is(input[type=text],input[type=number],select), .sk-ref :is(input[type=text],textarea) { width:100%; min-width:0; min-height:44px; padding:9px 10px; border:1px solid var(--sk-field); border-radius:10px; background:#fff; font-size:16px; color:var(--sk-ink); }
.sk-brow :is(input,select):hover, .sk-brow :is(input,select):focus, .sk-ref :is(input,textarea):hover, .sk-ref :is(input,textarea):focus { border-color:var(--sk-blue); }
.sk-brow :is(input,select)::placeholder, .sk-ref :is(input,textarea)::placeholder { color:#8e99b0; }
.sk-brow .sk-b-name { font-family:"Roboto Mono",Consolas,monospace; font-size:14px; }
/* 문자열이 아닌 항목은 선택지·최대 글자 칸이 없다. 설명 칸이 그 자리를 채운다. */
.sk-brow:has(.sk-b-enum[hidden]) .sk-b-desc { grid-column:3 / 6; }
.sk-sub { margin-top:14px; padding-top:12px; border-top:1px solid var(--sk-line-soft); }
.sk-sub .sk-help, .sk-more-options > .sk-help { color:#647089; font-size:12px; margin:4px 0 8px; overflow-wrap:anywhere; }
.sk-refs { display:flex; flex-direction:column; gap:8px; }
.sk-ref { min-width:0; padding:10px; border:1px solid var(--sk-line); border-radius:12px; background:var(--sk-soft); }
.sk-ref-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.sk-ref-head :is(.sk-ref-name,.sk-step-name) { flex:1 1 180px; }
.sk-ref-size { white-space:nowrap; }
.sk-ref details > summary, .sk-more-options > summary { display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--sk-blue-deep); font-size:13px; }
.sk-ref textarea { margin-top:6px; min-height:140px; resize:vertical; line-height:1.5; font-family:"Roboto Mono",Consolas,monospace; font-size:13px; white-space:pre-wrap; }
.sk-more-options { margin-top:10px; padding:0 12px; border:1px solid var(--sk-line); border-radius:12px; }
.sk-more-options[open] { padding-bottom:12px; }
.sk-more-options > summary { flex-wrap:wrap; font-weight:700; font-size:14px; color:var(--sk-ink); overflow-wrap:anywhere; }
.sk-uploads { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.sk-uploads .sk-help { flex:1 1 220px; margin-top:0; }
.sk-upload { position:relative; overflow:hidden; }
.sk-upload input[type=file] { position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); opacity:0; cursor:pointer; font-size:0; }
.sk-upload:focus-within { outline:3px solid var(--sk-blue); outline-offset:2px; }
.sk-chips--tight { margin:6px 0 0; }
.sk-chips--tight .sk-chip { font-family:"Roboto Mono",Consolas,monospace; cursor:pointer; }

/* 끌어다 놓기와 제출 전 확인 */
.sk-steps.is-drop { outline:3px dashed var(--sk-blue); outline-offset:6px; border-radius:var(--sk-radius); }
.sk-sample .sk-uploads { margin-top:10px; }
.sk-checkpanel { background:var(--sk-soft); }
.sk-checkpanel h2 { margin-bottom:0; }
.sk-checkpanel > .sk-schema-head { margin-bottom:8px; }
.sk-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 16px; font-size:13px; }
.sk-checklist li { display:flex; flex-wrap:wrap; gap:2px 8px; min-width:0; overflow-wrap:anywhere; }
.sk-checklist li.is-ok strong { color:var(--sk-good); font-weight:600; }
.sk-checklist li.is-todo strong { color:var(--sk-ink); }
.sk-checklist li span { color:var(--sk-muted); }

/* 제작 가이드 */
.sk-guide { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start; }
.sk-guide-nav { position:sticky; top:150px; padding:12px; border:1px solid var(--sk-line); border-radius:var(--sk-radius); background:#fff; }
.sk-guide-nav a { display:flex; align-items:center; min-height:44px; padding:4px 8px; border-radius:8px; color:var(--sk-ink); text-decoration:none; font-size:13px; }
.sk-guide-nav a:hover { background:var(--sk-tint); color:var(--sk-blue-deep); }
.sk-guide-body .sk-panel { scroll-margin-top:150px; }
.sk-guide-body .sk-panel > p, .sk-guide-body .sk-panel > ul, .sk-guide-body .sk-panel > ol { margin-bottom:10px; color:#33405c; overflow-wrap:anywhere; }
.sk-guide-body .sk-panel > :is(ul,ol) { padding-left:20px; }
.sk-guide-body .sk-panel > ul { list-style:disc; }
.sk-guide-body .sk-panel > ol { list-style:decimal; }
.sk-guide-body .sk-panel li { margin-bottom:4px; }
.sk-guide-body .sk-pre { margin-bottom:10px; max-height:420px; }
.sk-guide-body code { color:#33405c; padding:1px 5px; border-radius:5px; background:var(--sk-soft); font-family:"Roboto Mono",Consolas,monospace; font-size:12px; overflow-wrap:anywhere; }
.sk-guide-body .sk-pre code { padding:0; background:none; color:inherit; }
.sk-sample-card { padding:14px; border:1px solid var(--sk-line); border-radius:12px; }
.sk-sample-card + .sk-sample-card { margin-top:10px; }
.sk-sample-card h3 { margin:0 0 4px; font-size:15px; color:var(--sk-ink); }
.sk-sample-card .sk-card-top { margin-bottom:6px; }
.sk-sample-card details > summary { display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--sk-blue-deep); font-size:13px; }

.sk-alert { margin-top:12px; padding:10px 12px; border-radius:10px; font-size:13px; overflow-wrap:anywhere; }
.sk-alert--error { background:#fdeeee; color:var(--sk-bad); }
.sk-alert--ok { background:#e9f6ef; color:#0f5c3e; }
.sk-alert--info { background:#eef2ff; color:#2a3a8f; }
.sk-result { margin-top:16px; padding:14px; border-radius:12px; background:var(--sk-soft); border:1px solid var(--sk-line-soft); }
.sk-result-head { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:13px; }
.sk-result-head strong { font-size:15px; }
.sk-kv { display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr); gap:1px; background:var(--sk-line-soft); border:1px solid var(--sk-line-soft); border-radius:10px; overflow:hidden; font-size:13px; }
.sk-kv > :is(dt,dd) { background:#fff; padding:8px 10px; overflow-wrap:anywhere; min-width:0; }
.sk-kv > dt { background:#f9fafc; font-weight:700; color:#33405c; }
.sk-pre { margin:0; padding:12px 14px; max-height:320px; overflow:auto; border-radius:10px; background:#0f172a; color:#e6ebf5; font-family:"Roboto Mono",Consolas,monospace; font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.sk-table { width:100%; border-collapse:collapse; font-size:13px; table-layout:fixed; }
.sk-table :is(th,td) { padding:9px 8px; border-bottom:1px solid var(--sk-line-soft); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.sk-table th { padding:6px 8px; border-bottom-color:var(--sk-line); font-size:12px; font-weight:600; color:var(--sk-muted); }
.sk-table tbody tr:last-child td { border-bottom:0; }
.sk-table td:first-child { font-weight:600; }
.sk-table td.num, .sk-table th.num { text-align:right; white-space:nowrap; }
.sk-table td.num { font-variant-numeric:tabular-nums; }
.sk-tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.sk-tile { min-width:0; padding:14px 16px; border:1px solid var(--sk-line); border-radius:12px; background:#fff; box-shadow:var(--sk-shadow); }
.sk-tile span { display:block; color:var(--sk-muted); font-size:12px; }
.sk-tile strong { display:block; margin-top:2px; font-size:20px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.sk-tile--accent { background:var(--sk-tint); border-color:#cbd5f6; }
.sk-tile--accent strong { color:var(--sk-blue-deep); }
.sk-list { display:flex; flex-direction:column; gap:8px; }
.sk-item { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--sk-line); border-radius:12px; background:#fff; box-shadow:var(--sk-shadow); min-width:0; }
.sk-item-main { min-width:0; flex:1 1 220px; }
.sk-item-main strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.sk-item-main span { display:block; color:var(--sk-muted); font-size:12px; overflow-wrap:anywhere; }
.sk-item-side { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13px; }
.sk-steps { counter-reset:sk-step; }
.sk-steps > .sk-panel > h2 { display:flex; align-items:center; gap:8px; }
.sk-steps > .sk-panel > h2::before { counter-increment:sk-step; content:counter(sk-step); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--sk-tint); color:var(--sk-blue-deep); font-size:13px; font-weight:800; }
.sk-example + .sk-example { margin-top:12px; padding-top:12px; border-top:1px solid var(--sk-line-soft); }
.sk-example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sk-example .sk-label { font-size:12px; color:var(--sk-muted); }
.sk-terms { padding-left:18px; list-style:disc !important; color:#33405c; font-size:13px; }
.sk-terms li { margin-bottom:6px; overflow-wrap:anywhere; }
.sk-payout { padding:12px 14px; border-radius:10px; background:var(--sk-tint); font-size:13px; overflow-wrap:anywhere; }
.sk-payout strong { color:var(--sk-blue-deep); }

/* 마우스로 쓰는 넓은 화면에서만 보조 버튼·분류를 낮춘다. 터치 화면은 44px 을 유지한다. */
/* 판매자 등록 단계, 유형 선택, 1원 인증, 출금 신청 */
.sk-join-steps { display:flex; gap:6px; margin:0 0 12px; font-size:13px; color:var(--sk-muted); }
.sk-join-steps li { display:flex; align-items:center; gap:6px; flex:1 1 0; min-width:0; padding:8px 10px; border:1px solid var(--sk-line); border-radius:10px; background:#fff; }
.sk-join-steps li strong { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--sk-soft); font-size:12px; flex-shrink:0; }
.sk-join-steps li span { min-width:0; overflow-wrap:anywhere; }
.sk-join-steps li.is-on { border-color:#cbd5f6; background:var(--sk-tint); color:var(--sk-ink); font-weight:700; }
.sk-join-steps li.is-on strong { background:var(--sk-blue); color:#fff; }
.sk-join-steps li.is-done strong { background:#e9f6ef; color:var(--sk-good); }
.sk-seg { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; border:0; min-width:0; }
.sk-seg legend { width:100%; font-size:13px; font-weight:700; margin-bottom:5px; padding:0; }
.sk-seg label { flex:1 1 0; position:relative; min-width:0; cursor:pointer; }
.sk-seg input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.sk-seg span { display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--sk-field); border-radius:10px; background:#fff; font-size:15px; font-weight:600; }
.sk-seg input:checked + span { border-color:var(--sk-blue); background:var(--sk-tint); color:var(--sk-blue-deep); }
.sk-seg input:focus-visible + span { outline:2px solid var(--sk-blue); outline-offset:2px; }
.sk-subpanel { margin-top:14px; padding-top:14px; border-top:1px solid var(--sk-line-soft); }
.sk-subpanel > h3:first-child { margin-top:0; }
.sk-verify, .sk-payform { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:0 12px; align-items:end; margin-top:12px; }
.sk-verify .sk-actions, .sk-payform .sk-actions { margin:0 0 12px; }
.sk-verify input { letter-spacing:.3em; font-variant-numeric:tabular-nums; }
.sk-link { min-height:44px; padding:0 6px; border:0; background:none; color:var(--sk-blue-deep); font-size:13px; text-decoration:underline; white-space:nowrap; cursor:pointer; }
#sk-pay-panel { margin-bottom:12px; }
.sk-consent { margin-top:4px; }
.sk-consent .sk-check { align-items:flex-start; padding:6px 0; }
.sk-consent .sk-check input { margin-top:2px; }
.sk-consent .sk-check span { min-width:0; overflow-wrap:anywhere; }
.sk-consent .sk-check small { color:var(--sk-bad); font-weight:600; }
.sk-consent .sk-check a { text-decoration:underline; }
.sk-consent > .sk-note { margin:2px 0 4px 28px; font-size:12px; }
.sk-panel--notice { margin-bottom:12px; border-color:#f0d58a; background:#fffaf0; }
.sk-terms-doc h3 { color:var(--sk-ink); font-size:14px; margin:14px 0 4px; }
.sk-terms-doc .sk-panel > h3:first-of-type { margin-top:0; }
.sk-terms-doc li ul { list-style:disc; padding-left:18px; margin-top:4px; }
.sk-terms-doc .sk-table td { font-weight:400; }
.sk-terms-doc .sk-table td:first-child { font-weight:600; }
.sk-table--payout td .sk-note { display:block; font-weight:400; }
@media(min-width:861px) and (hover:hover) and (pointer:fine) {
 .sk-chip { min-height:36px; }
 .sk-btn--small { min-height:38px; }
 .sk-guide-nav a { min-height:34px; }
}
@media(prefers-reduced-motion:reduce) { .sk-card, .sk-btn, .sk-chip { transition:none; } .sk-card:hover { transform:none; } }
@media(max-width:1000px) { .sk-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sk-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:860px) {
 .sk-layout { grid-template-columns:minmax(0,1fr); gap:12px; }
 .sk-guide { grid-template-columns:minmax(0,1fr); gap:12px; }
 .sk-guide-nav { position:static; display:flex; flex-wrap:wrap; gap:2px 4px; padding:8px; }
 .sk-guide-nav a { padding:4px 10px; }
 .sk-guide-body .sk-panel { scroll-margin-top:110px; }
}
@media(max-width:760px) {
 .skills-page { margin-top:112px; margin-bottom:32px; padding:0 12px; }
 .sk-head { display:block; margin-bottom:10px; }
 .sk-head p { font-size:14px; margin-top:4px; }
 .sk-head-actions { margin-top:8px; }
 .sk-crumb { margin-bottom:6px; font-size:12px; }
 .sk-search input, .sk-search .sk-btn { height:44px; min-height:44px; border-radius:10px; }
 .sk-search input { padding:0 12px; }
 .sk-search .sk-btn { padding:8px 16px; }
 .sk-chips { margin:8px 0 10px; gap:4px; }
 .sk-chip { padding:4px 11px; font-size:12px; }
 .sk-grid { gap:10px; }
 .sk-panel { padding:12px; }
 .sk-panel + .sk-panel { margin-top:10px; }
 .sk-panel h2 { font-size:16px; margin-bottom:8px; }
 .sk-panel-head { margin-bottom:8px; }
 .sk-sample { grid-template-columns:minmax(0,1fr); gap:8px; margin-bottom:10px; }
 .sk-brow { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:8px; border:1px solid var(--sk-line); border-radius:10px; background:var(--sk-soft); }
 .sk-brow .sk-b-desc, .sk-brow:has(.sk-b-enum[hidden]) .sk-b-desc { grid-column:1 / -1; }
 .sk-ref { padding:8px; }
 .sk-more-options { padding:0 10px; }
 .sk-more-options[open] { padding-bottom:10px; }
 .sk-sample-card { padding:10px; }
 .sk-panel h3 { margin-top:12px; }
 .sk-meta { margin-top:8px; gap:4px; font-size:12px; }
 .sk-meta span { padding:2px 8px; }
 .sk-card { padding:12px; }
 .sk-card h2 { font-size:16px; }
 .sk-card p { margin:4px 0 10px; }
 .sk-card-foot { padding-top:8px; }
 .sk-field { margin-bottom:10px; }
 .sk-result { margin-top:12px; padding:10px; }
 .sk-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .sk-tile { padding:8px 10px; }
 .sk-tile strong { font-size:16px; }
 .sk-tiles .sk-tile:last-child:nth-child(odd) { grid-column:1 / -1; }
 .sk-table--payout :is(th,td) { padding-left:4px; padding-right:4px; }
 .sk-item { padding:10px 12px; }
 .sk-example-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
}
@media(max-width:560px) {
 .sk-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
 .sk-row, .sk-row--3 { grid-template-columns:minmax(0,1fr); gap:0; }
 .sk-checklist { grid-template-columns:minmax(0,1fr); }
 .sk-verify, .sk-payform { grid-template-columns:minmax(0,1fr); margin-top:8px; }
 .sk-verify .sk-actions, .sk-payform .sk-actions { margin-bottom:0; }
 .sk-join-steps { gap:4px; margin-bottom:8px; font-size:12px; }
 .sk-join-steps li { padding:6px; gap:4px; }
 .sk-subpanel { margin-top:10px; padding-top:10px; }
 .sk-kv { grid-template-columns:minmax(0,38%) minmax(0,1fr); }
}

/* 관리자 화면(PC 전용)은 운영 콘솔 레이아웃 안에서 같은 부품만 쓴다. */
.skills-admin .sk-chip { cursor:pointer; }
/* 출금 신청 표: 계좌·상태·관리 칸은 잘리지 않게 줄을 바꾼다(운영 콘솔 공통 표는 한 줄 말줄임). */
.skills-admin .component-table td.sk-wrap { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.4; }
.skills-admin .component-table td.sk-wrap .sk-btn { margin:2px 4px 2px 0; }
.skills-admin .sk-panel :is(h2,p,dl,dd) { margin:0; }
.skills-admin .sk-panel h2 { margin-bottom:10px; }