/* ★0923 전역 규칙 격리 — 사장님 지적("화면이 잠시 나왔다가 세로줄 하나만 남음", "모바일은 흰색만").
 *  원인: 이 CSS 는 스탠드얼론 프로토타입용이라 body 를 직접 잡는다.
 *    body{display:grid; place-items:center; padding:24px 16px}  ← 우리 셸(#nt-root 컬럼)을
 *    가운데 정렬 격자에 넣어 폭이 내용만큼 줄어든다 = 세로줄. 모바일 규칙은 body 를 다시 덮어
 *    배경만 남기고 화면이 비어 보인다 = 흰 화면.
 *  처방: body/html 전역 규칙만 걷어낸다. 화면 안쪽 규칙(.screen .top .row …)은 그대로 둔다
 *        — 디자인은 무수정, 문서 전역만 우리 셸이 쥔다. */


/* ══════════════════════════════════════════════════════════════
   크라우니 집사 · 메신저 — 스탠드얼론 프로토타입
   설계서: DESIGN_SPEC.md (토큰·컴포넌트·화면·라우트·API 연결 지점)
   ────────────────────────────────────────────────────────────
   1. 토큰 (:root)          — 색·서체·간격. 값은 07·08·09 화면에서 실측.
   2. 셸 (.phone/.status)   — 데스크톱에선 폰 틀, 폰에선 전체 화면 (butler.html과 동일)
   3. 공통 컴포넌트         — .top .content .title .search .list .kv .chip .btn .ask .tabbar .switch …
   4. 집사 캐릭터           — .scene .drop .eyes .paper .spark .bubble (butler.html 레이어 그대로)
   5. 화면별 스타일         — [data-screen="…"]
   ══════════════════════════════════════════════════════════════ */

