/* 사니지니 화면 규칙 v1: 웹 화면의 값과 부품. 규칙과 이유는 UI.md, 모든 부품과 상태를 한 장에 모은 것은 specimen.html.
   쓰는 법: 이 파일과 icons/를 같은 폴더에 두고 화면 바탕(body 등)에 class="sj". Pretendard @font-face는 쓰는 쪽에서 정한다.
   마케팅 자산(자모 조각, 물결·점무늬·반원·줄무늬, 분홍 동그라미, 글 → 물결 → 점, 자음 색)은 여기에 쓰지 않는다 (UI.md 1) */

:root {
  /* 색 (UI.md 2): 먹·흰·회색으로 거의 다, 뜻 있는 색은 파랑(지금 여기)과 빨강(오류) 둘. 괄호는 흰 바탕 위 대비 */
  --sj-bg: #FFFFFF;        /* 바탕 */
  --sj-ink: #151515;       /* 글자, 주 단추, 고른 것 (18.3) */
  --sj-ink-hover: #333333; /* 주 단추에 마우스를 올렸을 때, 보내는 중 */
  --sj-on-ink: #FFFFFF;    /* 먹 위의 글자 */
  --sj-quiet: #595959;     /* 보조 글자: 이메일·시간·설명 (7.0) */
  --sj-border: #767676;    /* 입력칸 테두리, 입력칸 안내 글 (4.5) */
  --sj-disabled: #A3A3A3;  /* 꺼진 글자·테두리 */
  --sj-rule: #E5E5E5;      /* 구분선, 묶음 상자 테두리 */
  --sj-stage: #EFEFEF;     /* 큰 장 뒤 무대, 장 번호 표시, 마우스를 올린 바탕, 그림이 오기 전 자리 */
  --sj-focus: #2B48D4;     /* 파랑 「지금 여기」: 키보드로 고른 자리, 링크·글자 단추에 마우스 (7.1). 로고 ㄴ의 코발트를 빌리되 무늬로는 쓰지 않는다 */
  --sj-error: #C7361E;     /* 빨강 「오류」에만 (5.3). 코랄을 화면용으로 진하게 */

  /* 글자 (3): Pretendard 하나, 굵기 둘, 크기 넷. 크기는 rem이라 브라우저 글자 크기 설정을 따른다 */
  --sj-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --sj-regular: 400;
  --sj-bold: 600;          /* 제목과 주 단추에만 */
  --sj-text-sm: 0.8125rem; /* 13 작은 글자: 이메일·시간·장 번호 */
  --sj-text: 1rem;         /* 16 본문·입력칸 */
  --sj-title: 1.25rem;     /* 20 제목 */
  --sj-title-lg: 1.75rem;  /* 28 큰 제목 */
  --sj-leading: 1.6;
  --sj-leading-tight: 1.3;

  /* 간격 (4): 4의 배수만 */
  --sj-4: 4px;
  --sj-8: 8px;
  --sj-12: 12px;
  --sj-16: 16px;
  --sj-24: 24px;
  --sj-32: 32px;
  --sj-48: 48px;
  --sj-gutter: 24px;       /* 화면 둘레 여백 (휴대폰 16) */
  --sj-target: 40px;       /* 누르는 자리 (손가락이면 44) */
  --sj-bar: 56px;          /* 위 막대 높이 */

  /* 모양 (5): 부품은 약간 둥글게, 결과물 그림은 네모 그대로, 알약 모양은 쓰지 않는다 */
  --sj-radius: 6px;
}
@media (max-width: 760px) { :root { --sj-gutter: 16px; } }
@media (pointer: coarse) { :root { --sj-target: 44px; } }

/* ── 바탕 ── */

