/* 웹 앱이 같이 쓰는 스타일.
 *
 * 빌드 도구가 없다. nginx 가 파일 그대로 내주는 것이고, 그 자리에 번들러를 들이면
 * "고치려면 먼저 빌드해야 하는" 화면이 된다 — 로그인 화면이 그러면 안 된다.
 *
 * 앞쪽 절반(양식·카드·줄)은 `server/web/style.css` 에서 넘어온 것이다. 뒤쪽 절반은
 * 작업 화면 것이다.
 */

:root {
    color-scheme: light dark;
    --bg: #f6f7f9;
    --card: #ffffff;
    --line: #e3e6ea;
    --text: #1a1d21;
    --dim: #6b7280;
    --accent: #2563eb;
    --accent-text: #ffffff;
    --bad: #b91c1c;
    --bad-bg: #fef2f2;
    --good: #047857;
    --good-bg: #ecfdf5;
    --warn: #92400e;
    --warn-bg: #fffbeb;
    --mine: #e8f0fe;
    /* 폭 손잡이에 손이 갔을 때 경계선에 번지는 빛. 밝은 판에서는 그늘, 어두운 판에서는
       빛이라야 보인다 — 검은 그림자를 어두운 바탕에 두면 아무것도 안 보인다. */
    --grip-glow: rgb(0 0 0 / 0.28);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181d;
        --card: #1f2229;
        --line: #31353d;
        --text: #e8eaed;
        --dim: #9aa1ab;
        --accent: #3b82f6;
        --bad: #f87171;
        --bad-bg: #2a1a1a;
        --good: #34d399;
        --good-bg: #14241e;
        --warn: #fbbf24;
        --warn-bg: #2a2318;
        --mine: #23303f;
        --grip-glow: rgb(255 255 255 / 0.30);
    }
}

* { box-sizing: border-box; }

/* `hidden` 은 브라우저가 `display: none` 으로 숨기는 것뿐이라, 그 자리에 `display: flex`
 * 같은 규칙이 하나라도 있으면 **져서 안 숨겨진다.** 재서 확인했다 — 프리뷰가 iframe 으로
 * 바뀐 뒤에도 "준비하는 중입니다"가 그 위에 남아 있었다. 숨긴 줄 알고 만든 코드가 조용히
 * 안 숨기는 종류라 이 한 줄로 못 박는다. */
[hidden] { display: none !important; }

body {
    margin: 0;
    padding: 2rem 1rem 4rem;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo",
        "Noto Sans KR", sans-serif;
    /* 한글이 줄 끝에서 아무 데나 안 끊기게. 짧은 안내문이 대부분이라 값이 크다. */
    word-break: keep-all;
}

main { max-width: 30rem; margin: 0 auto; }
main.wide { max-width: 44rem; }

h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }

.sub { color: var(--dim); margin: 0 0 1.6rem; font-size: 0.95rem; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.4rem;
    margin-bottom: 1rem;
}

label { display: block; font-size: 0.9rem; color: var(--dim); margin-bottom: 0.3rem; }

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}

input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

