/* 공통 부품 키트 nd-(OPS-1885 브랜드 설계안 5장 핵심 부품). A 가 여기에만 정의하고 다른 파일은 쓰기만 한다.
   색·간격·글자는 var(--nd-*) 만. 움직임은 prefers-reduced-motion: no-preference 안에서만. */

/* 칩: 28px(목록 안 24px), 13/700, 아이콘 + 글자. 빨강은 운휴·휴무, 코랄 점은 실시간 하나뿐 */
.nd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--nd-r-chip); font-size: var(--nd-fs-label); font-weight: 700; line-height: 1.2; white-space: nowrap; background: var(--nd-surface); border: 1px solid var(--nd-line); color: var(--nd-ink); }
.nd-chip .ic { width: 15px; height: 15px; vertical-align: 0; }
.nd-chip.is-sm { min-height: 24px; padding: 0 8px; font-size: var(--nd-fs-meta); }
.nd-chip.ok { background: var(--nd-ok-bg); border-color: transparent; color: var(--nd-ok); }
.nd-chip.caution { background: var(--nd-caution-bg); border-color: transparent; color: var(--nd-caution); }
.nd-chip.stop { background: var(--nd-stop-bg); border-color: transparent; color: var(--nd-stop); }
.nd-chip.est { background: transparent; border: 1.5px dashed var(--nd-est-line); color: var(--nd-est); }
.nd-chip.pine { background: var(--nd-pine-tint); border-color: transparent; color: var(--nd-pine); }
.nd-chip.solid { background: var(--nd-pine); border-color: transparent; color: var(--nd-on-pine); }
button.nd-chip { min-height: var(--tap); cursor: pointer; font-family: inherit; }
.nd-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--nd-coral); }
.nd-over { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--nd-fs-label); font-weight: 700; color: var(--nd-ink-2); letter-spacing: 0; }
.nd-over .nd-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px var(--nd-coral-tint); }

/* 단추 별칭: 기존 .btn 계열과 같은 규칙(styles.css), 새 화면은 이 이름도 쓸 수 있다 */
.nd-btn { display: flex; align-items: center; justify-content: center; gap: var(--nd-s2); width: 100%; min-height: var(--nd-tap-primary); padding: 0 var(--nd-s4); border-radius: var(--nd-r-btn); border: 0; font: inherit; font-size: var(--nd-fs-h3); font-weight: 800; text-decoration: none; cursor: pointer; }
.nd-btn.primary { background: var(--nd-pine); color: var(--nd-on-pine); }
.nd-btn.primary:not(:disabled):active { background: var(--nd-pine-deep); }
.nd-btn.secondary { background: var(--nd-surface); color: var(--nd-pine); box-shadow: inset 0 0 0 1.5px var(--nd-pine); }
.nd-btn.text { background: transparent; color: var(--nd-pine); min-height: var(--tap); font-size: var(--nd-fs-body); font-weight: 700; }
.nd-btn.small { min-height: var(--tap); font-size: var(--nd-fs-ui); }
.nd-btn:disabled { background: var(--nd-disabled-bg); color: var(--nd-disabled-ink); box-shadow: none; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  .nd-btn { transition: transform var(--nd-dur-press) var(--nd-ease), background-color var(--nd-dur-press) var(--nd-ease); }
  .nd-btn:not(:disabled):active { transform: scale(.98); }
}

/* 세그먼트(상태 한 줄 등): 지금 단계만 채움 */
.nd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--nd-sunk); }
.nd-seg > button { min-height: var(--tap); border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: var(--nd-fs-ui); font-weight: 700; color: var(--nd-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.nd-seg > button.is-on, .nd-seg > button[aria-pressed="true"] { background: var(--nd-pine); color: var(--nd-on-pine); }
.nd-seg > button.is-done { color: var(--nd-ink); }

/* 선택 칩(48px): 고르면 파인 연한 바탕·파인 테·체크 */
.nd-pick { display: flex; flex-wrap: wrap; gap: var(--nd-s2); }
.nd-pick > button, .nd-pick > label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: var(--nd-r-btn); border: 1.5px solid var(--nd-line); background: var(--nd-surface); font: inherit; font-size: var(--nd-fs-ui); font-weight: 700; color: var(--nd-ink); cursor: pointer; }
.nd-pick > .is-on, .nd-pick > [aria-pressed="true"] { border-color: var(--nd-pine); background: var(--nd-pine-tint); color: var(--nd-pine); }

/* 스위치(51x31) */
.nd-sw { position: relative; display: inline-block; flex: 0 0 auto; width: 51px; height: 31px; border-radius: 16px; background: var(--nd-disabled-bg); }
.nd-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--nd-surface); box-shadow: 0 1px 2px rgba(17, 32, 29, .2); }
.nd-sw.is-on { background: var(--nd-pine); }
.nd-sw.is-on::after { left: 22px; }
@media (prefers-reduced-motion: no-preference) { .nd-sw::after { transition: left var(--nd-dur-press) var(--nd-ease); } }