.sj {
  margin: 0;
  background: var(--sj-bg);
  color: var(--sj-ink);
  color-scheme: light;
  font: var(--sj-regular) var(--sj-text) / var(--sj-leading) var(--sj-font);
  font-synthesis: none;
  letter-spacing: -0.01em;
  word-break: keep-all;    /* 한글은 어절 단위로 줄을 바꾼다 */
  overflow-wrap: anywhere; /* 긴 메일 주소·주소창은 어디서든 */
  -webkit-text-size-adjust: 100%;
}
/* 바탕 규칙은 :where()로 묶어 부품 클래스(.sj-btn 등)가 언제나 이기게 한다 */
:where(.sj) *, :where(.sj) *::before, :where(.sj) *::after { box-sizing: border-box; }
:where(.sj) :is(h1, h2, h3) { margin: 0; font-weight: var(--sj-bold); line-height: var(--sj-leading-tight); letter-spacing: -0.02em; }
:where(.sj) h1 { font-size: var(--sj-title-lg); }
:where(.sj) h2 { font-size: var(--sj-title); }
:where(.sj) h3 { font-size: var(--sj-text); }
:where(.sj) p { margin: 0; }
:where(.sj) a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.sj) a:hover { color: var(--sj-focus); }
:where(.sj) :focus-visible { outline: 2px solid var(--sj-focus); outline-offset: 2px; }
:where(.sj) :is(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
.sj-small { font-size: var(--sj-text-sm); }
.sj-quiet { color: var(--sj-quiet); }
.sj-num { font-variant-numeric: tabular-nums; } /* 장 번호·시간: 숫자 폭을 같게 */
.sj-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 견본에서 마우스·누름·키보드 상태를 멈춰 보여 줄 때만 쓰는 표시 */
:where(.sj) .is-focus { outline: 2px solid var(--sj-focus); outline-offset: 2px; }

/* ── 단추 (5): 주 단추는 먹으로 채우고 한 화면에 하나, 보조는 먹 테두리, 글자 단추는 상자 없이 ── */

.sj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sj-8);
  min-height: var(--sj-target); padding: 0 var(--sj-16);
  border: 1px solid transparent; border-radius: var(--sj-radius); background: none;
  font-size: var(--sj-text); line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.sj-btn-primary { background: var(--sj-ink); border-color: var(--sj-ink); color: var(--sj-on-ink); font-weight: var(--sj-bold); }