button {
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

button.full { width: 100%; }

button.quiet {
    background: transparent;
    border-color: var(--line);
    color: var(--text);
    font-weight: 400;
}

button[disabled] { opacity: 0.55; cursor: default; }

a { color: var(--accent); }

.msg { padding: 0.7rem 0.8rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.95rem; }
.msg.bad { background: var(--bad-bg); color: var(--bad); }
.msg.good { background: var(--good-bg); color: var(--good); }
.msg:empty { display: none; }

.hint { color: var(--dim); font-size: 0.85rem; margin: 0.3rem 0 1rem; }

/* 입력칸 밑에 붙는 힌트만 위로 당긴다.
 *
 * 이 음수 여백이 원래 `.hint` 에 통째로 걸려 있었는데, 그건 **입력칸이 아래 여백 1rem 을
 * 가진다는 전제**였다. 그 전제가 없는 것(고르는 칸, 여러 줄 칸, 이름표) 밑에서는 힌트가
 * 위로 올라가 **글자가 겹쳤다.** 넷이 그러고 있었다. */
input[type="text"] + .hint,
input[type="email"] + .hint,
input[type="password"] + .hint { margin-top: -0.6rem; }

.rows { border-top: 1px solid var(--line); }

/* 좁아지면 **접힌다.** 안 접히면 왼쪽 칸이 글자 몇 개 폭까지 짜부라지고, 그 안의 설명이
   한 글자씩 세로로 쌓여 줄 높이가 335px 이 된다 — 260px 짜리 서랍에서 재서 봤다. */
.row {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
}

/* `flex: 1 1 0` 이 중요하다. `auto` 로 두면 이 칸이 **내용 길이만큼 자리를 주장하고**,
   줄이 모자랄 때 단추 칸과 나눠서 줄어든다 — 그러면 단추가 제 폭을 못 받아 아래로 접힌다.
   긴 메일 주소로 재서 봤다: 이름을 6자까지 줄여도 계속 접혔다. 남는 자리를 이 칸이 받고,
   모자라면 이 칸만 줄어들어 말줄임이 되는 것이 맞다. */
/* 바탕은 `12rem` 이다. `0` 으로 두면 자리가 모자랄 때 이 칸이 끝없이 줄어들어 단추가
   설 자리를 만들어 주는데, 그 결과가 위의 335px 이다. 12rem 을 못 받으면 차라리 단추를
   아랫줄로 내려보낸다. 넓을 때는 어차피 남는 자리를 이 칸이 다 받는다. */
.row .who { flex: 1 1 12rem; min-width: 0; }

/* 한 줄에 단추가 둘일 때(회수 ↔ 취소, 내보내기 ↔ 취소). 줄이 좁아지면 단추끼리 겹치는
   대신 아래로 접힌다.

   `min-width: 0` 이 없으면 이 칸은 **안 줄어든다.** 확인 단추의 글자가 길면(남의 이름이
   들어간다) 칸이 줄 너비를 넘어서 이름 위를 덮고 창에 가로 스크롤이 생긴다 — 재서 봤다.
   글자 자체는 `lib/members.js` 에서 잘라 두지만, 자르는 것을 잊은 다음 문구가 여기서도
   화면을 안 깨도록 한 겹 더 둔다. */
.row-actions {
    display: flex;
    gap: 0.4rem;
    /* 단추는 제 폭을 그대로 받는다. 줄이 모자라면 왼쪽 이름 칸이 줄어든다. */
    flex: 0 0 auto;
    /* 그래도 줄보다 넓어지는 일이 생기면(글자를 자르는 것을 잊었을 때) 여기서 멈춘다. */
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.row-actions button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 되돌릴 수 없는 일을 확인하는 동안, **남은 시간을 단추 자체가 보여준다.** 옆에 막대를
   두면 좁은 자리에서 그 막대가 또 자리를 먹는다 — 배경이 줄어드는 것은 공간을 안 쓴다.
   글자는 배경 위에 있으므로 가려지지 않는다. */
@keyframes drain { from { background-size: 100% 100%; } to { background-size: 0% 100%; } }
.row-actions button.arming {
    background-image: linear-gradient(var(--warn-bg), var(--warn-bg));
    background-repeat: no-repeat;
    border-color: var(--warn);
    animation: drain 8s linear forwards;
}
/* 움직임을 꺼 둔 사람에게는 안 움직인다. 시간은 8초 뒤에 똑같이 풀리므로, 이 표시는
   있으면 좋은 것이지 없으면 안 되는 것이 아니다. */
@media (prefers-reduced-motion: reduce) {
    .row-actions button.arming { animation: none; background-size: 100% 100%; }
}

/* 쓰는 곳 개수. 누르면 어디인지 보여주므로 링크처럼 보여야 한다 — 그냥 글자로 두면
   누를 수 있다는 것을 아무도 모른다. */
.row .meta .uses {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* 이름도 마찬가지다. 이름이 없는 사람은 메일이 이 자리에 오고, 그것이 길면 줄을 민다. */
.row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name { font-weight: 600; }

.row .meta {
    color: var(--dim);
    font-size: 0.85rem;
    /* 앞자리·날짜가 좁은 화면에서 줄을 밀지 않도록. */
    overflow-wrap: anywhere;
}

.secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.7rem;
    margin: 0.6rem 0;
    /* 토큰은 길다. 잘리면 손으로 옮겨 적는 사람이 틀린다. */
    overflow-wrap: anywhere;
    user-select: all;
}

.between {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.foot { color: var(--dim); font-size: 0.85rem; text-align: center; margin-top: 1.4rem; }

/* ===================================================================================
 * 작업 화면 — 좌 채팅 / 우 결과
 * =================================================================================== */

/* 화면 전체를 쓴다. 문서가 아니라 도구라서, 스크롤은 안쪽 두 칸이 각자 한다. */
body.app {
    padding: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    flex: none;
}

.bar .spacer { flex: 1; }
/* **`width` 가 있어야 넓어진다.** `max-width` 만 두면 고르는 칸은 지금 골라 둔 이름
   길이만큼만 차지한다 — 이름이 짧은 프로젝트에서는 상한이 아무 일도 안 한다. 재서 봤다:
   상한이 256px 인데 실제로는 129px 이었다. 좁은 화면에서는 아래쪽 규칙이 9rem 으로 다시
   줄인다. */
.bar select {
    width: 16rem;
    max-width: 16rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
}
.bar button { padding: 0.4rem 0.7rem; font-size: 0.9rem; }

/* 이름 고치는 칸. 고르는 칸 자리에 그대로 들어선다. */
.bar input[type="text"] {
    width: 16rem;
    margin: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.95rem;
}
.bar .who { color: var(--dim); font-size: 0.85rem; }

/* 아이콘만 있는 자리(설정·로그아웃). 테두리를 지운다 — 왼쪽 단추들과 같은 무리로 보이면
   안 된다. `.quiet` 의 테두리와 `.bar button` 의 padding 을 둘 다 덮어야 해서 여기 있다. */
.bar .icon {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--dim);
}
.bar .icon:hover { color: var(--text); background: var(--bg); }

/* `currentColor` 라야 위의 hover 한 줄이 선까지 같이 움직인다. 색을 따로 적으면 글자만
   진해지고 그림은 그대로다. */
.bar .icon svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.split {
    flex: 1;
    display: flex;
    min-height: 0;
    /* 서랍이 여기를 기준으로 눕는다. 이 줄이 없으면 기준이 창 전체가 되어 **위쪽 단추줄까지
       덮는다** — 서랍을 연 순간 프로젝트도 못 바꾸고 되돌리기도 못 누른다. 재서 봤다. */
    position: relative;
}

.chat, .result, .workspace {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* **`--chat-w` 는 한 곳에서 정한다.** 서랍 폭 계산도 이 값을 빼서 쓰므로(아래 `.drawer`),
   여기에 26rem 을 박아 두고 저기에도 박아 두면 채팅이 넓어진 만큼 서랍이 채팅을 덮는다. */
.chat {
    width: var(--chat-w, 26rem);
    flex: none;
    border-right: 1px solid var(--line);
    background: var(--card);
    /* 손잡이가 오른쪽 모서리에 걸치는 기준. */
    position: relative;
}

/* 채팅 칸 폭 손잡이. 서랍 것과 생김새·조작이 같다 — 같은 일을 하는데 다르게 생기면
   하나를 배우고 다른 하나를 또 배운다. */
.chat-grip {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -4px;
    width: 10px;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
}
/* 경계선 자리에 놓이는 얇은 띠. 평소엔 안 보이고, 손이 가면 그 자리에 빛이 번진다.
   색을 켜는 대신 번지게 하는 이유는, 색이 켜지면 "뭔가 켜졌다"로 읽히기 때문이다 —
   여기서 말하려는 것은 "잡을 수 있다"이지 상태가 아니다. */
.chat-grip::after,
.drawer-grip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    transition: box-shadow 120ms ease, background 120ms ease;
}
/* 번짐만으로는 서랍에서 안 보인다. 서랍은 **상시 그림자**(`-8px 0 16px`)를 왼쪽에 달고
   있어서, 거기에 그늘을 더 얹으면 원래 있던 그늘에 묻힌다 — 재서 봤다: 손을 올린 것과
   안 올린 것이 구별이 안 됐다. 그래서 띠 자체를 또렷한 회색으로 세우고, 번짐은 그 둘레에
   두른다. 채팅 쪽에서는 이 둘이 같이 보이고 서랍 쪽에서는 띠가 일을 한다. */
.chat-grip:hover::after,
body.chat-sizing .chat-grip::after,
.drawer-grip:hover::after,
body.drawer-sizing .drawer-grip::after {
    background: var(--dim);
    box-shadow: 0 0 7px 2px var(--grip-glow);
}
/* 끄는 중에는 조금 더 진하게. 지금 이 선을 움직이고 있다는 것이 보여야 한다. */
body.chat-sizing .chat-grip::after,
body.drawer-sizing .drawer-grip::after { box-shadow: 0 0 10px 3px var(--grip-glow); }

/* **키보드 초점만은 또렷하게 남긴다.** 번지는 그늘은 마우스가 이미 그 자리에 있을 때
   쓰는 신호다. 탭으로 옮겨 온 사람은 지금 초점이 어디인지 한눈에 보여야 한다. */
.chat-grip:focus-visible,
.drawer-grip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
body.chat-sizing { cursor: col-resize; user-select: none; }
/* 끄는 동안 프리뷰가 마우스를 먹으면 끌기가 끊긴다. 서랍에서 겪은 것과 같다. */
body.chat-sizing iframe { pointer-events: none; }

/* 떠 있는 단추들의 기준. 이 줄이 없으면 창 전체를 기준으로 삼아 좁은 화면에서
   채팅 위로 올라간다. */
.result { flex: 1; background: var(--bg); position: relative; }

/* 만든 화면 대신 이 자리를 쓰는 것들(지금은 API 등록). 결과 화면과 자리를 나눠 쓰는 게
   아니라 **번갈아** 쓴다 — 둘 다 넓어야 하고, 왼쪽 채팅은 어느 쪽이든 살아 있다. */
.workspace { flex: 1; background: var(--bg); }
body.app.api-open .result { display: none; }

.workspace-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem 2rem;
}

/* 만든 화면 위에 뜨는 단추들. 만든 사이트의 오른쪽 위에는 대개 메뉴가 있으므로 반투명
   바탕과 그림자로 "이건 그 사이트 것이 아니다"를 표시한다. 다 가리지 않도록 작게. */
.preview-tools {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.preview-tools button {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    /* 만든 화면이 흰색일 수도 검은색일 수도 있다. 반투명 카드색이라야 어느 쪽에서도
       단추의 경계가 보인다. */
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.14);
    color: var(--dim);
}
.preview-tools button:hover { color: var(--text); }
.preview-tools button svg {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 실패 표시. 단추들과 **같은 줄**에 있다 — 위아래로 쌓으면 만든 화면의 메뉴를 두 줄이나
   가리고, 따로 띄우면 단추가 숨을 때 혼자 어긋난 자리에 남는다. */
.preview-warn {
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--bad-bg);
    color: var(--bad);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.14);
}

