/* ==========================================================================
   Clone Town — 데스크탑 웹 화면 (넓은 화면에서 ?phone 없이 열었을 때)

   2026-10-14 대표: "폰을 넓게 펼친 버전 말고 **웹에 맞게** UI랑 UX를 변경해라.
                     **채팅창 위주에 탭 나누고.**"

   폰 화면은 작은 칸 하나에 네 탭을 번갈아 끼워 넣는다. 그걸 1440px 로 늘리면
   가운데에 폰 목업 하나가 뜨고 양옆이 검게 빈다 — 넓어진 게 아니라 **커진 것**이다.
   웹은 질문이 다르다. 폰은 "지금 뭐가 됐나"를 곁눈질하는 화면이고,
   웹은 **일을 시키고 주고받는** 화면이다.

     상단 바   — 나는 누구로 들어와 있고 마을은 살아 있나
     왼쪽 240  — 지금 내가 눌러야 할 자리가 몇 개인가   (이동만 한다. 여기서 결정하지 않는다)
     가운데    — 무엇을 맡겼고 무엇이 나왔나            (탭이 바꾸는 건 **여기뿐**)
     오른쪽 400 — 내 클론은 지금 어디서 뭘 하나          (마을. 탭과 무관하게 상주)

   ⚠️ 폰 섀시(#bb)는 절대 쓰지 않는다. 베젤·홈 인디케이터·iOS 상태바는
      "작은 화면인 척"하는 장치라 1440px 에서는 거짓말이 된다.
   ⚠️ 카드 생김새(.jr-*, .bb-job, .mk-sec, .tl-*)는 ct-phone.css 를 **그대로 상속**한다.
      두 벌로 갈라지면 한쪽만 고쳐지는 날이 반드시 온다.
      다만 `.bb-pane{position:absolute;inset:0}` 은 폰 레이아웃 전제라 아래에서 되돌린다.
   ========================================================================== */

body.dk {
    margin: 0; height: 100vh; overflow: hidden;
    background: #070910; color: #c2cadb;
    font-family: 'Pretendard', system-ui, 'Malgun Gothic', sans-serif;
}
/* ⚠️ #app 을 먼저 display:none 으로 덮으면 그 안에서 부팅하는 Phaser 가 크기 0 을 보고
   빈 캔버스를 만든다(폰에서 실제로 겪은 사고). **옮긴 뒤에야** 숨긴다. */
body.dk #app { position: fixed; left: -10000px; top: 0; width: 1200px; height: 760px; }
body.dk.dk-ready #app { display: none; }
body.dk #ambient-bar, body.dk #ct-minimap { display: none !important; }

/* ── 상단 바 ─────────────────────────────────────────────────────── */
#dk-top {
    display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px;
    border-bottom: 1px solid #1a2130; background: #0a0d16;
}
#dk-top .bd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #fff; }
#dk-top .dot { width: 7px; height: 7px; border-radius: 50%; background: #57e0c4; }
#dk-top .who { font-size: 12px; color: #8b95a8; }
#dk-top .who b { color: #e6ecf5; font-weight: 700; }
/* ⚠️ 회사명은 **표시만** 한다. 입주민 화면에 회사 전환기가 보이면 "다른 회사도 볼 수 있다"는
   오해를 만들고 관리자 화면과의 경계가 흐려진다(보안선). */
#dk-top .co { color: #57e0c4; }
#dk-top #bb-now { margin-left: auto; font-size: 11.5px; color: #7d879b; max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dk-top #bb-time { font: 700 11.5px/1 ui-monospace, Consolas, monospace; color: #5c6478; }
#dk-reload { display: none; font-size: 11px; color: #e3c07b; background: #2d2a1a;
    border: 1px solid #5f5330; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
#dk-reload.on { display: inline-block; }

/* ── 세 칸 ───────────────────────────────────────────────────────── */
#dk { display: grid; grid-template-columns: 240px minmax(0, 1fr) 400px; height: calc(100vh - 46px); }
#dk-rail { display: flex; flex-direction: column; border-right: 1px solid #1a2130; background: #0a0d16; min-height: 0; }
#dk-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#dk-right { display: flex; flex-direction: column; border-left: 1px solid #1a2130; background: #0a0d16; min-height: 0; }