.sj-btn-primary:hover, .sj-btn-primary.is-hover { background: var(--sj-ink-hover); border-color: var(--sj-ink-hover); }
.sj-btn-primary:active, .sj-btn-primary.is-active { background: #000000; border-color: #000000; }
.sj-btn-secondary { background: var(--sj-bg); border-color: var(--sj-ink); color: var(--sj-ink); }
.sj-btn-secondary:hover, .sj-btn-secondary.is-hover { background: var(--sj-stage); }
.sj-btn-secondary:active, .sj-btn-secondary.is-active { background: var(--sj-rule); }
.sj-btn-text { padding: 0 var(--sj-8); color: var(--sj-ink); }
.sj-btn-text:hover, .sj-btn-text.is-hover { color: var(--sj-focus); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sj-btn-text:active, .sj-btn-text.is-active { color: var(--sj-focus); background: var(--sj-stage); }
/* 꺼짐: 회색 글자·테두리 */
.sj-btn:disabled, .sj-btn[aria-disabled='true'] { cursor: not-allowed; }
.sj-btn-primary:disabled, .sj-btn-primary[aria-disabled='true'] { background: var(--sj-stage); border-color: var(--sj-stage); color: var(--sj-disabled); }
.sj-btn-secondary:disabled, .sj-btn-secondary[aria-disabled='true'] { background: var(--sj-bg); border-color: var(--sj-disabled); color: var(--sj-disabled); }
.sj-btn-text:disabled, .sj-btn-text[aria-disabled='true'] { background: none; color: var(--sj-disabled); text-decoration: none; }
/* 보내는 중: 글이 「남기는 중이에요」로 바뀌고 잠깐 꺼진다 (두 번 눌러 두 번 남지 않게) */
.sj-btn[aria-busy='true'] { cursor: progress; }
.sj-btn-primary[aria-busy='true'] { background: var(--sj-ink-hover); border-color: var(--sj-ink-hover); color: var(--sj-on-ink); }

/* ── 아이콘 (7): 누구나 아는 몇 개만, 한 굵기 선. 글자색을 따른다 ── */

.sj-icon { display: inline-block; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.sj-icon-arrow-left { -webkit-mask-image: url('icons/arrow-left.svg'); mask-image: url('icons/arrow-left.svg'); }
.sj-icon-arrow-right { -webkit-mask-image: url('icons/arrow-right.svg'); mask-image: url('icons/arrow-right.svg'); }
.sj-icon-plus { -webkit-mask-image: url('icons/plus.svg'); mask-image: url('icons/plus.svg'); }
.sj-icon-minus { -webkit-mask-image: url('icons/minus.svg'); mask-image: url('icons/minus.svg'); }
.sj-icon-close { -webkit-mask-image: url('icons/close.svg'); mask-image: url('icons/close.svg'); }
.sj-icon-chevron-down { -webkit-mask-image: url('icons/chevron-down.svg'); mask-image: url('icons/chevron-down.svg'); }
@media (forced-colors: active) { .sj-icon { background-color: CanvasText; forced-color-adjust: none; } }

/* 아이콘만 있는 단추: aria-label로 이름을 알리고, 마우스를 올리거나 키보드로 고르면 data-tip 이름표가 아래에 보인다 */
.sj-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--sj-target); height: var(--sj-target); padding: 0;
  border: 1px solid transparent; border-radius: var(--sj-radius); background: none; color: var(--sj-ink); cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.sj-icon-btn:hover, .sj-icon-btn.is-hover { background: var(--sj-stage); }
.sj-icon-btn:active, .sj-icon-btn.is-active { background: var(--sj-rule); }
.sj-icon-btn:disabled, .sj-icon-btn[aria-disabled='true'] { background: none; color: var(--sj-disabled); cursor: not-allowed; }
.sj-icon-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + var(--sj-4)); left: 50%; z-index: 10; transform: translateX(-50%);
  padding: var(--sj-4) var(--sj-8); border-radius: var(--sj-radius); background: var(--sj-ink); color: var(--sj-on-ink);
  font-size: var(--sj-text-sm); font-weight: var(--sj-regular); line-height: 1.4; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
.sj-icon-btn[data-tip]:hover::after, .sj-icon-btn[data-tip]:focus-visible::after, .sj-icon-btn.is-tip::after { opacity: 1; transition-delay: 0.3s; }
.sj-icon-btn.is-tip::after { transition-delay: 0s; }

/* ── 입력칸 (5): 회색 테두리, 쓰는 동안 파랑. 오류는 빨강 테두리와 아래 빨강 글 ── */

.sj-field { display: grid; gap: var(--sj-8); }
.sj-label { font-size: var(--sj-text-sm); }
.sj-input {
  display: block; width: 100%; min-height: var(--sj-target); padding: var(--sj-8) var(--sj-12);
  border: 1px solid var(--sj-border); border-radius: var(--sj-radius); background: var(--sj-bg); color: var(--sj-ink);
  font-size: var(--sj-text); line-height: var(--sj-leading); /* 16 이상: 아이폰이 저절로 확대하지 않게 */
}
textarea.sj-input { min-height: calc(var(--sj-text) * var(--sj-leading) * 3 + var(--sj-16) + 2px); resize: vertical; }
.sj-input::placeholder { color: var(--sj-border); opacity: 1; }
.sj-input:focus-visible, .sj-input.is-focus { border-color: var(--sj-focus); outline: 2px solid var(--sj-focus); outline-offset: -1px; }
.sj-input[aria-invalid='true'] { border-color: var(--sj-error); }
.sj-input[aria-invalid='true']:focus-visible { border-color: var(--sj-focus); }
.sj-input:disabled { background: var(--sj-stage); border-color: var(--sj-rule); color: var(--sj-disabled); cursor: not-allowed; }
.sj-help { font-size: var(--sj-text-sm); color: var(--sj-quiet); }
.sj-error-text { font-size: var(--sj-text-sm); color: var(--sj-error); }

/* ── 장 번호 표시 (5): 옅은 회색 바탕의 작은 칸. 누르면 그 장으로 가는 것은 button으로 ── */

.sj-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--sj-8);
  border: 0; border-radius: var(--sj-radius); background: var(--sj-stage); color: var(--sj-ink);
  font-size: var(--sj-text-sm); line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap;
}
button.sj-chip { cursor: pointer; }
button.sj-chip:hover, button.sj-chip.is-hover { background: var(--sj-rule); }

/* ── 목록 (5): 상자 없이 구분선, 이메일·시간은 작은 회색 글자 ── */

