/* CrownyDoc/한선씨/정적/물닙독.css — 독 전용 물닙 부속 스타일 (P2, 2026-09-23)
   · 「집사에게 말하기」 입력줄(.ask) — DESIGN_SPEC §0 "하단 .ask 54px 「+ | 집사에게 말하기 … ↑」"
   · 이모지 자리를 대체한 모노톤 점(.od-dot-live)
   값은 전부 /static/물닙/물닙토큰.css 변수만 쓴다 — 이 파일에 hex 리터럴 0.
   공통/물닙/물닙.css 는 정본이라 건드리지 않는다(부속만 여기에). */

/* 도크 안: 스테이지 아래에 입력줄 */
.mulnipm-dock .ask {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  height: var(--h-ask);
  margin-top: 6px;
  padding: 0 8px;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--input-line);
  border-radius: var(--r-input);
  font-family: var(--font);
  word-break: keep-all;
}
.mulnipm-dock.folded .ask { display: none; }

.mulnipm-dock .ask-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--touch-dot);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  outline: none;
}
.mulnipm-dock .ask-input::placeholder { color: var(--sub-2); }

.mulnipm-dock .ask-plus,
.mulnipm-dock .ask-send {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--touch-dot);
  height: var(--touch-dot);
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--sub);
  cursor: pointer;
}
.mulnipm-dock .ask-send { color: var(--send); }
.mulnipm-dock .ask-plus:focus-visible,
.mulnipm-dock .ask-send:focus-visible,
.mulnipm-dock .ask-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 이모지(●) 대체 — 상태 점. 색은 collab-client.js 가 color 로 바꾸므로 currentColor. */
.od-dot-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* 이모지(⚙·＋) 대체 SVG 글리프 — 상단바/상태바 버튼 안에서 24 viewBox 를 줄여 쓴다 */
.od-glyph { width: 14px; height: 14px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .mulnipm-dock .ask { transition: none; }
}

/* ── 형태 규칙 (DESIGN_SPEC §0) — 기존 레이아웃을 밀지 않는 범위에서만 적용 ── */

/* 서체·줄바꿈: 물닙 정본 스택(테마.css --font)과 keep-all */
body, .od-topbar, .status-bar, .main-area {
  font-family: var(--font);
  word-break: keep-all;
}

/* 44 터치타깃 — 아이콘 버튼의 **히트 영역만** 넓힌다(::after 오버레이라 레이아웃 불변).
   가시 원은 기존 크기를 유지(§0 "터치타깃 44, 보이는 원 40"). */
.od-topbar .tb-btn,
.od-topbar .od-tb-btn,
.od-topbar .od-avatar,
.status-bar .tb-btn { position: relative; }
.od-topbar .tb-btn::after,
.od-topbar .od-tb-btn::after,
.od-topbar .od-avatar::after,
.status-bar .tb-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--touch);
  height: var(--touch);
  transform: translate(-50%, -50%);
}

/* 금색 링크 — 본문/패널 안 텍스트 링크 */
.main-area a:not([class]),
#comments-panel a:not([class]) {
  color: var(--gold);
  text-decoration: none;
}
.main-area a:not([class]):hover,
#comments-panel a:not([class]):hover { text-decoration: underline; }

/* ── 되돌리기 바 (P2c 2026-09-23) — 저장 흐름의 "보이는 되돌리기·취소" ──────────────
 * 배선/문구/동작 판정 정본 = 되돌리기.한선(12/12) · 미러 = 되돌리기.js
 * 물닙 톤: paper 면 · bubble-line 1.5px · 말풍선 반경 18 · 44 터치타깃 · hex 0(토큰만)
 */
.undo-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  /* 투어 토스트(하단 중앙)와 겹치지 않도록 한 칸 위로 — 실캡처에서 가려지던 것 수정 */
  bottom:calc(var(--status-h) + 74px);
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--bg-card);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-md);
  font-family:var(--font);
  font-size:14px; line-height:21px; color:var(--text);
  word-break:keep-all; z-index:9800;
}
.undo-bar .undo-msg{ white-space:nowrap; }
.undo-bar .undo-act{
  position:relative;
  min-height:32px; padding:6px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--gold);
  font-family:var(--font); font-size:14px; font-weight:600;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
/* 보이는 원은 32, 실제 터치 영역은 44 — 레이아웃은 그대로 두고 히트영역만 넓힌다 */
.undo-bar .undo-act::after{
  content:""; position:absolute; left:50%; top:50%;
  width:100%; height:44px; min-width:44px;
  transform:translate(-50%,-50%);
}
.undo-bar .undo-act:hover{ background:var(--bg-card-alt); border-color:var(--gold); }
.undo-bar .undo-act:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .undo-bar .undo-act{ transition:none; }
}

/* ── 중앙CSS 소비층 (P2c 2026-09-23) ──────────────────────────────────────────
 * 왜 있나: 독의 색 토큰은 세 겹이다 — ① 물닙 정본(물닙토큰.css, 기획서 §0 이 채택한 계보)
 * ② 중앙 크라우니디자인.css(--crowny-*, 08-20 사장님 확정 규칙의 소비 대상) ③ 앱 테마.css.
 * ①과 ②는 지면·금색 값이 서로 다르다(물닙은 차가운 종이·짙은 금, 중앙은 따뜻한 크림·밝은 금 —
 * 값 자체는 각 정본 파일에서 확인한다. 여기엔 리터럴을 적지 않는다). 기획서가
 * **①을 채택**했으므로 ①이 1순위이고, ②는 ①이 못 실려 왔을 때의 백스톱이다(별도 <link> 라
 * 실제로 일어날 수 있는 상황 — 그때 무색으로 무너지지 않고 중앙 팔레트로 내려앉는다).
 * 폴백 사슬 어디에도 hex 가 없다. 라이트(명시 dark 아님)로 범위를 한정해 [data-theme=dark]·
 * prefers-color-scheme:dark·prefers-contrast 오버라이드를 덮지 않는다(이 파일이 마지막 로드).
 * 계산값 검증: ① 로드 시 전 토큰이 물닙 정본 값 그대로 — 색 변화 0.
 */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:       var(--paper, var(--crowny-cream));
    --bg-card:  var(--white, var(--crowny-card));
    --text:     var(--ink,   var(--crowny-ink));
    --text-sec: var(--sub,   var(--crowny-mut));
    --border:   var(--line,  var(--crowny-line));
    --accent:   var(--gold,  var(--crowny-gold));
  }
}