.workspace .head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--dim);
    flex: none;
}

/* 머리글의 제목. 굵게만 하면 흐린 회색이라 오히려 뭉개져 보여서 색도 같이 올린다 —
   이 줄에서 이름은 정보이고, 옆의 [닫기] 는 도구다. */
.workspace .head .title { font-weight: 600; color: var(--text); }

.result iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #ffffff;
}

/* 아직 빌드 전이거나 프로젝트가 없을 때. iframe 자리를 대신한다. */
.result .empty {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
    color: var(--dim);
}

.transcript-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

.transcript {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* 대화 위에 떠 있는다. 자리를 차지하면 나타날 때마다 아래 내용이 밀린다. */
.new-below {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.5rem;
    z-index: 2;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

.bubble {
    max-width: 90%;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.bubble.mine { align-self: flex-end; background: var(--mine); }
.bubble.theirs { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); }

.bubble p:first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }

.bubble pre {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem;
    /* 긴 줄이 채팅 칸을 통째로 늘리지 않게, 안에서 따로 민다. */
    overflow-x: auto;
    font-size: 0.85rem;
}

.bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

.note {
    align-self: stretch;
    color: var(--dim);
    font-size: 0.85rem;
    padding: 0.2rem 0.2rem;
}

.note.err { color: var(--bad); }
.note.warn { color: var(--warn); }
.note.ok { color: var(--good); }

/* 도는 중이라는 표시. 점 셋이 오르내린다. */
.note.busy::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    text-align: left;
    animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
}