/* ── 왼쪽 레일: 세로 탭 ───────────────────────────────────────────
   가로 탭 스트립을 안 쓴 이유 — 데스크탑에서 희소한 건 **세로 높이**다. 가로는 남는다.
   가로 스트립은 스트림에서 40px 를 영구히 빼앗는다. */
#dk-tabs { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.dk-tab {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 700; color: #7d879b;
}
.dk-tab:hover { background: #10151f; color: #c2cadb; }
.dk-tab.on { background: #121a2a; color: #fff; }
.dk-tab .ic { width: 16px; text-align: center; opacity: .9; }
.dk-tab .cnt {
    display: none; margin-left: auto; padding: 0 6px; border-radius: 9px;
    background: #c0392b; color: #fff; font: 700 10px/16px ui-monospace, Consolas, monospace;
}
.dk-tab .cnt.on { display: inline-block; }

#dk-rail .grow { flex: 1; min-height: 0; }
#dk-rail-foot { padding: 13px 16px; border-top: 1px solid #1a2130; font-size: 10.5px; color: #5c6478; line-height: 1.65; }
#dk-rail-foot b { color: #7d879b; font-weight: 700; }

/* ── 가운데: 뷰 넷 중 하나 ───────────────────────────────────────── */
.dk-view { display: none; flex-direction: column; min-height: 0; flex: 1; }
.dk-view.on { display: flex; }
.dk-head { display: flex; align-items: baseline; gap: 9px; padding: 14px 24px 12px; border-bottom: 1px solid #1a2130; }
.dk-head b { font-size: 13.5px; color: #fff; }
.dk-head span { font-size: 11px; color: #6b7589; }
.dk-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 10px; }

/* ⚠️ ct-phone.css 의 `.bb-pane{position:absolute;inset:0}` 를 되돌린다.
   폰은 화면이 하나뿐이라 겹쳐 두고 켰다 껐다 했지만, 여기선 그냥 흐르는 칸이다. */
body.dk .bb-pane { position: static !important; inset: auto !important; display: block !important; }
body.dk .bb-pane#bb-pane-dm { display: none !important; }

/* 받은 제안 — 대화 뷰 맨 위. ⚠️ 시간순 스트림에 섞지 않고 **결정 대기**로 따로 세운다.
   섞으면 "하나의 대화"처럼 보이는데 실제로는 시간순이 아니다(그게 눈속임이 된다). */
#dk-decide { border-bottom: 1px solid #1a2130; padding: 14px 24px; max-height: 42%; overflow-y: auto; }
#dk-decide.empty { display: none; }
#dk-decide .cap { font: 700 10px/1 ui-monospace, Consolas, monospace; color: #6b7589;
    letter-spacing: .1em; margin-bottom: 10px; }

/* 말풍선 — 내가 시킨 건 오른쪽, 클론이 내놓은 건 왼쪽.
   누가 말했는지를 **읽지 않고 보고** 알아야 긴 스트림이 빨리 읽힌다. */
.dk-msg { display: flex; margin-bottom: 15px; }
.dk-msg.me { justify-content: flex-end; }
.dk-msg > div { max-width: 78%; min-width: 0; }
.dk-bub { border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.62; }
.dk-msg.me .dk-bub { background: #14323f; border: 1px solid #1f5569; color: #dcebf2; border-bottom-right-radius: 4px; }
.dk-msg.it .dk-bub { background: #0e131f; border: 1px solid #1f2736; color: #c2cadb; border-bottom-left-radius: 4px; }
.dk-who { font: 700 10px/1.4 ui-monospace, Consolas, monospace; color: #6b7589; margin-bottom: 5px; letter-spacing: .04em; }
.dk-msg.me .dk-who { text-align: right; }
.dk-bub .t, .dk-bub .md { white-space: pre-wrap; word-break: break-word; }
.dk-bub .md b { color: #fff; }

.dk-st { display: inline-block; font: 700 10px/1.5 ui-monospace, Consolas, monospace; padding: 1px 8px; border-radius: 9px; }
.dk-st.run { background: #1d3b2a; color: #9fe3bd; }
.dk-st.done { background: #1b2f4a; color: #9ec8f0; }
.dk-st.fail { background: #4a2420; color: #e8a79f; }
.dk-st.wait { background: #2d2a1a; color: #e3c07b; }

.dk-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.dk-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px;
    border-radius: 7px; cursor: pointer; background: #121a2a; border: 1px solid #243043; color: #c2cadb; font-size: 11.5px; }
.dk-file:hover { border-color: #3a4a66; color: #fff; }
.dk-file .kb { color: #6b7589; font: 10px/1 ui-monospace, Consolas, monospace; }

/* ⭐ 주인이 누르는 자리. **그 증거가 붙은 메시지 안에만** 둔다 —
   전역 승인 툴바나 "전체 검수 요청" 같은 일괄 버튼은 두지 않는다(자동화의 재도입이다). */
.dk-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #1b2433; }
.dk-btn { padding: 5px 11px; border-radius: 6px; cursor: pointer; font-size: 11.5px;
    background: #0e1119; border: 1px solid #2a3142; color: #9aa5b8; font-family: inherit; }
.dk-btn:hover { border-color: #3d4860; color: #e6ecf5; }
.dk-btn.go { background: #1d3b2a; border-color: #2f7a52; color: #9fe3bd; }
.dk-btn:disabled { opacity: .5; cursor: default; }
/* 누른 뒤에는 버튼이 **되돌릴 수 없는 기록 한 줄**로 바뀐다 — 그 자리에 버튼이 돌아오지 않아야
   "승인 한 번으로 끝난다"가 지켜진다. */
.dk-done { font-size: 11px; color: #6b7589; }

.dk-day { display: flex; align-items: center; gap: 10px; margin: 4px 0 15px; }
.dk-day::before, .dk-day::after { content: ''; flex: 1; height: 1px; background: #1a2130; }
.dk-day span { font: 700 10px/1 ui-monospace, Consolas, monospace; color: #5c6478; letter-spacing: .06em; }

/* ── 입력칸 — 항상 보인다 ────────────────────────────────────────
   폰에서는 작성칸이 인풋 탭 안에 있어서, 결과를 보다가 일을 더 시키려면 탭을 옮겨야 했다.
   **결과를 읽은 채로 다음 의뢰를 쓴다** — 데스크탑에서 가장 큰 개선이다. */
#dk-composer { border-top: 1px solid #1a2130; padding: 12px 24px 15px; background: #080b12; }
#dk-shots { display: none; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
#dk-inwrap { display: flex; align-items: flex-end; gap: 9px; background: #0e1119;
    border: 1px solid #242b3c; border-radius: 10px; padding: 9px 10px 9px 13px; }
#dk-inwrap:focus-within { border-color: #2f5f7a; }
#dk-text { flex: 1; min-height: 22px; max-height: 190px; resize: none; overflow-y: auto;
    background: transparent; border: none; outline: none; color: #e6ecf5;
    font-family: inherit; font-size: 13.5px; line-height: 1.6; }
#dk-text::placeholder { color: #5c6478; }
#dk-send { padding: 7px 15px; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 700;
    background: #1d3b2a; border: 1px solid #2f7a52; color: #9fe3bd; flex: none; font-family: inherit; }
#dk-send:disabled { opacity: .55; cursor: default; }
#dk-clip { background: none; border: none; color: #6b7589; cursor: pointer; font-size: 15px; padding: 4px; flex: none; }
#dk-clip:hover { color: #c2cadb; }
#dk-hint { margin-top: 7px; display: flex; gap: 10px; font-size: 10.5px; color: #5c6478; }
#dk-hint b { color: #7d879b; font-weight: 700; }
/* 진행 중 건수 — ⚠️ 상한을 걸지 않는다(통제가 아니라 자율). 스스로 조절할 근거만 보여 준다.
   의뢰 1건이 실측 $1.83 이라 입력 마찰이 사라지면 비용이 오른다. */
#dk-busy { margin-left: auto; color: #9fe3bd; }

/* 예시 의뢰 칩 — ⚠️ 누르면 **작성칸이 채워지고 거기서 멈춘다.** 바로 보내지 않는다
   (시스템이 혼자 움직인 것이 된다). */
.dk-seed { display: inline-block; margin: 4px 5px 0 0; padding: 6px 11px; border-radius: 15px; cursor: pointer;
    background: #10151f; border: 1px solid #242b3c; color: #9aa5b8; font-size: 11.5px; font-family: inherit; }
.dk-seed:hover { border-color: #3d4860; color: #e6ecf5; }

/* ── 오른쪽: 마을 ────────────────────────────────────────────────
   ⚠️ 11:7 은 게임 해상도 비율이다. CSS 로 늘리면 타일이 찌그러진다 —
      비율을 잠그고 폭만 반응형으로 두고, 실제 크기는 phoneResize(w,h) 로 알린다. */
#bb-map { position: relative; width: 100%; aspect-ratio: 11 / 7; background: #05070d;
    border-bottom: 1px solid #1a2130; overflow: hidden; }
#bb-map #game-area { position: absolute; inset: 0; }
#dk-right .cap { padding: 12px 16px 6px; font: 700 10px/1 ui-monospace, Consolas, monospace;
    color: #6b7589; letter-spacing: .1em; }
#dk-right .nowbox { padding: 0 16px 14px; font-size: 12px; line-height: 1.65; color: #8b95a8; border-bottom: 1px solid #1a2130; }
#dk-right .nowbox b { color: #c2cadb; font-weight: 700; }
#dk-right .grow { flex: 1; min-height: 0; }

/* 산출물 획득 토스트가 매달릴 자리(폰의 #bb-screen 역할) */
#bb-screen { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 90; pointer-events: none; }

/* ── 분기 ────────────────────────────────────────────────────────
   1024 아래는 데스크탑 셸을 켜지 않는다(index.html 부팅 분기) — 테스트되지 않는
   세 번째 레이아웃을 만들지 않는다. 폰 셸은 이미 돌아가고 실제로 쓰이고 있다. */
@media (max-width: 1439px) { #dk { grid-template-columns: 240px minmax(0, 1fr) 340px; } }
@media (max-width: 1179px) {
    #dk { grid-template-columns: 196px minmax(0, 1fr); }
    #dk-right { display: none; }              /* 중앙 560 을 양보하지 않고 오른쪽을 버린다 */
    .dk-scroll, .dk-head, #dk-decide { padding-left: 16px; padding-right: 16px; }
    #dk-composer { padding-left: 16px; padding-right: 16px; }
}

/* ── 아이젠하워 4분면 ─────────────────────────────────────────────
   폰은 1열로 쌓는다(좁아서). 여기서는 2×2 로 세운다 — 4분면은 **폭이 있어야 성립하는 그림**이다.
   ⚠️ 카드 생김새(.jr-card)는 그대로 둔다. 바뀌는 건 **담는 그릇**뿐이다. */
.dk-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dk-q { border: 1px solid #1a2434; border-top: 2px solid #5d6672; border-radius: 8px;
    background: #090d15; padding: 10px 10px 4px; min-width: 0; }
.dk-q-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.dk-q-h b { font-size: 11.5px; font-weight: 800; }
.dk-q-h span { font-size: 10.5px; color: #5c6478; }
.dk-q-b .jr-card { margin-bottom: 8px; }
.dk-q-none { font-size: 11px; color: #4e5666; padding: 6px 2px 10px; }

/* 1180px 아래는 오른쪽 칸을 버려 가운데가 넓어지지만, 그래도 2열은 유지한다
   — 1열로 돌아가면 애초에 4분면을 만든 이유가 없어진다. */
@media (max-width: 1000px) { .dk-quad { grid-template-columns: 1fr; } }