/* ═══════════════════════════════════════════════════════════════
   술술 학습 대장간 — 디자인 토큰 (한 벌뿐인 원본)

   ★색·글자·간격·모서리는 **여기서만** 정한다.
     화면에 색을 손으로 박지 않는다 — 박기 시작하면 화면마다 갈라지고,
     지금 교사보드 114가지·학생보드 90가지가 그렇게 생겼다.

   ★싣는 자리 — **맨 마지막.** 부트스트랩·화면별 스타일 뒤에 와야
     앞의 색을 눕힐 수 있다. 순서를 바꾸면 아무 일도 하지 않는다.

   ★쓰는 법은 스킬에 적어 두었다: .claude/skills/sulsul-design/
   ⚠️인쇄물(problemcard/print.html 의 종이 부분)은 이 규칙 밖이다 — 종이는 흑백 기준.
═══════════════════════════════════════════════════════════════ */

:root {
    /* ── 색 ────────────────────────────────────────────────
       초록  = 지금 눌러야 할 것        벽돌빛 = 지우거나 잘못된 것
       그 밖 = 전부 회색조 (알려 주기만 하는 딱지에 색을 주지 않는다) */
    --ss-ink:        #26332E;   /* 머리띠·가장 짙은 글자 */
    --ss-brand:      #2F6B57;   /* 주 행동 — 한 화면에 하나 */
    --ss-brand-press:#245544;
    --ss-brand-soft: #EDF3F0;   /* 주 행동의 옅은 바탕(고른 상태 따위) */
    --ss-bg:         #F7F6F3;   /* 화면 바탕 — 따뜻한 흰 */
    --ss-surface:    #FFFFFF;   /* 카드 */
    --ss-line:       #E5E3DD;   /* 선·테두리 */
    --ss-text:       #2A302D;   /* 본문 */
    --ss-muted:      #6E7772;   /* 잔글·도움말 */
    --ss-fill:       #EFEFEB;   /* 딱지·옅은 바탕 */
    --ss-danger:     #B4534B;   /* 지우기·경고 — 소방차 빨강이 아니다 */
    --ss-danger-soft:#F7EDEC;
    /* 아이 화면 전용 — 어른 화면에서는 쓰지 않는다 */
    --ss-accent:     #D9A441;

    /* ── 글자 ──────────────────────────────────────────────
       크기는 네 단계뿐. 그 사이 값을 새로 만들지 않는다. */
    --ss-font: 'Pretendard', 'Pretendard Variable', -apple-system,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --ss-t-title: 1.05rem;   /* 화면 제목 */
    --ss-t-head:   .95rem;   /* 카드 제목 */
    --ss-t-body:    .9rem;   /* 본문·표 */
    --ss-t-small:   .8rem;   /* 잔글·도움말 */

    /* ── 간격·모서리·그림자 ──────────────────────────────── */
    --ss-1: 4px;  --ss-2: 8px;  --ss-3: 12px;
    --ss-4: 16px; --ss-6: 24px; --ss-8: 32px;
    --ss-r-sm: 8px;      /* 입력칸·작은 단추 */
    --ss-r:    14px;     /* 카드 */
    --ss-r-pill: 999px;  /* 알약 단추 */
    --ss-shadow: 0 1px 3px rgba(38, 51, 46, .06);
}

/* ═══ 여기서부터는 화면(screen)에만 입힌다 — `body.ss` 가 붙은 화면.
       ⚠️@media screen 으로 감싼 까닭: 시험지·연습지는 **종이로 나가는 것이 본체**라
         흑백·mm 기준으로 따로 짜여 있다. 화면 색과 글꼴이 종이까지 따라가면
         인쇄가 어긋난다. 그래서 종이에는 아무것도 걸지 않는다. ═══ */