@media (prefers-reduced-motion: reduce) {
    .note.busy::after { animation: none; content: "…"; }
}

.log {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 0.8rem;
    overflow-x: auto;
    max-height: 12rem;
    overflow-y: auto;
}

/* 칸이 한 줄을 통째로 쓰고 단추는 그 아래로 내려간다. 한 줄에 셋을 두면 26rem 짜리
   채팅 칸에서 글 쓰는 자리가 단추 둘에 눌려 손바닥만 해진다. */
.composer {
    flex: none;
    border-top: 1px solid var(--line);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 📎 는 제 크기, [보내기]가 남는 자리를 다 받는다. 이 줄에서 누르는 것은 거의 늘
   [보내기]라, 큰 쪽이 큰 과녁이어야 한다. */
.composer-actions { display: flex; gap: 0.5rem; align-items: center; }
.composer-actions button { flex: 1; }
.composer-actions #attach { flex: none; }

.composer textarea {
    flex: none;
    width: 100%;
    resize: none;
    max-height: 9rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
}

/* 붙어 있는 파일들. 켜진 것만 이번 턴에 같이 간다. */
.chips {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem 0;
    max-height: 7rem;
    overflow-y: auto;
}

.chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font-size: 0.8rem;
    color: var(--dim);
    cursor: pointer;
    max-width: 100%;
}

/* 이번 턴에 같이 갈 것. 테두리만으로는 켜졌는지 한눈에 안 보인다. */
.chip[aria-pressed="true"] {
    background: var(--mine);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 600;
}

.chip .label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

/* 확장이 얹어 둔 참조 화면.
 *
 * **파일 칩과 달라 보여야 한다.** 파일은 프로젝트에 남지만 이건 한 시간이면 없어진다 —
 * 같은 모양으로 두면 지워진 것을 사용자가 자기 잘못으로 읽는다. 점선이 "잠깐 얹혀 있는
 * 것"을 말하는 가장 조용한 방법이다. */
.chip.screen {
    border-style: dashed;
    padding-left: 0.3rem;
}

.chip.screen[aria-pressed="true"] {
    /* 켜지면 실선으로 바뀐다. 이번 턴에 실제로 실린다는 뜻이라, 그때만은 확실해야 한다. */
    border-style: solid;
}

.chip.screen .mark {
    flex: none;
    font-size: 0.85em;
    line-height: 1;
}

.chip img {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 4px;
    object-fit: cover;
    /* 흰 그림이 흰 배경에 얹히면 아무것도 없는 것처럼 보인다. */
    background: var(--card);
}

.chip .drop {
    border: 0;
    background: transparent;
    color: var(--dim);
    font: inherit;
    padding: 0 0.2rem;
    border-radius: 999px;
    cursor: pointer;
}

.chip .drop:hover { color: var(--bad); }

/* 결과 화면에서 고른 곳. 칩보다 눈에 띄어야 한다 — 이게 켜져 있으면 다음에 쓰는 말이
   화면 전체가 아니라 그 한 곳에 대한 것이 되기 때문이다. */
.target {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0.6rem 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--mine);
    font-size: 0.82rem;
}

.target .what {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 파일을 창 안으로 끌고 왔을 때. */
.chat.dropping { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* 확장에서만 되는 것. 숨기지 않는다 — 없는 기능은 팔 수 없다. 대신 **접힌다.** */
.locked {
    padding: 0.5rem 0.8rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--dim);
    flex: none;
}

.locked b { color: var(--text); font-weight: 600; }

/* 접는 손잡이. 브라우저 기본 삼각형은 글자와 줄이 안 맞고 판마다 달라서 직접 그린다. */
.locked summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    list-style: none;
}
.locked summary::-webkit-details-marker { display: none; }
.locked summary::before {
    content: "▸";
    color: var(--dim);
    font-size: 0.7rem;
    transition: transform 120ms ease;
}
.locked[open] summary::before { transform: rotate(90deg); }
.locked[open] summary { margin-bottom: 0.25rem; }

dialog {
    border: 0;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    color: var(--text);
    max-height: 85dvh;
}

dialog::backdrop { background: rgb(0 0 0 / 0.4); }

/* 되돌리기 목록은 줄이 길다. 양식 하나짜리 창보다 넓어야 읽힌다. */
dialog.wide-dialog { width: min(34rem, 92vw); }

/* 한 줄 물어보는 창. 넓으면 [취소]와 [로그아웃]이 화면 양 끝으로 벌어져서, 어느 쪽이
   기본인지 읽는 데 눈이 한 번 더 간다. */
dialog.ask-dialog { width: min(22rem, 92vw); }

/* --- 한 뼘 더 넓게 ---------------------------------------------------------------------
   34rem 에서 2할 늘린 41rem. 업종·보여주고 내려받기·같이 쓰는 사람·글꼴·새 프로젝트가
   쓴다. 나머지(색·되돌리기·파일 참조)는 그대로 34rem 이다.

   **높이는 여기서 안 정한다.** 아래의 창별 `min-height` 를 가진 것만 높이도 커진다 —
   새 프로젝트는 너비만 넓히기로 한 창이라 그 줄이 없다. */
dialog.roomy { width: min(41rem, 92vw); }

/* 높이는 카드가 정하는데, 창만 키우면 카드가 위에 뜨고 아래는 **투명한 빈칸**이 된다
   (`dialog` 자체는 배경이 없다). 카드를 늘려서 창을 채운다.
   `[open]` 없이 `display` 를 적으면 닫아도 안 사라진다 — 브라우저의
   `dialog:not([open]) { display: none }` 을 우리 규칙이 이기기 때문이다. 겪었다. */
dialog.roomy[open] { display: flex; flex-direction: column; }
dialog.roomy > .card { flex: 1 0 auto; }

/* 높이는 내용이 정하므로 **바닥값**으로 준다. 지금 차지하던 높이의 1.2배다(재서 넣었다).
   `min-height` 는 `max-height` 를 **이기므로** 화면 높이로 한 번 더 깎는다 — 안 그러면
   낮은 화면에서 창이 화면 밖으로 나가고, 아래쪽 단추에 손이 안 닿는다. */
/* 48.6rem 에서 2할 줄인 값. 목록이 길어도 그 안에서 구르므로, 창이 그만큼 높을 이유가 없다. */
dialog#kindDialog { min-height: min(38.9rem, 85dvh); }
dialog#typefaceDialog { min-height: min(31.6rem, 85dvh); }
dialog#shareDialog { min-height: min(27.6rem, 85dvh); }
dialog#membersDialog { min-height: min(25.3rem, 85dvh); }

/* --- 설정 창 -------------------------------------------------------------------------
   목록과 자리를 나눠 쓰는 유일한 창이다. 다른 창들처럼 `.card` 를 안에 넣지 않고 창
   자체가 상자다 — 머리글을 고정하고 오른쪽만 굴러야 하는데, 카드를 한 겹 더 두면
   그 안에서 또 굴러서 머리글이 같이 올라간다. */
/* **`[open]` 이 빠지면 창이 안 닫힌다.** 브라우저에는 `dialog:not([open]) { display: none }`
   이 들어 있는데, 우리가 쓴 규칙은 작성자 스타일이라 그것을 언제나 이긴다 — 그러면 닫아도
   `display: flex` 가 남아서, 결과 화면 위에 상자 하나가 그냥 붙어 있는다. 눌러도 아무
   일이 없는 것은 `close()` 가 제 일을 다 했기 때문이다(연 적이 없으니 닫을 것도 없다).
   `display` 를 건드리는 순간 생기는 함정이고, 실제로 그렇게 만들어 겪었다. */
dialog.settings-dialog[open] {
    /* 46rem × 32rem 에서 4할 키운 값이다. 뒤의 `94vw`·`85dvh` 는 그대로 둔다 — 그건
       크기가 아니라 **창 밖으로 나가지 말라는 한계**라, 같이 키우면 좁은 화면에서
       머리글이나 [새 토큰 발급] 이 화면 밖으로 밀린다. */
    width: min(64rem, 94vw);
    height: min(45rem, 85dvh);
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    overflow: hidden;
}

/* 모든 창의 머리글. 제목 · (있으면 곁들이는 것) · [닫기] 가 한 줄이고 아래에 선이 있다. */
.dialog-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
    padding: 0.7rem 0.8rem 0.7rem 1.1rem;
    border-bottom: 1px solid var(--line);
}
.dialog-head h1 { font-size: 1.05rem; margin: 0; }
.dialog-head .spacer { flex: 1; }

/* `.card` 안에 들어가는 경우(설정 말고 나머지 창). 카드의 안쪽 여백을 음수 여백으로
   되물려서 머리글만 끝까지 닿게 한다 — 카드 **밖**에 두면 창 자체는 투명이라 머리글이
   허공에 뜬다. 위 모서리는 카드와 같은 곡률로 깎는다. */
.card > .dialog-head {
    margin: -1.4rem -1.4rem 1rem;
    border-radius: 12px 12px 0 0;
}

