/*! © 2026 해밀 (haemil.ai). All rights reserved. 무단 복제·배포 금지. */
/* 설정 (settings.js): 탭 하나의 페이지. 왼쪽에 분류, 오른쪽에 묶음들. 줄마다 왼쪽에 이름과 설명, 오른쪽에 조작. */
.spage { flex: 1; min-width: 0; display: flex; }
.snav { flex: none; width: 200px; box-sizing: border-box; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; background: var(--chrome); border-right: 1px solid var(--line); }
.snav button { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; }
.snav button svg { flex: none; color: var(--dim); }
.snav button:hover { background: var(--hover); }
.snav button.on { background: var(--sel); font-weight: 600; }
.snav button.on svg { color: var(--accent); }
.sbody { flex: 1; min-width: 0; overflow-y: auto; outline: none; }
.sin { max-width: 760px; padding: 26px 36px 48px; }
.sin h2 { margin: 0 0 22px; font-size: 20px; font-weight: 600; }
/* 묶음: 제목, 그 아래 줄들. 줄 사이에 선. */
.sgroup { margin-bottom: 30px; }
.sgroup > h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.snote { margin: 0 0 8px; font-size: 12px; color: var(--dim); }
.srow { display: flex; align-items: center; gap: 24px; min-height: 40px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sbox > .srow:last-child { border-bottom: 0; }
.stext { flex: 1; min-width: 0; }
.stitle { font-size: 13px; }
.sdesc { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.sdesc .ctrack { margin: 8px 0 2px; max-width: 420px; }
.sdesc .clink, .snote .clink { padding: 0; font-size: 12px; }
.sctl { flex: none; display: flex; align-items: center; gap: 8px; }
.sval { font-size: 12px; color: var(--dim); }
.sbtn { height: 28px; padding: 0 14px; border: 1px solid var(--field-line); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; }
.sbtn:hover:not(:disabled) { background: var(--hover); }
.sbtn:disabled { opacity: .5; }
.sbtn.primary { border-color: var(--accent); background: var(--accent); color: var(--pane); }
.sbtn.danger { color: #c42b1c; }
@media (prefers-color-scheme: dark) { .sbtn.danger { color: #ff99a4; } }
.sctl select, .stypes { height: 28px; min-width: 150px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--field-line); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; }
.stypes { width: 200px; outline: none; -webkit-user-select: text; user-select: text; }
.stypes:focus { border-color: var(--accent); }
/* 권한 상태 (설정 › 권한). */
.sbadge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; font-weight: 400; color: var(--dim); vertical-align: 1px; }
.sbadge.on { border-color: var(--good); color: var(--good); }
.sbadge.off { border-color: var(--dim); }
/* 스위치: 켜면 강조색. */
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 10px; background: var(--field-line); transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch:disabled { opacity: .5; }
.switch:focus-visible, .sbtn:focus-visible, .sseg button:focus-visible, .theme:focus-visible, .snav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 여럿 중 하나 (글자 크기). */
.sseg { display: inline-flex; padding: 2px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); }
.sseg button { height: 26px; padding: 0 14px; border: 0; border-radius: 6px; background: none; color: var(--dim); font: inherit; }
.sseg button.on { background: var(--sel); color: var(--text); }
/* 폴더 목록 (검색할 위치 · 제외 · 코드 폴더). */
.sfolders { margin: 4px 0 2px; }
.sindent { margin: -4px 0 8px 22px; }
/* 테마: 카드마다 그 테마로 그린 작은 창 (제목 막대 · 옆 창 · 목록, 둘째 줄이 고른 항목). */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 8px 0 4px; }
.theme { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 7px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--chrome); color: var(--text); font: inherit; font-size: 12px; cursor: default; }
.theme:hover { border-color: var(--dim); }
.theme.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tpics { position: relative; display: grid; }
.tpics > .tmini { grid-area: 1 / 1; }
.tpics > .tmini + .tmini { clip-path: inset(0 0 0 50%); } /* 시스템: 오른쪽 반은 다크 */
.tmini { height: 58px; display: grid; grid-template: 8px 1fr / 26% 1fr; border-radius: 5px; overflow: hidden; background: var(--m-pane); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .28); }
.tmini .tbar { grid-column: 1 / -1; background: var(--m-bar); }
.tmini .tside { background: var(--m-chrome); }
.tmini .tlist { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 7px; }
.tmini .tlist i { height: 3px; border-radius: 2px; background: var(--m-dim); }
.tmini .tlist i:nth-child(1) { width: 78%; background: var(--m-accent); }
.tmini .tlist i:nth-child(2) { height: 7px; margin: 0 -3px; border-radius: 2px; background: var(--m-sel); box-shadow: inset 2px 0 0 var(--m-sel-line); }
.tmini .tlist i:nth-child(3) { width: 62%; background: var(--m-text); }
.tmini .tlist i:nth-child(4) { width: 70%; }
.tname { display: flex; align-items: center; gap: 6px; padding-left: 2px; text-align: left; white-space: nowrap; }
.tname::before { content: ''; flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--dim); }
.theme.on .tname::before { border: 3px solid var(--accent); }