/* 1. 토큰 */
:root{
  --paper:#FAFAF6;        /* 페이지 바탕 */
  --ink:#1C1C1A;          /* 본문 검정 */
  --sub:#5B6070;          /* 보조 텍스트 (청회색) */
  --sub-2:#6B7180;        /* placeholder */
  --line:#E5E5E1;         /* 구분선 */
  --line-2:#BFC1C7;       /* 검색·입력 밑줄 */
  --line-nav:#E8E9E9;     /* 아래 메뉴 윗선 */
  --gold:#8F6D33;         /* 포인트 (왕관·링크·칩·점·막대) — 본문 대비 4.6:1 */
  --gold-2:#B89448;       /* 옅은 금색 (보조 테두리) */
  --btn:#393939;          /* 주 버튼·내 말풍선·배지 */
  --send:#333333;         /* 보내기 원 */
  --btn-line:#555B66;     /* 보조 버튼 테두리 */
  --input-line:#C3C7D0;   /* 입력창 테두리 */
  --input-div:#B7BAC7;    /* 입력창 세로 구분선 */
  --bubble-line:#BBB3A9;  /* 집사 말풍선 테두리 */
  --white:#FFFFFF;
  --ava:#EDECE6;          /* 아바타 바탕 */
  --track:#E0E0DC;        /* 진행 막대 트랙 */
  --desk:#E7E6E0;         /* 데스크톱 배경 (폰 틀 밖) */
  --say:#3D3D3A;
  --sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --pad-l:30px; --pad-r:32px;   /* 본문 좌우 여백 (실측 29.5 / 32) */
  --r-input:12px; --r-btn:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--desk:#1B1C1A}}
:root[data-theme="dark"]{--desk:#1B1C1A}

*{box-sizing:border-box}
/* [격리] html,body{height:100%} — 우리 셸(nt.css)이 관리 */
/* [격리] 원본 body 규칙 — 레이아웃(grid/place-items/padding)이 우리 셸을 짜부라뜨려 제거.
   글꼴·색만 화면 안쪽으로 옮긴다. */
#nt-root, .phone, section.screen{color:var(--ink);font:400 16px/1.5 var(--sans);word-break:keep-all;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:var(--gold);text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{display:block}

/* 2. 셸 */
.phone{position:relative;width:390px;max-width:100%;height:min(844px,calc(100vh - 48px));min-height:640px;background:var(--paper);border-radius:46px;box-shadow:0 0 0 10px #151514,0 0 0 11px #3A3A37,0 30px 60px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column}
.status{display:flex;justify-content:space-between;align-items:center;height:44px;padding:8px 26px 0 32px;font-weight:600;font-size:15px;flex-shrink:0}
.status svg{height:12px;margin-left:6px;display:inline-block}
@media (max-width:480px){
  /* [격리] body 규칙 제거 — 우리 셸이 문서 전역을 쥔다 */
  .phone{width:100%;height:100dvh;min-height:0;border-radius:0;box-shadow:none}
  .status{visibility:hidden;height:env(safe-area-inset-top,20px)}
}
.screen{display:none;flex:1;min-height:0;flex-direction:column}
.screen.active{display:flex}

/* 3. 공통 컴포넌트 */
.top{height:48px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 20px 0 28px}
.top .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.top .brand svg{width:26px;height:20px}
.top .grow{flex:1;min-width:0}
.top .ib{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;color:var(--ink)}
.top .ib svg{width:22px;height:22px}
.top.back{gap:6px;padding:0 20px 0 18px}
.top.back .ib svg{width:24px;height:24px}
.top .ttl{font-size:17px;font-weight:600;line-height:22px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .subttl{font-size:13px;line-height:16px;color:var(--sub)}

.content{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 var(--pad-r) 0 var(--pad-l);overflow:auto;overscroll-behavior:contain}
.content.pb17{padding-bottom:17px}
.title{margin:29px 0 0;font-size:32px;font-weight:700;line-height:38px;letter-spacing:-.02em}
.title.two{margin-top:8px;line-height:37px}
.eyebrow{margin-top:24px;font-size:17px;line-height:24px;color:var(--sub)}
.caption{font-size:17px;line-height:24px;color:var(--sub)}
.h2{margin:26px 0 0;font-size:25px;font-weight:700;line-height:32px;letter-spacing:-.02em}
.divider{height:1px;background:var(--line)}

.search{display:flex;align-items:center;gap:20px;height:44px;margin-top:16px;padding-left:5px;border-bottom:1px solid var(--line-2);flex-shrink:0}
.search svg{width:20px;height:20px;flex-shrink:0}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:18px;line-height:24px;padding:0;-webkit-appearance:none;appearance:none}
input::placeholder{color:var(--sub-2);opacity:1}

.list{display:flex;flex-direction:column;margin-top:18px}
.row{display:flex;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;width:100%}
.row .body{flex:1;min-width:0}
.row .t1{font-size:19px;font-weight:600;line-height:26px;letter-spacing:-.01em}
.row .t2{margin-top:4px;font-size:16px;line-height:22px;color:var(--sub)}
.row .meta{flex-shrink:0;text-align:right;font-size:14px;line-height:20px;color:var(--sub);margin-top:3px}
.chev{width:16px;height:16px;flex-shrink:0;align-self:center;margin-left:34px}
.chev.tight{margin-left:12px}

.kv{display:flex;align-items:center;height:46px;border-bottom:1px solid var(--line);font-size:17px;line-height:24px}
.kv .k{width:122px;flex-shrink:0;color:var(--sub)}
.kv.dark .k{color:var(--ink)}
.kv .v{flex:1}
.kv.right{justify-content:space-between}
.kv.right .k{width:auto;color:var(--ink)}
.kv.right .v{flex:0 0 auto;white-space:nowrap}

.chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1.5px solid var(--gold);border-radius:15px;font-size:15px;font-weight:500;line-height:1;color:var(--gold)}
.chip.sm{height:22px;font-size:12px;padding:0 8px;border-radius:11px}
.chip-toggle{height:32px;padding:0 12px;border-radius:16px;font-size:14px;font-weight:500;line-height:1;border:1px solid var(--line-2);color:var(--ink)}
.chip-toggle[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:#fff}

.btn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border-radius:var(--r-btn);font-size:18px;font-weight:500;color:var(--ink)}
.btn.primary{background:var(--btn);color:#fff}
.btn.secondary{height:44px;border:1px solid var(--btn-line);background:transparent}
.btn-stack{display:flex;flex-direction:column;gap:9px;margin:auto -12px 0 -10px}   /* 버튼은 본문보다 10px 넓게 (실측 20~370) */
.gold-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:17px;font-weight:500;line-height:24px}
.gold-link svg{width:18px;height:18px}
.plus-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:18px;font-weight:500;line-height:24px}
.plus-link svg{width:14px;height:14px}

.progress{margin-top:10px;height:9px;border-radius:5px;background:var(--track);overflow:hidden}
.progress > i{display:block;height:100%;border-radius:5px;background:var(--gold)}

/* 입력창 (집사에게 말하기) — 실측: 높이 54, 좌 16 / 우 18, + 아이콘 18, 보내기 원 40 */
.ask{display:flex;align-items:center;height:54px;flex-shrink:0;margin:0 18px 16px 16px;background:var(--white);border:1px solid var(--input-line);border-radius:var(--r-input);padding:0 10px 0 6px}
.ask .plus{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0}
.ask .plus svg{width:18px;height:18px}
.ask i{width:1px;height:20px;background:var(--input-div);margin-left:6px;flex-shrink:0}
.ask input{flex:1;min-width:0;margin-left:13px;border:0;outline:0;background:transparent;font-size:18px;line-height:24px;padding:0}
.ask .send{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0}
.ask .send b{width:40px;height:40px;border-radius:50%;background:var(--send);display:grid;place-items:center}
.ask .send svg{width:18px;height:18px}
.ask.composer{margin-bottom:calc(16px + env(safe-area-inset-bottom,18px))}

/* 아래 메뉴 — 실측: 높이 85, 아이콘 24, 라벨 13, 금색 점 8 */
.tabbar{height:85px;flex-shrink:0;border-top:1px solid var(--line-nav);background:#FAFAF7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:11px;color:var(--ink);font-size:13px;line-height:16px;position:relative}
.tabbar a svg{width:24px;height:24px}
.tabbar a::after{content:"";width:8px;height:8px;border-radius:4px;background:transparent;margin-top:-2px}
.tabbar a.on::after{background:var(--gold)}
@media (max-width:480px){.tabbar{height:calc(85px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}}

.avatar{width:44px;height:44px;border-radius:50%;background:var(--ava);display:grid;place-items:center;flex-shrink:0;font-size:15px;font-weight:600;color:var(--sub)}
.avatar.butler{background:var(--white);border:1.5px solid var(--gold)}
.avatar.butler svg{width:50%;height:38%}
.avatar.s32{width:32px;height:32px;font-size:12px}
.avatar.s36{width:36px;height:36px;font-size:12px}
.avatar.s40{width:40px;height:40px;font-size:13px}
.avatar.s48{width:48px;height:48px;font-size:16px}
.avatar.s64{width:64px;height:64px;font-size:22px}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--btn);color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center}

.switch{position:relative;width:46px;height:28px;border-radius:14px;background:#C9C9C3;transition:background .2s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .2s}
.switch[aria-checked="true"]{background:var(--gold)}
.switch[aria-checked="true"]::after{left:21px}

.setrow{display:flex;align-items:center;height:46px;border-bottom:1px solid var(--line);font-size:17px;line-height:24px;color:var(--ink);width:100%;text-align:left}
.setrow > svg{width:22px;height:22px;flex-shrink:0;margin-right:14px}
.setrow .lbl{flex:1;min-width:0}
.setrow .val{font-size:16px;color:var(--sub)}
.setrow.h52{height:52px}
.sec{margin-top:24px;font-size:14px;line-height:20px;color:var(--sub)}

/* 4. 집사 캐릭터 — butler.html의 레이어·애니메이션 그대로 */
.scene{position:relative;width:220px;height:176px}
.stage{position:relative;flex:1}
.ground{position:absolute;left:-18px;right:-18px;bottom:22px;height:1px;background:linear-gradient(90deg,transparent,#CFCEC8 20%,#CFCEC8 80%,transparent)}
.ground::after{content:"";position:absolute;left:30%;right:30%;top:-3px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.18),transparent)}
.drop{position:absolute;left:38px;bottom:0;width:160px;height:160px}
.drop>*{position:absolute;inset:0;width:100%;height:100%}
.drop img{pointer-events:none;user-select:none}
.bob{transform-origin:50% 86%;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-3px) scale(.975,1.03)}50%{transform:translateY(-1px) scale(1.03,.975)}75%{transform:translateY(-3px) scale(.985,1.02)}}
.paper{transform-origin:64.6% 69.8%;animation:sway 3.6s ease-in-out infinite alternate}
@keyframes sway{0%{transform:rotate(-1.6deg)}100%{transform:rotate(1.8deg)}}
.eyes span{position:absolute;width:2.9%;height:4.7%;background:#1B1C1A;border-radius:50%;transform:translate(-50%,-50%);animation:blink 4.4s infinite}
.eyes .l{left:46.8%;top:48.7%}.eyes .r{left:57.4%;top:48.1%}
.eyes{animation:read 6s ease-in-out infinite}
@keyframes read{0%{transform:translate(-.6%,-.5%)}26%{transform:translate(1.4%,-.5%)}33%{transform:translate(-.6%,.5%)}59%{transform:translate(1.4%,.5%)}66%{transform:translate(-.6%,1.4%)}92%{transform:translate(1.4%,1.4%)}100%{transform:translate(-.6%,-.5%)}}
@keyframes blink{0%,90%,100%{transform:translate(-50%,-50%) scaleY(1)}93%{transform:translate(-50%,-50%) scaleY(.1)}}
.eyes.up{animation:none;transform:translate(.4%,-1.6%)}
.spark{position:absolute;left:150px;top:44px;width:24px;height:24px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.tint{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;background:#6FD3A4;mix-blend-mode:color;opacity:0;transition:opacity .6s}
.cheer .tint{opacity:.5}
.butler-sec{margin-top:auto;padding:26px 0 18px;display:grid;justify-items:center;gap:12px;text-align:center}
.say{margin:0;font-size:16.5px;line-height:25px;color:var(--say);min-height:25px;transition:opacity .25s}
.new{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-size:17px;font-weight:500;padding:6px 10px}
.new svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.bob,.paper,.eyes,.eyes span,.spark{animation:none}}

/* 말풍선 — 흰 바탕, 1.5px 갈색 테두리, 반지름 18, 14/21 */
.bubble{position:absolute;background:var(--white);border:1.5px solid var(--bubble-line);border-radius:18px;padding:10px 12px;font-size:14px;line-height:21px;color:#2A2E38;white-space:nowrap;letter-spacing:-.01em}
.bubble::before{content:"";position:absolute;left:14px;bottom:-13px;border-style:solid;border-width:13px 13px 0 0;border-color:var(--bubble-line) transparent transparent transparent}
.bubble::after{content:"";position:absolute;left:15.5px;bottom:-10px;border-style:solid;border-width:10px 10px 0 0;border-color:var(--white) transparent transparent transparent}
.bubble.tail-left::before{left:-13px;bottom:auto;top:50%;margin-top:-10px;border-width:10px 13px 10px 0;border-color:transparent var(--bubble-line) transparent transparent}
.bubble.tail-left::after{left:-10px;bottom:auto;top:50%;margin-top:-8px;border-width:8px 10.5px 8px 0;border-color:transparent var(--white) transparent transparent}
.bubble.tail-r::before{left:24px}.bubble.tail-r::after{left:25.5px}

/* 5. 화면별 */
/* 07 메모 */
[data-screen="notes"] .stage{min-height:187px}
[data-screen="notes"] .ground{left:0;right:auto;width:180px;bottom:23px}
[data-screen="notes"] .drop{left:4px;top:30px;bottom:auto;width:150px;height:150px}
[data-screen="notes"] .spark{left:112px;top:48px}
[data-screen="notes"] .bubble{left:140px;top:25px}
[data-screen="notes"] .plus-link{position:absolute;right:22px;top:119px}
/* 08 작업 상세 */
[data-screen="task"] .stage{flex:0 0 160px}
[data-screen="task"] .ground{left:30px;right:auto;width:150px;bottom:32px}
[data-screen="task"] .drop{left:40px;top:20px;bottom:auto;width:120px;height:120px}
[data-screen="task"] .spark{left:130px;top:22px}
[data-screen="task"] .bubble{left:166px;top:30px}
/* 09 시스템 상태 */
[data-screen="status"] .stage{min-height:174px}
[data-screen="status"] .ground{left:176px;right:auto;width:150px;bottom:22px}
[data-screen="status"] .drop{left:176px;top:44px;bottom:auto;width:120px;height:120px}
[data-screen="status"] .spark{left:300px;top:92px}
[data-screen="status"] .bubble{left:217px;top:0}
/* B02 챙겨둘 일 (butler.html) */
.tabs{display:flex;gap:44px;margin-top:22px;font-size:17px;line-height:24px}
.tabs button{position:relative;padding:0 2px 14px;color:var(--sub)}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:500}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:-4px;right:-6px;bottom:0;height:3px;border-radius:2px;background:var(--gold)}
.tabs b{font-weight:500;margin-left:8px}
.tasklist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:6px}
.task{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:20px;align-items:center;padding:10px 0}
.check{width:32px;height:32px;border:1.6px solid var(--ink);border-radius:50%;display:grid;place-items:center;transition:background .25s,border-color .25s}
.check svg{width:16px;height:16px;opacity:0;transition:opacity .2s}
.task.done .check{background:var(--gold);border-color:var(--gold)}
.task.done .check svg{opacity:1}
.task.done .t1{color:var(--sub);text-decoration:line-through;text-decoration-color:#B9B8B1}
.task .t1{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:26px}
.task .t2{font-size:14.5px;color:var(--sub);margin-top:2px;line-height:20px}
.task .chev{width:12px;height:18px;margin:0;justify-self:end}
.empty-tab{color:var(--sub);font-size:14.5px;padding:18px 0}
/* B01 집사 홈 */
[data-screen="butler"] .row{align-items:center;padding:14px 0}
[data-screen="butler"] .row .t1{font-size:18px;font-weight:500}
[data-screen="butler"] .row .t2{margin-top:2px;font-size:14.5px;line-height:20px}
/* M01 로그인 */
[data-screen="login"] .logo{margin-top:106px;display:grid;justify-items:center}
[data-screen="login"] .logo svg{width:52px;height:40px}
[data-screen="login"] .title{margin-top:16px;text-align:center}
[data-screen="login"] form{margin-top:40px;display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column}
.field label{font-size:14px;line-height:20px;color:var(--sub)}
.field input{height:44px;border:0;border-bottom:1px solid var(--line-2);border-radius:0;outline:0;background:transparent;font-size:18px;line-height:24px;padding:0}
[data-screen="login"] .butler-sec{padding-bottom:40px}
/* M02 채팅 */
.room{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);width:100%;text-align:left}
.room .name{font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.01em}
.room .last{margin-top:2px;font-size:15px;line-height:20px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room .side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.room .time{font-size:13px;line-height:18px;color:var(--sub)}
/* 협업 — 프로토타입에 없던 화면이라 배치 규칙이 없어 집사홈과 **똑같은 그림**으로 보였다
   (0925 사장님 "화면마다 이미지들이 서로 달라야 함"). 새 값을 지어내지 않고
   DESIGN_SPEC §4.2 「08 작업 상세」 배치값을 그대로 가져와 쓴다.
   → 집사홈 160 가운데 / 협업 120 왼쪽위 / 채팅목록 130 왼쪽 / 대화방 72 바닥 — 화면마다 다르다. */
[data-screen="collab"] .scene{width:220px;height:160px}
[data-screen="collab"] .drop{left:40px;top:20px;bottom:auto;width:120px;height:120px}
[data-screen="collab"] .ground{left:30px;right:auto;width:150px;bottom:32px}
[data-screen="collab"] .spark{left:130px;top:22px}

[data-screen="chats"] .stage{min-height:150px}
[data-screen="chats"] .ground{left:0;right:auto;width:180px;bottom:12px}
[data-screen="chats"] .drop{left:8px;top:24px;bottom:auto;width:130px;height:130px}
[data-screen="chats"] .spark{left:102px;top:34px}
[data-screen="chats"] .bubble{left:128px;top:14px}
[data-screen="chats"] .plus-link{position:absolute;right:22px;top:96px}
/* M03 채팅방 */
.thread{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:12px 20px 16px}
.day{text-align:center;font-size:13px;line-height:18px;color:var(--sub)}
.msg{display:flex;align-items:flex-start;gap:10px}
.msg .col{display:flex;flex-direction:column;min-width:0}
.msg .who{font-size:13px;line-height:16px;color:var(--sub);margin-bottom:4px}
.msg .line{display:flex;align-items:flex-end;gap:6px}
.msg .bub{max-width:236px;background:var(--white);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:16px;line-height:23px;color:var(--ink);white-space:pre-line}
.msg .bub .gold-link{margin-top:8px}
.msg .tm{font-size:12px;line-height:16px;color:var(--sub);white-space:nowrap}
.msg.butler .bub{border:1.5px solid var(--bubble-line);border-radius:18px}
.msg.me{justify-content:flex-end;align-items:flex-end;gap:6px}
.msg.me .bub{background:var(--btn);color:#fff;border:0;border-radius:16px 16px 4px 16px}
/* M04 방 정보 */
.roomhead{margin-top:20px;display:grid;justify-items:center;gap:0}
.roomhead .nm{margin-top:12px;font-size:25px;font-weight:700;line-height:32px;letter-spacing:-.02em}
.roomhead .ct{margin-top:4px;font-size:15px;line-height:22px;color:var(--sub)}
.member{display:flex;align-items:center;gap:12px;height:44px}
.member .nm{font-size:17px;font-weight:500;line-height:24px}
.member .chip{margin-left:10px}
.sechead{margin-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:600;line-height:24px}
.sechead .n{font-weight:500;color:var(--sub)}
.sechead .plus-link{font-size:16px}
/* M05 회원 */
.mrow{display:flex;align-items:center;gap:14px;height:60px;border-bottom:1px solid var(--line);color:var(--ink);width:100%;text-align:left}
.mrow .av{position:relative;flex-shrink:0}
.mrow .dot{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#C9C9C3;border:2px solid var(--paper)}
.mrow .dot.on{background:var(--gold)}
.mrow .nm{font-size:17px;font-weight:600;line-height:24px}
.mrow .st{font-size:14px;line-height:18px;color:var(--sub)}
.mrow .chip{margin-left:10px}
.title-row{display:flex;align-items:baseline;gap:10px}
.title-row .caption{font-size:17px}
/* M06 새 대화 */
.pick{display:flex;align-items:center;gap:14px;height:52px;width:100%;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);font-size:17px;line-height:24px}
.pick .box{width:22px;height:22px;border-radius:5px;border:1.5px solid var(--sub);display:grid;place-items:center;flex-shrink:0}
.pick .box svg{width:14px;height:14px;opacity:0}
.pick[aria-pressed="true"] .box{background:var(--btn);border-color:var(--btn)}
.pick[aria-pressed="true"] .box svg{opacity:1}
.pick .nm{flex:1}
.newfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.newfoot .cnt{font-size:14px;line-height:20px;color:var(--sub)}
.newfoot .btn{margin:0 -12px 0 -10px;width:auto}
/* M07 더보기 */
.profile{margin-top:20px;display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);width:100%;text-align:left}
.profile .nm{font-size:18px;font-weight:600;line-height:24px}
.profile .sb{margin-top:2px;font-size:14px;line-height:18px;color:var(--sub)}
.menu{display:flex;flex-direction:column}
.menu + .menu{margin-top:12px}
.menu a,.menu button{display:flex;align-items:center;height:52px;border-bottom:1px solid var(--line);color:var(--ink);font-size:17px;line-height:24px;width:100%;text-align:left}
.menu svg.ic{width:22px;height:22px;flex-shrink:0;margin-right:14px}
.menu .lbl{flex:1;min-width:0}
.menu .badge{margin-right:12px}
.menu .chev{margin-left:0;align-self:auto}
/* M08 설정 */
.themes{display:flex;gap:8px}

/* ★0923 화면 활성 — 근본 처리.
 *  원본은 13화면을 한 문서에 두고 .active 하나만 보여주는 SPA 라 .screen{display:none} 이 맞다.
 *  우리 셸은 한 번에 한 화면만 DOM 에 붙이므로 "붙어 있는 화면 = 보여야 할 화면"이다.
 *  그런데 모듈마다 active 를 따로 붙이다 보니 빠진 곳이 생겼다 —
 *    집사홈(0923) · 협업(0923) · 로그인(공개주소에서 흰 화면, 0923)
 *  그래서 CSS 한 곳에서 끝낸다: 우리 셸(#nt-root) 안의 화면은 기본이 보임.
 *  (원본 파일은 그대로 두고 우리 셸 스코프에서만 뒤집는다 — 디자인 무수정 유지) */
#nt-root section.screen{display:flex}

/* ★0925 브랜드 로고(원본 크라우니로고.png, sha 7ae479…) — 원본 PNG가 크림 바탕이라
 *  라이트=곱하기로 바탕을 지우고, 다크=반전 후 스크린으로 흰 선만 남긴다(원본 파일 무수정). */
img.nt-brandlogo{mix-blend-mode:multiply}
:root[data-theme="dark"] img.nt-brandlogo{filter:invert(1);mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) img.nt-brandlogo{filter:invert(1);mix-blend-mode:screen}}