.dialog-head .who {
    color: var(--dim);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 닫기. 위쪽 줄의 아이콘들보다 **진하다** — 저기는 늘 떠 있는 줄이라 흐려도 되지만,
   여기는 창을 덮어 놓고 나가는 길이 이것 하나뿐이라 먼저 눈에 띄어야 한다. */
.dialog-head .icon {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    flex: none;
}
.dialog-head .icon:hover { background: var(--bg); }
.dialog-head .icon svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.settings-body { flex: 1; display: flex; min-height: 0; }

.settings-menu {
    flex: none;
    width: 12rem;
    padding: 0.6rem;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    background: var(--bg);
}

.settings-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}
.settings-menu button:hover { background: var(--card); }
/* 고른 것. 색만으로 표시하면 색을 못 가리는 사람에게는 아무 표시가 없는 것과 같다 —
   글자 굵기와 왼쪽 선을 같이 쓴다. */
.settings-menu button[aria-current="true"] {
    background: var(--card);
    border-color: var(--line);
    border-left: 3px solid var(--accent);
    font-weight: 600;
}

.settings-work { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.4rem; min-width: 0; }

/* 좁은 화면. 목록이 왼쪽에 있으면 오른쪽 자리가 글자 몇 개 폭이 된다 — 위아래로 눕힌다. */
@media (max-width: 34rem) {
    .settings-body { flex-direction: column; }
    .settings-menu {
        width: auto;
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .settings-menu button { width: auto; white-space: nowrap; }
    .settings-menu button[aria-current="true"] { border-left-width: 1px; }
}

/* 설명이 길면 [닫기]가 아랫줄로 밀려나 제목 밑에 혼자 선다. 그 자리에 있으면 목록의
   첫 줄처럼 보인다 — 재서 확인했다. */
dialog .between > div:first-child { flex: 1 1 12rem; min-width: 0; }

/* 색 고르는 자리. 이름과 색딱지를 같이 둔다 — `muted_foreground` 만 있으면 그게 어디
   쓰이는 색인지 알 수 없고, 색만 있으면 무엇을 바꾸는지 알 수 없다. */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.swatch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
}

/* 색 고르개의 기본 모양은 브라우저마다 다르고 대개 크다. 딱지 크기로 맞춘다. */
.swatch input[type="color"] {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: none;
    flex: none;
    cursor: pointer;
}

.swatch .token {
    font-size: 0.78rem;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 눌러서 고르는 갈래(붙여넣기 / 문서가 없어요). 고른 쪽이 눈에 보여야 한다 — 안 그러면
   어느 칸을 채워야 하는지 모른 채로 빈 칸을 본다. */
button[aria-pressed="true"] {
    background: var(--mine);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 600;
}

dialog select,
.card select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
}

/* 글꼴은 이름이 아니라 **모양**으로 고른다. 목록의 각 줄이 자기 글꼴로 그려진다. */
dialog select option,
.card select option { font-size: 1.05rem; }

/* 참조용 서랍. **결과 화면 위로만 덮는다** — 참조하려고 여는 것이니 그 순간 왼쪽
   채팅과 입력칸이 살아 있어야 한다. 여기를 잘못 잡으면 기능의 목적이 사라진다. */
.drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* **만든 화면을 다 덮으면 안 된다.** 참조용 서랍의 목적이 "만든 화면을 보면서 API 를
       부르는 것"이라, 그 화면이 사라지면 목적이 사라진다. 오른쪽 끝에만 좁게 눕는다.
       뒤쪽 계산은 채팅 칸(26rem)을 침범하지 않기 위한 것이다 — 창이 좁아도 왼쪽은
       건드리지 않는다. */
    /* 사용자가 끌어 놓은 폭(`--drawer-set`)을 먼저 쓰고, 없으면 360px 로 시작한다.
       `min()` 의 뒷항은 **채팅 칸(26rem)을 침범하지 말라**는 한계다 — 끌어도 여기서
       멈춘다. 창을 줄였을 때도 같은 한계가 걸려서 왼쪽은 안 먹힌다. */
    width: min(var(--drawer-set, 360px), calc((100% - var(--chat-w, 26rem)) * 0.75));
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--card);
    border-left: 1px solid var(--line);
    /* 덮고 있다는 것이 보여야 한다. 붙어 있는 칸처럼 보이면 만든 화면이 잘린 줄 안다. */
    box-shadow: -8px 0 16px rgb(0 0 0 / 0.12);
}

.drawer .head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--dim);
    flex: none;
}

.drawer .head a,
.drawer .head button {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: none;
}

/* `flex` 로 두는 것은 **비었을 때 가운데 세우기 위해서**다. 안 그러면 안쪽 상자가
   글자 높이만큼만 차지해서, 그 안에서 가운데를 잡아도 위쪽 구석에 붙는다. */
/* 입력칸 위의 "… N개 더". 칩과 같은 줄에 서지만 파일이 아니라 **길**이라, 테두리를 점선으로
   두어 구별한다. */
.chips .more {
    flex: none;
    padding: 0.25rem 0.6rem;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    font-size: 0.8rem;
    font-weight: 400;
}
.chips .more:hover { color: var(--text); border-color: var(--dim); }

/* 갈래 거르개. 고른 것만 테두리가 진해진다. */
.file-kinds { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.file-kinds button {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--dim);
    font-size: 0.8rem;
    font-weight: 400;
}
.file-kinds button[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--text);
    background: var(--mine);
    font-weight: 600;
}
.file-kinds:empty { display: none; }

.drawer-body { flex: 1; overflow-y: auto; padding: 0.6rem; display: flex; flex-direction: column; }
.drawer-body > #apiDrawerBody,
.drawer-body > #filesRows { flex: 1; min-height: 0; }

/* --- 조절기 한 줄 -----------------------------------------------------------------------
   자간·줄 간격처럼 **숫자로는 못 고르는 것**에 쓴다. 값 표시는 폭을 고정한다 — 안 그러면
   `1.7` 과 `-0.005em` 사이에서 글자 수가 달라져 [기본값] 단추가 좌우로 흔들린다. */
.slider-row { margin-top: 0.8rem; }
.slider-line { display: flex; align-items: center; gap: 0.6rem; }
.slider-line input[type="range"] { flex: 1; min-width: 6rem; margin: 0; accent-color: var(--accent); }
.slider-line output {
    flex: none;
    width: 5.2rem;
    text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--dim);
}
/* 아직 안 정한 값. 조절기가 어떤 자리를 가리키고 있어도 그 값이 쓰이지는 않는다는 뜻이라,
   흐리게 두어 정해진 값과 구별한다. */
.slider-line output[data-unset="yes"] { opacity: 0.55; font-style: italic; }
.slider-line button { flex: none; padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* 보기. 고른 글꼴·자간·줄 간격이 실제로 어떻게 보이는지. */
.type-sample {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    /* 글꼴을 바꾸면 높이가 출렁인다. 바닥을 잡아 두면 창 전체가 덜 흔들린다. */
    min-height: 7.5rem;
}
.type-sample .sample-heading { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem; }
.type-sample .sample-body { margin: 0; font-size: 0.95rem; }

/* 아무것도 없을 때. 위쪽 구석에 붙여 두면 아래의 빈 자리가 "아직 불러오는 중"처럼
   보인다 — 다 불러왔는데 없는 것이다. */
.drawer-empty {
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.4rem;
    padding: 1rem;
    text-align: center;
}
.drawer-empty .name { margin: 0; font-weight: 600; }

/* 폭을 끄는 손잡이. 왼쪽 모서리에 걸치게 두는 이유는, 서랍 **안쪽**에만 두면 잡을 수 있는
   자리가 3px 라 못 잡는 사람이 생기기 때문이다. 밖으로 4px 나온다. */
.drawer-grip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 10px;
    cursor: col-resize;
    z-index: 1;
    /* 잡을 수 있다는 표시는 위쪽 `.drawer-grip::after` 가 한다 — 채팅 칸 손잡이와 같은
       것을 쓴다. 여기서 색을 또 칠하면 그 규칙보다 뒤에 있어서 그것을 덮는다. */
    background: transparent;
}
/* 끄는 동안에는 아래의 iframe 이 마우스를 먹지 않게 한다. 안 막으면 만든 화면이나
   도움말 위로 들어가는 순간 끌기가 끊긴다 — 재서 겪었다. */
body.drawer-sizing iframe { pointer-events: none; }
body.drawer-sizing { cursor: col-resize; user-select: none; }

/* 도움말은 서랍 전체를 쓴다. `/help/<이름>` 페이지를 그대로 띄우므로 안쪽 여백은
   그 페이지가 알아서 가진다. */
.drawer iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--bg);
}

/* 제목 옆의 `?`. 동그랗게 두는 이유는 이것이 값을 바꾸는 단추가 아니라 **읽을 것이
   있다는 표시**라서다 — 네모난 단추들과 같은 무리로 보이면 안 된다. */
.help-dot {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--dim);
}
.help-dot:hover { color: var(--text); background: var(--bg); }

/* 서랍이 덮은 만큼 결과 화면의 단추를 왼쪽으로 물린다. 안 그러면 서랍을 여는 순간
   [새로고침]·[새 탭]이 그 밑에 깔린다 — 위쪽 단추줄에서 겪은 것과 같은 종류다.
   폭은 자바스크립트가 재서 넣는다. 계산으로 쓰면 `100%` 의 기준이 달라 어긋난다. */
body.app.drawer-open .preview-tools { right: calc(var(--drawer-w, 0px) + 0.6rem); }

.drawer .conn { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
.drawer .conn:last-child { border-bottom: 0; }

/* 연결 이름. 이 글자가 대화에 실리고 에이전트가 코드 주석에 쓴다 — 서랍에서 본 이름과
   메시지에 쓸 이름이 같아야 한다. */
.drawer .conn .name {
    font-weight: 600;
    background: none;
    border: 0;
    color: var(--text);
    font-size: 0.95rem;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.drawer .conn .name:hover { color: var(--accent); }
.drawer .conn .where { color: var(--dim); font-size: 0.8rem; margin-bottom: 0.35rem; }
.drawer .conn .kind { color: var(--dim); font-size: 0.78rem; margin: 0.3rem 0 0.15rem; }

/* 눌러서 꽂는 필드. 눈으로 읽고 손으로 옮겨 적게 하면 오타 하나에 없는 필드를 쓰는
   코드가 나온다 — 그 추측을 없애려고 만든 기능이라 여기서 다시 만들면 안 된다.

   **한 줄에 하나씩 세운다.** 이름 옆에 무엇이 들어가는지(`{email}`, `문자열`)를 같이
   적으므로, 알약처럼 옆으로 늘어놓으면 두 글자가 한 덩어리로 뭉쳐 읽힌다. */
.drawer .field-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    margin: 0 0 0.2rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.drawer .field-row:hover { border-color: var(--accent); }

/* 이름이 남는 자리를 다 받고, 값은 오른쪽 끝에 붙는다. 값이 길어도(`{password}`) 이름을
   밀지 않는다 — 찾는 것은 이름이다. */
.drawer .field-row .path { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.drawer .field-row .kind { flex: none; color: var(--dim); margin: 0; }
.drawer .field-row:hover .path { color: var(--accent); }

/* 창 안이든 카드 안이든 같다. 창에만 걸어 뒀더니 전체 화면 등록에서 상자가
   기본 크기로 쪼그라들었다. */
/* 프로젝트 API 화면. 넓으면 두 칸(등록 | 목록), 좁으면 세로로 쌓는다 — 패널 화면은
   애초에 넓은 창 전용이라 그 경우를 안 다루지만, 웹은 휴대폰으로도 열린다. */
main.cx { max-width: 68rem; margin: 0 auto; }

.cx-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 60rem) {
    .cx-columns { grid-template-columns: 1fr; }
}

.why { color: var(--dim); font-size: 0.92rem; margin: 0 0 0.8rem; }

/* 무슨 일이 일어나고 있는지 한 줄. 자리를 늘 차지해야 나타날 때마다 아래가 안 밀린다. */
.status-line {
    min-height: 1.4em;
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--dim);
}

/* 조심해서 읽어야 하는 줄. */
.careful { color: var(--warn); }

dialog textarea,
.card textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    resize: vertical;
}

/* 시험 호출로 받아온 것. **저장되지 않는 것**이라 화면에서도 다르게 보여야 한다 —
   저장된 카드와 같은 모양으로 그리면 서버에 남아 있다고 믿게 된다. */
.probe-body {
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 0.6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    max-height: 10rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.fields code {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    font-size: 0.78rem;
}

/* 업종 고르기. 목록이 길어서 안에서 따로 민다 — 창 전체가 스크롤되면 고른 것의
   미리보기가 화면 밖으로 나간다. */
.picker-list {
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 0.4rem;
}

.picker-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    color: var(--text);
    font-weight: 400;
    padding: 0.45rem 0.6rem;
}

.picker-item:last-child { border-bottom: 0; }
.picker-item:hover { background: var(--bg); }

.picker-item[aria-pressed="true"] {
    background: var(--mine);
    box-shadow: inset 3px 0 0 var(--accent);
}

.picker-item .name { display: block; font-weight: 600; font-size: 0.92rem; }
.picker-item .token { display: block; font-size: 0.78rem; color: var(--dim); }

.picker-summary:not(:empty) {
    margin-top: 0.6rem;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
}

.picker-row { display: flex; gap: 0.6rem; font-size: 0.85rem; padding: 0.1rem 0; }
.picker-row .token { flex: none; width: 5rem; color: var(--dim); }

.picker-colors { display: flex; gap: 0.25rem; margin-top: 0.5rem; flex-wrap: wrap; }

.picker-colors .dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--line);
}

/* 되돌릴 자리 한 줄. */
.point { align-items: flex-start; }
.point .what { display: flex; gap: 0.5rem; min-width: 0; }
.point .text { min-width: 0; overflow-wrap: anywhere; }
.point .at { color: var(--dim); font-size: 0.82rem; }
.point .here { color: var(--good); font-size: 0.85rem; white-space: nowrap; }
.point button { white-space: nowrap; }

/* 좁은 화면에서는 좌우로 밀어 넣지 않는다. 둘 다 못 쓰게 된다. */
@media (max-width: 46rem) {
    /* 줄을 넘긴다. 안 넘기면 오른쪽 것들이 화면 밖으로 밀려 나가는데, 하필 거기 있는
       것이 **전환 단추**다 — 좁은 화면에서 제일 필요한 단추가 그때만 사라진다.
       380px 에 넣어 보고 알았다. */
    .bar { flex-wrap: wrap; }
    .bar select { max-width: 9rem; }
    /* 이름은 설정 화면에 있다. 여기서는 자리값을 못 한다. */
    .bar .who { display: none; }

    .split { position: relative; }
    .chat, .result {
        width: 100%;
        border-right: 0;
    }
    .chat { position: absolute; inset: 0; }
    /* 좁은 화면에서는 채팅이 화면을 통째로 쓴다. 끌 곳이 없다. */
    .chat-grip { display: none; }
    .result, .workspace { position: absolute; inset: 0; }

    /* 좁은 화면에서는 덮을 오른쪽이 없다. 위쪽 절반을 서랍이 쓰고 채팅이 아래로
       내려간다 — 그래도 **입력칸은 그대로 보인다**, 그게 조건이다. */
    .drawer {
        left: 0;
        width: auto;
        bottom: auto;
        height: 50dvh;
        border-left: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 8px 16px rgb(0 0 0 / 0.12);
    }
    body.app.drawer-open .chat { top: 50dvh; }
    body.app.drawer-open .result { display: none; }
    body.app[data-side="chat"] .result,
    body.app[data-side="chat"] .workspace { display: none; }
    body.app[data-side="result"] .chat { display: none; }
}

/* 넓은 화면에서는 전환 단추가 할 일이 없다. */
@media (min-width: 46.01rem) {
    .bar .toggle { display: none; }
}