@media screen {

/* ── 바탕·글꼴 ───────────────────────────────────────────── */
body.ss { background: var(--ss-bg) !important; color: var(--ss-text); }
body.ss, body.ss .card, body.ss .table, body.ss .btn, body.ss .badge,
body.ss .form-control, body.ss .form-select, body.ss input, body.ss select,
body.ss textarea, body.ss summary, body.ss .nav-pills,
.ss-tabbar, .teacher-tab, .admin-tab {
    font-family: var(--ss-font) !important;
}

/* ── 크기 네 단계 ────────────────────────────────────────── */
body.ss .card-header .fs-5,
body.ss .card-header .fs-6,
body.ss .card-header > span:first-child { font-size: var(--ss-t-head) !important; font-weight: 800; }
body.ss .card-body, body.ss .table { font-size: var(--ss-t-body); }
body.ss .small, body.ss .text-muted { font-size: var(--ss-t-small); }
body.ss .text-muted { color: var(--ss-muted) !important; }

/* ── 색 눕히기 — 뜻 없는 색을 회색조로 ────────────────────
   화면마다 박힌 색을 하나하나 고치지 않는다(교사보드만 114곳).
   여기서 눕히고, 눈에 띄는 자리만 손으로 다듬는다. */
body.ss .badge:not(.bg-danger):not(.ss-keep),
body.ss [class*="bg-"][class*="-subtle"]:not(.ss-keep) {
    background: var(--ss-fill) !important;
    color: #3F4A46 !important;
    font-weight: 700;
}
/*  경고 딱지도 우리 벽돌빛으로 — 부트스트랩 기본 빨강(#dc3545)은 너무 소리친다 */
body.ss .badge.bg-danger, body.ss .bg-danger {
    background: var(--ss-danger) !important; color: #fff !important;
}
body.ss .text-primary { color: var(--ss-brand) !important; }
body.ss .text-info, body.ss .text-warning, body.ss .text-secondary { color: var(--ss-muted) !important; }

/* 단추 — 채워진 초록은 '지금 할 일' 하나뿐, 나머지는 테두리만 */
body.ss .btn-primary, body.ss .btn-success {
    background: var(--ss-brand) !important; border-color: var(--ss-brand) !important; color: #fff !important;
}
body.ss .btn-primary:hover, body.ss .btn-success:hover {
    background: var(--ss-brand-press) !important; border-color: var(--ss-brand-press) !important;
}
body.ss .btn-dark { background: var(--ss-ink) !important; border-color: var(--ss-ink) !important; }
body.ss .btn-outline-primary, body.ss .btn-outline-info,
body.ss .btn-outline-warning, body.ss .btn-outline-secondary,
body.ss .btn-info, body.ss .btn-warning {
    background: var(--ss-surface) !important;
    color: #3F4A46 !important;
    border: 1px solid #CFD5D2 !important;
}
body.ss .btn-outline-primary:hover, body.ss .btn-outline-info:hover,
body.ss .btn-outline-warning:hover, body.ss .btn-outline-secondary:hover,
body.ss .btn-info:hover, body.ss .btn-warning:hover { background: #EFEFEB !important; }
body.ss .btn-danger, body.ss .btn-outline-danger {
    color: var(--ss-danger) !important; border-color: #E0C6C3 !important;
    background: var(--ss-surface) !important;
}
body.ss .btn-danger:hover, body.ss .btn-outline-danger:hover { background: var(--ss-danger-soft) !important; }

/* ── 카드·선 ─────────────────────────────────────────────── */
body.ss .card {
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-line) !important;
    border-radius: var(--ss-r) !important;
    box-shadow: var(--ss-shadow) !important;
}
body.ss .table > :not(caption) > * > * { border-color: var(--ss-line); }
body.ss .table-light > * > * { background: #F4F4F1 !important; color: #3F4A46 !important; }

/* ── 아이콘 — 단추 안에서만 ───────────────────────────────
   카드 제목 줄에 색깔 아이콘이 붙어 있으면 눈이 그림으로 먼저 가고
   정작 이름이 늦게 읽힌다. 제목은 글자만 둔다. */
body.ss .card-header > i[class*='fa-'],
body.ss .card-header > span > i[class*='fa-'],
body.ss .card-header > span > svg.svg-icon,
body.ss .card-header > svg.svg-icon { display: none !important; }
body.ss .card-header, body.ss .card-header > span { color: var(--ss-text) !important; }

/* 도움말 물음표 — 작고 조용하게 */
body.ss .info-tip {
    color: var(--ss-muted); border: 1px solid var(--ss-line); background: var(--ss-surface);
    border-radius: 50%; width: 17px; height: 17px; line-height: 15px;
    display: inline-block; text-align: center; font-size: .7rem; font-weight: 700;
}

/* ── 카드 접기 (asset/fold_cards.js 가 붙인다) ────────────── */
body.ss .card-header.fold { cursor: pointer; user-select: none; }
body.ss .card-header.fold:hover { background: #F5F7F6 !important; }
body.ss .fold-mark {
    display: inline-block; width: 1em; margin-right: 2px;
    color: var(--ss-muted); font-size: .8em; transition: transform .15s;
}
body.ss .card.folded .fold-mark { transform: rotate(-90deg); }
body.ss .card.folded > :not(.card-header) { display: none !important; }
/* ⚠<details> 로 만든 카드는 스스로 여닫는다 — 우리 규칙을 씌우면 열어도 감춰진다 */
body.ss details.card.folded > :not(.card-header) { display: revert !important; }
body.ss details.card > summary.card-header { list-style: none; }
body.ss details.card > summary.card-header::-webkit-details-marker { display: none; }
body.ss details.card > summary.card-header::before {
    content: '▸'; margin-right: 8px; color: var(--ss-muted); font-size: .8em;
}
body.ss details.card[open] > summary.card-header::before { content: '▾'; }

/* ── 탭 줄 — 지금 자리는 밑줄로. 옛 SVG 아이콘은 숨기고, 교사보드는 선 아이콘(.tab-ic, 2026-09-16)만 ── */
.ss-tabbar, .teacher-tab-bar, .admin-tab-bar {
    background: var(--ss-ink) !important; overflow-x: auto; white-space: nowrap;
}
.ss-tab, .teacher-tab, .admin-tab {
    background: none; border: none; border-bottom: 3px solid transparent;
    color: #A7BBB2; font-weight: 700; font-size: var(--ss-t-body);
    padding: 13px 16px; cursor: pointer; letter-spacing: -.01em;
}
.ss-tab:hover, .teacher-tab:hover, .admin-tab:hover { color: #E6EFEB; }
.ss-tab.active, .teacher-tab.active, .admin-tab.active {
    color: #fff; border-bottom-color: #7AC7A8 !important;
}
.teacher-tab .svg-icon, .teacher-tab .svg-icon-lg { display: none !important; }

/* ── 빈 화면 — '없습니다' 로 끝내지 않는다 ────────────────── */
body.ss .ss-empty {
    text-align: center; padding: var(--ss-8) var(--ss-4); color: var(--ss-muted);
    font-size: var(--ss-t-body);
}
body.ss .ss-empty b { color: var(--ss-text); display: block; margin-bottom: var(--ss-1); }
body.ss .ss-empty .bear { width: 56px; margin: 0 auto var(--ss-3); opacity: .9; }

/* ── 터치 기기 ───────────────────────────────────────────── */
@media (pointer: coarse) {
    body.ss .btn, .ss-tab, .teacher-tab, .admin-tab { min-height: 44px; }
    /* 글자가 16px 보다 작으면 태블릿이 칸을 누를 때 화면을 제멋대로 확대한다.
       ⚠️시험지 안의 답 칸(.typed-input)은 빼 둔다 — 종이 칸에 맞춰 크기를 재 놓은 것이라
         여기서 키우면 칸 밖으로 삐져나온다. */
    body.ss input:not(.typed-input), body.ss select, body.ss textarea { font-size: 16px !important; }
}

} /* @media screen 끝 — 종이(인쇄)에는 아무것도 걸지 않는다 */