/* 배지 */
.nd-badge { display: inline-block; font-size: var(--nd-fs-meta); font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--nd-pine-tint); color: var(--nd-pine); letter-spacing: 0; white-space: nowrap; }
.nd-badge.free { background: var(--nd-sunk); color: var(--nd-ink-2); }
.nd-badge.ex { background: var(--nd-ink); color: var(--nd-on-pine); }
.nd-badge.soon { background: var(--nd-caution-bg); color: var(--nd-caution); }

/* 진행 막대(칸 모양) */
.nd-prog { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 6px 0; }
.nd-prog > i { display: block; height: 4px; border-radius: 2px; background: var(--nd-track); }
.nd-prog > i.is-on { background: var(--nd-pine); }
.nd-steps { display: flex; justify-content: space-between; gap: 4px; font-size: var(--nd-fs-meta); font-weight: 700; color: var(--nd-muted); margin: 0 0 var(--nd-s3); }
.nd-steps > .is-on { color: var(--nd-pine); }
.nd-steps > .is-done { color: var(--nd-ink-2); }
.nd-bar { display: block; height: 6px; border-radius: 3px; background: var(--nd-track); overflow: hidden; }
.nd-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--nd-pine); }

/* 상단 바(시트형 화면: 닫기·제목·단계) */
.nd-top { display: flex; align-items: center; gap: 10px; min-height: var(--nd-bar-h); }
.nd-top .nd-top-t { flex: 1; min-width: 0; font-size: var(--nd-fs-body); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-top .nd-top-m { font-size: var(--nd-fs-meta); font-weight: 700; color: var(--nd-ink-2); white-space: nowrap; }

/* 하단 탭(4칸, 아이콘 26 + 라벨 12.5/700, 시트 아래) */
.nd-tab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--nd-tab-h) + var(--safe-b)); padding: 4px 6px var(--safe-b); background: var(--nd-surface); border-top: 1px solid var(--nd-line); }
.nd-tab > button, .nd-tab > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tap); border: 0; border-radius: var(--nd-r-btn); background: none; font: inherit; font-size: var(--nd-fs-meta); font-weight: 700; color: var(--nd-ink-2); text-decoration: none; cursor: pointer; }
.nd-tab > button .ic, .nd-tab > a .ic { width: 26px; height: 26px; }
.nd-tab > .is-on, .nd-tab > [aria-current] { color: var(--nd-pine); }
body:has(.nd-tab) .main { padding-bottom: calc(var(--nd-tab-h) + var(--nd-s6) + var(--safe-b)); }
body:has(.nd-tab) .site-footer { padding-bottom: calc(var(--nd-tab-h) + 28px + var(--safe-b)); }

/* 하단 고정 단추 자리(안전 영역 위). 위로 종이색이 번지게 */
.nd-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: var(--nd-s3) var(--nd-s4) calc(var(--nd-s3) + var(--safe-b)); background: linear-gradient(180deg, transparent 0, var(--nd-paper) 18px); }
.nd-cta > * { max-width: 528px; margin-left: auto; margin-right: auto; }
.nd-cta .nd-cta-note { margin: 6px auto 0; font-size: var(--nd-fs-meta); color: var(--nd-ink-2); text-align: center; }
body:has(.nd-tab) .nd-cta { bottom: calc(var(--nd-tab-h) + var(--safe-b)); padding-bottom: var(--nd-s3); }