/* ★0925 다크모드 — 물빛 시안 토큰 25개 중 다크값이 --desk·--gold 뿐이라
 *  삼선 버튼·캐릭터 이름·대화 영역이 밝은 색 그대로 남았다(DESIGN_SPEC "다크 토큰 [확인 필요]").
 *  새 색을 만들지 않고 이미 다크 검증된 nt.css 토큰(09-23 기준선)으로 연결만 한다. */
:root[data-theme="dark"]{
  --ink:var(--nt-ink-strong); --say:var(--nt-ink); --sub:var(--nt-muted); --sub-2:var(--nt-muted);
  --paper:var(--nt-bg); --white:var(--nt-surface); --ava:var(--nt-track); --track:var(--nt-track);
  --line:var(--nt-line); --line-2:var(--nt-line); --line-nav:var(--nt-line);
  --bubble-line:var(--nt-line); --input-line:var(--nt-line); --input-div:var(--nt-line); --btn-line:var(--nt-line);
  --btn:var(--nt-accent); --send:var(--nt-accent);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:var(--nt-ink-strong); --say:var(--nt-ink); --sub:var(--nt-muted); --sub-2:var(--nt-muted);
  --paper:var(--nt-bg); --white:var(--nt-surface); --ava:var(--nt-track); --track:var(--nt-track);
  --line:var(--nt-line); --line-2:var(--nt-line); --line-nav:var(--nt-line);
  --bubble-line:var(--nt-line); --input-line:var(--nt-line); --input-div:var(--nt-line); --btn-line:var(--nt-line);
  --btn:var(--nt-accent); --send:var(--nt-accent);
}}
/* 다크에서 --btn 이 금색이 되므로 그 위 글자는 흰색 대신 on-accent(진갈색) */
:root[data-theme="dark"] :is(.chip-toggle[aria-pressed="true"],.btn.primary,.badge,.msg.me .bub){color:var(--nt-on-accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.chip-toggle[aria-pressed="true"],.btn.primary,.badge,.msg.me .bub){color:var(--nt-on-accent)}}
/* 말풍선 글자는 시안이 #2A2E38 고정 — 다크에선 바탕(--white→surface)과 겹쳐 안 보였다 */
:root[data-theme="dark"] .bubble{color:var(--nt-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bubble{color:var(--nt-ink)}}