.sj-list { margin: 0; padding: 0; list-style: none; }
.sj-list > li { padding: var(--sj-16) 0; border-bottom: 1px solid var(--sj-rule); }
.sj-list > li:last-child { border-bottom: 0; }
.sj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-4) var(--sj-8); color: var(--sj-quiet); font-size: var(--sj-text-sm); font-variant-numeric: tabular-nums; }
.sj-meta .sj-who { color: var(--sj-ink); }
.sj-body { margin-top: var(--sj-4); white-space: pre-wrap; }
.sj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sj-4); margin: var(--sj-4) 0 0 calc(-1 * var(--sj-8)); }
.sj-replies { margin: var(--sj-12) 0 0; padding: 0 0 0 var(--sj-16); list-style: none; border-left: 1px solid var(--sj-rule); } /* 답글은 한 단계 */
.sj-replies > li + li { margin-top: var(--sj-12); }
/* 지우기 같은 되돌릴 수 없는 일은 그 자리에서 한 번 더 묻는다 (창을 띄우지 않는다) */
.sj-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sj-8) var(--sj-12); margin-top: var(--sj-8); }

/* ── 장 목록 (5): 결과물 그림은 네모 그대로, 고른 장은 먹 테두리, 키보드로 고른 장은 그 밖에 파랑 ── */

.sj-thumbs { display: grid; gap: var(--sj-12); margin: 0; padding: 0; list-style: none; }
.sj-thumb {
  display: grid; gap: var(--sj-4); width: 100%; padding: var(--sj-4);
  border: 0; border-radius: var(--sj-radius); background: none; color: var(--sj-quiet);
  font-size: var(--sj-text-sm); text-align: left; font-variant-numeric: tabular-nums; cursor: pointer;
}
.sj-page { display: block; width: 100%; height: auto; border: 1px solid var(--sj-rule); border-radius: 0; background: var(--sj-stage); } /* 그림이 오기 전에는 회색 자리 (img에 width·height를 주면 자리가 먼저 잡힌다) */
.sj-thumb:hover .sj-page, .sj-thumb.is-hover .sj-page { border-color: var(--sj-border); }
.sj-thumb[aria-current='true'] { color: var(--sj-ink); }
.sj-thumb[aria-current='true'] .sj-page { outline: 2px solid var(--sj-ink); outline-offset: 2px; }
.sj-thumb:focus-visible { outline-offset: 4px; }
.sj-thumb.is-focus { outline-offset: 4px; }

/* ── 탭 (5): 글자만, 고른 탭 아래에 먹 줄 ── */

.sj-tabs { display: flex; gap: var(--sj-16); border-bottom: 1px solid var(--sj-rule); }
.sj-tab {
  min-height: var(--sj-target); margin-bottom: -1px; padding: 0 var(--sj-4);
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sj-quiet);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.sj-tab:hover, .sj-tab.is-hover { color: var(--sj-ink); }
.sj-tab[aria-selected='true'] { border-bottom-color: var(--sj-ink); color: var(--sj-ink); }

/* ── 틀 (5): 위 막대·옆 칸·무대는 구분선 하나로만 나눈다. 그림자·떠 있는 카드는 없다 ── */

.sj-bar { display: flex; align-items: center; gap: var(--sj-16); min-height: var(--sj-bar); padding: 0 var(--sj-gutter); border-bottom: 1px solid var(--sj-rule); background: var(--sj-bg); }
.sj-logo { display: block; flex: none; line-height: 0; color: var(--sj-ink); }
.sj-logo svg { display: block; width: auto; height: 24px; } /* 로고는 화면 높이 24px 아래로 줄이지 않는다 (BRAND.md) */
.sj-panel { border-left: 1px solid var(--sj-rule); background: var(--sj-bg); }
.sj-stage { background: var(--sj-stage); }
.sj-box { padding: var(--sj-24); border: 1px solid var(--sj-rule); border-radius: var(--sj-radius); background: var(--sj-bg); } /* 묶음이 필요할 때만 */

/* ── 상태 (6): 그 자리에서 말로. 떴다 사라지는 알림·화면을 가리는 확인 창·빙글 도는 표시·반짝이는 자리는 없다 ── */

.sj-empty { color: var(--sj-quiet); }

/* 「동작 줄이기」를 켠 사람에게는 움직이지 않는다 (8) */
@media (prefers-reduced-motion: reduce) {
  .sj *, .sj *::before, .sj *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}