/* 카드·구분 띠·접기 줄(접기 줄 끝 화살표: summary 에 class "ic-down" 을 주면 그 아이콘 변수를 ::after 가 받는다) */
.nd-card { background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: var(--nd-r-card); padding: var(--nd-s4); }
.nd-sep { margin: 0 0 var(--nd-s2); padding: 6px 10px; border-radius: 10px; background: var(--nd-sunk); font-size: var(--nd-fs-label); font-weight: 700; color: var(--nd-ink); }
.nd-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--nd-s2); min-height: var(--tap); padding: 0 2px; border-top: 1px solid var(--nd-line); font-size: var(--nd-fs-ui); font-weight: 700; cursor: pointer; list-style: none; }
.nd-fold > summary::-webkit-details-marker { display: none; }
.nd-fold > summary::after { content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.nd-fold[open] > summary::after { transform: rotate(180deg); }
.nd-mini { font-size: var(--nd-fs-meta); color: var(--nd-ink-2); }

/* 빈 상태: 무엇이 비었는지 · 넣으면 생기는 일 · 넣는 단추 */
.nd-empty { text-align: center; padding: var(--nd-s6) var(--nd-s4); background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: var(--nd-r-card); }
.nd-empty > .ic { width: 44px; height: 44px; color: var(--nd-pine); }
.nd-empty-t { margin: var(--nd-s2) 0 2px; font-size: var(--nd-fs-h3); font-weight: 800; }
.nd-empty-d { margin: 0 0 var(--nd-s4); font-size: var(--nd-fs-meta); color: var(--nd-ink-2); }

/* 오류: 상황·이유·할 일 한 칸, 전체 폭 */
.nd-error { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: var(--nd-s4); background: var(--nd-surface); border: 1px solid var(--nd-stop-bg); border-left: 4px solid var(--nd-stop); border-radius: var(--nd-r-card); }
.nd-error > .ic { grid-row: span 2; color: var(--nd-stop); margin-top: 2px; }
.nd-error-t { margin: 0; font-weight: 800; }
.nd-error-d { margin: 0; font-size: var(--nd-fs-meta); color: var(--nd-ink-2); }
.nd-error > .btn, .nd-error > .nd-btn { grid-column: 1 / -1; margin-top: var(--nd-s3); }

/* 완료 카드: ok 원 아이콘 · 제목 · 번호 복사 */
.nd-done { display: grid; grid-template-columns: 40px 1fr; gap: 2px var(--nd-s3); align-items: center; padding: var(--nd-s4); background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: var(--nd-r-card); margin: var(--nd-s3) 0; }
.nd-done-ic { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nd-ok-bg); color: var(--nd-ok); }
.nd-done-t { margin: 0; font-size: var(--nd-fs-h3); font-weight: 800; }
.nd-done-d { margin: 0; font-size: var(--nd-fs-meta); color: var(--nd-ink-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nd-done > .nd-done-x { grid-column: 1 / -1; }
.nd-copy { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 var(--nd-s2); border: 0; background: none; font: inherit; font-size: var(--nd-fs-meta); font-weight: 700; color: var(--nd-pine); cursor: pointer; }

/* 차례 목록(설정 등): 아이콘 + 글자 48px 줄 */
.nd-list { list-style: none; margin: 0 0 var(--nd-s4); padding: 0; background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: var(--nd-r-card); overflow: hidden; }
.nd-list > li + li { border-top: 1px solid var(--nd-line); }
.nd-list-h { margin: var(--nd-s4) 2px var(--nd-s2); font-size: var(--nd-fs-label); font-weight: 800; color: var(--nd-ink-2); }
.nd-row { display: flex; align-items: center; gap: var(--nd-s3); width: 100%; min-height: 52px; padding: 0 var(--nd-s4); border: 0; background: none; font: inherit; font-size: var(--nd-fs-body); font-weight: 700; color: var(--nd-ink); text-align: left; cursor: pointer; }
.nd-row > .ic:first-child { color: var(--nd-pine); }
.nd-row > span { flex: 1; min-width: 0; }
.nd-row > .ic-chev { color: var(--nd-ink-2); }
.nd-row:active { background: var(--nd-sunk); }

/* 새 값 도착 1회 깜빡(600ms), 동작 줄이기면 없음 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes nd-pulse { 0% { background-color: var(--nd-coral-tint); } 100% { background-color: transparent; } }
  .nd-pulse { animation: nd-pulse var(--nd-dur-pulse) var(--nd-ease) 1; }
}

/* 화면에는 숨기고 화면 읽기에는 남긴다 */
.nd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }