/* ═══════════════════════════════════════════════════════════════
   css/b/base.css — 바탕
   소유: html/body(바탕·글꼴·자간·행간·가로 넘침) · 기본 요소 · .hidden/[hidden]/.sr-only · 포커스 ·
        입력 16px · .ui-icon · 움직임(@keyframes fade · .enter-fade · 화면 등장) · 누르는 영역(::after 44) ·
        스크롤바 · prefers-reduced-motion · 인쇄 · 기능 규칙(뷰어 터치·대화상자 줄바꿈).
   ⚠️ Tailwind CDN 은 preflight(요소 초기화)와 유틸리티를 **나중에** 주입한다. 같은 명시도의 요소 선택자는
      그쪽이 이기므로 html/body 값은 `html body`(0-0-2)로 적는다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 바탕 — B: html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:…;letter-spacing:-.02em} ── */
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%;
  /* ⚠️ 브라우저 기본 당겨서 새로고침(Chrome Android 등)을 끄는 규칙이다 — 지우지 말 것(js/pullrefresh.js 가 따로 있다).
     body 에는 걸지 않는다(휠 스크롤이 막힌다). */
  overscroll-behavior-y: contain; }
html body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
  line-height: normal;               /* B 기본(Tailwind preflight 의 1.5 를 되돌린다) */
  /* 한글은 낱말 단위로 줄을 바꾸고, 긴 낱말만 넘칠 때 끊는다(break-word 는 min-content 를 바꾸지 않아 flex 배치가 그대로다). */
  word-break: keep-all; overflow-wrap: break-word;
}
/* 가로 넘침은 기기 폭에서 자른다. ⚠️ hidden 이 아니라 clip — 스크롤 컨테이너를 만들지 않는다(sticky·fixed 영향 없음).
   ⚠️ #main-content 에는 걸지 않는다(본문 가장자리를 넘는 ⋮ 팝업이 잘린다). */
body, #app-shell { overflow-x: clip; }

button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
/* iOS 사파리는 16px 미만 입력에 포커스하면 화면을 확대한다 — 기능 사실이라 B 글자 단계의 예외다. */
input, select, textarea { font-size: 16px !important; }
::placeholder { color: var(--placeholder); opacity: 1; }
::selection { background: var(--green-soft); }
img { max-width: 100%; }

/* ── 숨김 ── 모달·섹션이 의존한다. 지우거나 약하게 바꾸지 말 것. */
.hidden, .content-section.hidden { display: none !important; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* ── 포커스 — 키보드일 때만 2px 진한 초록(설계서 §1.3, bg 6.29 ≥ 3) ── */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── 아이콘(js/icons.js 인라인 SVG) ── 크기는 font-size 로 준다(width/height 1em).
   B 메뉴 아이콘은 19px · 선 1.65 다. 아주 크거나 작은 아이콘은 선이 viewBox 기준이라 굵기만 되돌린다. */
.ui-icon { width: 1em; height: 1em; font-size: 19px; line-height: 1; vertical-align: middle; flex-shrink: 0; stroke-width: 1.65; }
.ui-icon[style*="font-size:40px"], .ui-icon[style*="font-size:44px"] { stroke-width: 1.1; }
.ui-icon[style*="font-size:56px"] { stroke-width: .9; }
.ui-icon[style*="font-size:26px"], .ui-icon[style*="font-size:28px"] { stroke-width: 1.5; }
.ui-icon[style*="font-size:14px"], .ui-icon[style*="font-size:13px"] { stroke-width: 2; }

/* ── 움직임 — B 는 두 가지뿐이다: 화면 등장 fade .22s(3px 위로) · 메뉴 전환 .18s ── */
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* ⚠️⚠️ fill-mode(both/forwards)를 붙이지 말 것 — 끝난 뒤 transform 이 남으면 섹션이 position:fixed 자손의 기준 좌표가 된다
   (우클릭 메뉴가 엉뚱한 곳에 뜨던 사고). 지연이 없어 fill-mode 없이도 모션은 같다. 검사: run.sh context-pos */
.content-section:not(.hidden) { animation: fade var(--fade); }
/* 다시 그려지는 목록 줄 — 지연은 JS 인라인. backwards 라 끝난 뒤 transform 이 남지 않는다. */
.enter-fade { animation: fade var(--fade) backwards; }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ── 누르는 영역 — 보이는 모양(B)은 그대로 두고 가상 요소로 44×44 를 덮는다(touch 프로브가 계산값을 읽는다).
   ⚠️ 부모가 overflow:hidden 이면 잘린다. ⚠️ ::after 를 그림으로 쓰는 부품(탭 밑줄·하단 바 막대)은 ::before 를 쓴다. */
.tap-target, .btn, .icon-btn, .icon-button, .chip, .segment > button, .attend-pick > button, .more, .wk-arrow, .wk-back,
.tag-x, .text-link, .b-btn, .pill-btn { position: relative; }
.tap-target::after, .btn::after, .icon-btn::after, .icon-button::after, .chip:not([role="tab"])::after,
.segment > button::after, .attend-pick > button::after, .more::after, .wk-arrow::after, .wk-back::after,
.tag-x::after, .text-link::after, .pill-btn::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px);
}

/* ── 스크롤바 — 얇게, B 결 ── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* ── 옛 기능 규칙 ── */
/* customAlert/Confirm/Prompt 는 .textContent 로 넣는다 — 문구 안의 \n 을 줄바꿈으로 살린다. */
.sys-dialog-msg { white-space: pre-line; }
/* 사진 뷰어 — 한 손가락 이동은 브라우저, 두 손가락 확대는 viewer.js 가 맡는다. */
#viewer-content-outer { touch-action: pan-x pan-y; }

/* ── 움직임을 줄인 사용자 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── 인쇄 — 사진 뷰어만 ── */
@media print {
  body > *:not(#modal-viewer) { display: none !important; }
  #modal-viewer { position: static !important; background: #fff !important; overflow: visible !important; padding: 0 !important; }
  #modal-viewer .no-print { display: none !important; }
  #viewer-zoom-wrap { transform: none !important; }
  #viewer-content, #viewer-content * { color: #000 !important; }
}