* { margin: 0; padding: 0; box-sizing: border-box; }

.hidden { display: none !important; }

:root {
    --bg-grad-1: #7ec8ff;
    --bg-grad-2: #b5a7f8;
    --panel: #f1f4f9;
    --white: #ffffff;
    --card: #ffffff;
    --card-hover: #f7faff;
    --text: #24344d;
    --text-dim: #7a8aa0;
    --accent: #3f8cff;
    --accent-soft: #e3efff;
    --danger: #ff6b6b;
    --border: #dde5f0;
    --shadow: 0 1px 3px rgba(30, 60, 110, 0.12);
}

/* 모바일 주소창이 접혔다 펴질 때 화면 높이가 달라진다.
   그 순간 바탕이 비어 흰 띠처럼 끊겨 보이므로, html 에도 같은 배경을 깔고
   높이는 실제 보이는 영역(dvh)을 따라가게 한다. */
html {
    height: 100%;
    overflow-x: hidden;          /* 어떤 이유로든 가로로 밀리지 않게 */
    overscroll-behavior: none;
    background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2));
    background-attachment: fixed;
}
body {
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overscroll-behavior: none;
    touch-action: manipulation;  /* 두 번 톡톡 눌러 확대되는 것도 막는다 */
    background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2));
    background-attachment: fixed;
    color: var(--text);
    font-family: "Segoe UI", "Malgun Gothic", sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── 상단 바 ── */
.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    flex-shrink: 0;
}
.topbar .logo { font-weight: 700; font-size: 16px; margin-right: 10px; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.topbar .version { color: var(--text-dim); font-size: 12px; }
.topbar .logout { color: var(--text-dim); font-size: 13px; text-decoration: none; white-space: nowrap; }
.topbar .logout:hover { color: var(--text); }

/* 프로젝트 탭 */
.project-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    max-width: 55vw;
}
.project-tab {
    background: rgba(255,255,255,0.55);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
}
.project-tab:hover { color: var(--text); background: var(--white); }
.project-tab.active {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow);
}
.tab-add {
    background: rgba(255,255,255,0.55);
    border: 1px dashed var(--text-dim);
    border-radius: 8px;
    width: 30px; height: 30px;
    font-size: 15px;
    color: var(--text-dim);
    cursor: pointer;
    flex-shrink: 0;
}
.tab-add:hover { background: var(--white); color: var(--accent); border-color: var(--accent); }
.icon-btn {
    background: rgba(255,255,255,0.55);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 13px;
}
.icon-btn:hover { background: var(--white); box-shadow: var(--shadow); }
a.clip-link { text-decoration: none; line-height: 1; padding: 6px 8px; }

/* ── 보드 ── */
.board {
    flex: 1;
    overflow-anchor: none;
    display: flex;
    gap: 14px;
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
}

/* ── 첫 로딩 가림막 ──
   보드를 다 받아오기 전에는 화면이 비어 있어서, 폰에서는 앱이 멎은 것처럼 보였다.
   templates/index.html 에 처음부터 들어 있고 app.js 가 걷어낸다.
   0.2초까지는 투명하게 둔다 — 빨리 끝날 때 깜빡 스치는 게 더 거슬려서다. */
.boot-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;                    /* 모달(999)보다 위 — 로딩 중에는 아무것도 덮지 못하게 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(20, 32, 56, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    animation: boot-fade-in 0.25s ease 0.2s forwards;
}
@keyframes boot-fade-in { to { opacity: 1; } }

.boot-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

.boot-msg {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.boot-retry {
    background: var(--white);
    border: none;
    border-radius: 10px;
    padding: 9px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    box-shadow: var(--shadow);
}
/* 실패했을 때는 회전을 멈추고 '다시 시도' 를 내놓는다 */
.boot-loading.boot-failed .boot-spinner { display: none; }

/* ── 공용 '처리 중' 가림막 ──
   첫 로딩 가림막과 같은 모습을 그대로 쓴다 (두 개를 따로 그리면 같은 앱에서
   로딩 모습이 두 가지가 된다). 다른 점은 '언제 뜨느냐' 뿐이라 여기서는
   기다렸다 뜨게 하지 않는다 — app.js 가 이미 0.35초를 기다린 뒤에 부른다. */
.busy-overlay {
    animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .boot-spinner { animation-duration: 2.4s; }
}

.list {
    background: var(--panel);
    border-radius: 14px;
    position: relative;      /* 못 받는 리스트 안내를 띄우기 위해 */
    width: 290px;
    min-width: 290px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
}
.list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 8px;
    cursor: default;   /* 드래그는 ⠿ 핸들에서만 — 헤더 전체는 기본 커서 */
}
.list-header .drag-handle {
    color: var(--text-dim);
    font-size: 16px;
    cursor: grab;
    user-select: none;
    padding: 6px 10px;      /* 모바일 터치 영역 확대 */
    margin: -6px -4px;
    touch-action: none;      /* 핸들 위에서는 스크롤 대신 드래그 */
    border-radius: 6px;
}
.list-header .drag-handle:hover { background: var(--white); color: var(--text); }
.list-header .drag-handle:active { cursor: grabbing; }
.list-header h2 {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-header .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 23px;
    height: 21px;             /* 높이를 고정해야 리스트끼리 줄이 맞는다 */
    /* 숫자는 밑선 위에만 그려져서 줄 상자 가운데에 두면 0.5px 아래로 처진다.
       아래쪽에 1px 을 더해 획이 실제로 한가운데 오게 맞춘다 */
    padding: 0 7px 1px;
    /* 꽉 찬 노랑에 검은 숫자 — 다만 쨍한 원색은 눌러서 화면과 어울리게 */
    background: #e8c25c;
    color: #584608;
    border: 1px solid #d6ab4e;   /* 바탕과 가깝게 — 진하면 테두리만 도드라진다 */
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.list-header button {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
}
.list-header button:hover { background: var(--white); color: var(--text); }
.list-header input {
    flex: 1;
    border: 2px solid var(--accent);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    min-width: 0;
}

.cards {
    flex: 1;
    overflow-y: auto;
    /* 카드를 끌어 순서를 바꿀 때 브라우저가 스크롤을 따라 보정하지 않게 —
       보정이 들어가면 손을 놓는 순간 화면이 툭 움직여 헷갈린다 */
    overflow-anchor: none;
    padding: 4px 10px;
    min-height: 8px;
}

.card {
    background: var(--card);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: var(--shadow);
    word-break: break-word;
}
.card:hover { background: var(--card-hover); border-color: var(--accent); }
.card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.card.dragging { opacity: 0.4; }
/* 서버 저장 대기 중인 낙관적 카드 — 번쩍 연출이 죽지 않게 살짝만 흐리게 */
.card-temp { opacity: 0.94; }
.card-ghost {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    opacity: 0.92;
    transform: rotate(3deg) scale(1.03);
    box-shadow: 0 8px 24px rgba(30, 60, 110, 0.3);
}

/* 리스트 드래그 잔상 (통째로 들리는 느낌) */
.list.dragging { opacity: 0.35; outline: 2px dashed var(--accent); }
.list-ghost {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    opacity: 0.93;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 14px 36px rgba(30, 60, 110, 0.35);
    max-height: 75vh;
    overflow: hidden;
    background: var(--panel);
    border-radius: 14px;
}
.card .card-text { white-space: pre-wrap; }
.card .card-descr-mark {
    display: inline-block;
    margin-top: 6px;
    color: var(--text-dim);
    font-size: 12px;
    background: var(--panel);
    border-radius: 6px;
    padding: 1px 7px;
}

/* 카드/리스트 인라인 작성기 */
.composer { padding: 0 10px 10px; }
.composer textarea, .composer input {
    width: 100%;
    background: var(--white);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    resize: vertical;
    line-height: 1.45;
}
.composer-actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.composer-actions .primary { flex: 1; }
.composer-hint { color: var(--text-dim); font-size: 11px; margin-left: auto; }

button.primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
button.primary:hover { filter: brightness(1.1); }
button.ghost, .composer-actions button:not(.primary),
.modal-actions button:not(.primary):not(.danger) {
    background: var(--white);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}
button.ghost:hover { color: var(--text); }

.add-card {
    display: block;
    width: calc(100% - 20px);
    margin: 2px 10px 12px;
    background: var(--accent-soft);           /* 살짝 푸른 톤 */
    border: 1px dashed #a9ccff;
    color: var(--accent);
    text-align: center;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.add-card:hover {
    color: var(--accent);
    background: #d6e8ff;
    border-color: var(--accent);
    border-style: solid;
}

.add-list {
    background: rgba(255,255,255,0.4);
    border: 2px dashed rgba(255,255,255,0.9);
    border-radius: 14px;
    width: 290px;
    min-width: 290px;
    padding: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(30,60,110,0.25);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    height: fit-content;
}
.add-list:hover { background: rgba(255,255,255,0.6); color: var(--accent); text-shadow: none; }
.add-list-composer {
    background: var(--panel);
    border-radius: 14px;
    width: 290px;
    min-width: 290px;
    padding: 10px;
    box-shadow: var(--shadow);
    height: fit-content;
}

/* ── 완료 리스트 (노란 테마) ── */
.list-done {
    background: linear-gradient(180deg, #fff3c4, #fff9e3);
    border: 1px solid #ffe08a;
}
.list-done .list-header h2 { color: #9a6b00; }
.list-done .card {
    background: #fffdf5;
    border-color: #ffe9a8;
}
.list-done .card:hover { border-color: #ffc94d; background: #fffceb; }
.list-done.drag-over { outline: 2px dashed #ffc94d; }

/* 새 할 일 추가 — 번쩍이며 살짝 흔들리는 이펙트 */
.card-flash {
    animation: card-flash 0.9s linear both;
    will-change: transform, filter, box-shadow;
}
@keyframes card-flash {
    /* 0~10%: 새하얗게 터지는 섬광 */
    0% {
        transform: scale(0.84) rotate(0deg) translateX(0);
        filter: brightness(4.2) saturate(0.15);
        box-shadow: 0 0 70px 30px rgba(210, 235, 255, 1),
                    0 0 0 6px rgba(255, 255, 255, 1);
    }
    4% {
        transform: scale(1.14) rotate(-4deg) translateX(-5px);
        filter: brightness(3.4) saturate(0.3);
        box-shadow: 0 0 60px 24px rgba(185, 222, 255, 1),
                    0 0 0 5px rgba(255, 255, 255, 0.95);
    }
    10% {
        transform: scale(1.09) rotate(3.4deg) translateX(5px);
        filter: brightness(2.3) saturate(0.6);
        box-shadow: 0 0 46px 16px rgba(160, 208, 255, 0.9),
                    0 0 0 3px rgba(255, 255, 255, 0.75);
    }
    /* 10~100%: 촘촘하게 잦아드는 진동 */
    16% { transform: scale(1.06) rotate(-3deg) translateX(-4px); filter: brightness(1.75);
          box-shadow: 0 0 34px 11px rgba(140, 195, 255, 0.7); }
    22% { transform: scale(1.04) rotate(2.6deg) translateX(4px); filter: brightness(1.45);
          box-shadow: 0 0 26px 8px rgba(140, 195, 255, 0.5); }
    28% { transform: scale(1.03) rotate(-2.2deg) translateX(-3px); filter: brightness(1.3); }
    34% { transform: scale(1.02) rotate(1.9deg) translateX(3px); filter: brightness(1.2); }
    40% { transform: scale(1.015) rotate(-1.6deg) translateX(-2.5px); filter: brightness(1.13); }
    46% { transform: scale(1.01) rotate(1.3deg) translateX(2.5px); filter: brightness(1.08); }
    52% { transform: scale(1.008) rotate(-1.05deg) translateX(-2px); filter: brightness(1.05); }
    58% { transform: scale(1.005) rotate(0.85deg) translateX(2px); }
    64% { transform: rotate(-0.68deg) translateX(-1.5px); }
    70% { transform: rotate(0.54deg) translateX(1.5px); }
    76% { transform: rotate(-0.42deg) translateX(-1px); }
    82% { transform: rotate(0.32deg) translateX(1px); }
    88% { transform: rotate(-0.22deg) translateX(-0.6px); }
    94% { transform: rotate(0.12deg) translateX(0.3px); }
    100% {
        transform: rotate(0deg) scale(1) translateX(0);
        filter: brightness(1) saturate(1);
        box-shadow: var(--shadow);
    }
}

/* ── AI 업무 리스트 ── */
/* 🤖 AI 요청 — 다크 + 네온 + 매트릭스 코드 레인 */
.list-working,
.list-aidone,
.list-request {
    background: #060b08;
    border: 1px solid rgba(0, 255, 140, 0.22);
    position: relative;
    overflow: hidden;                 /* 코드 레인이 모서리 밖으로 새지 않게 */
    box-shadow: 0 0 16px rgba(0, 255, 140, 0.3),
                inset 0 0 26px rgba(0, 255, 140, 0.06);
}
/* 리스트 테두리를 따라 빛이 흐르는 네온 링.
   그라데이션 사각형을 깔고 mask 로 가운데를 도려내 테두리만 남긴다.
   미지원 브라우저는 위의 정적 네온 테두리만 보이므로 깨지지 않는다. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .list-working::before,
.list-aidone::before,
.list-request::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 13px;          /* 14px 리스트 - 1px 테두리 */
        padding: 2px;                 /* 링 두께 */
        background: conic-gradient(from var(--neon-angle, 0deg),
            rgba(0, 255, 140, 0.06) 0deg,
            rgba(0, 255, 140, 0.18) 55deg,
            #6bffb8 120deg,
            #eafff5 150deg,
            #6bffb8 180deg,
            rgba(0, 255, 140, 0.18) 245deg,
            rgba(0, 255, 140, 0.06) 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
        animation: neon-flow 4s linear infinite;
        pointer-events: none;
        z-index: 3;                   /* 카드 위로 — 가장자리라 가리는 건 없다 */
    }
}
@keyframes neon-flow {
    to { --neon-angle: 360deg; }
}
@property --neon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.matrix-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.62;                    /* 쨍하되 살짝 눌러서 */
}
.list-working > *:not(.matrix-rain),
.list-aidone > *:not(.matrix-rain),
.list-request > *:not(.matrix-rain) { position: relative; z-index: 1; }

.list-working .list-header h2,
.list-aidone .list-header h2,
.list-request .list-header h2 {
    color: #7dffc0;
    text-shadow: 0 0 10px rgba(0, 255, 140, 0.55);
}
/* AI 리스트의 개수 배지 — 초록 화면에서 한눈에 띄도록 노란색 계열로 */
/* 어두운 AI 리스트에서는 살짝 발광만 더한다 (색은 위와 같다) */
.list-working .list-header .count,
.list-aidone .list-header .count,
.list-request .list-header .count {
    box-shadow: 0 0 10px rgba(232, 194, 92, 0.28);
}
.list-working .drag-handle,
.list-aidone .drag-handle,
.list-request .drag-handle { color: #3f8f6a; }
.list-working .drag-handle:hover,
.list-aidone .drag-handle:hover,
.list-request .drag-handle:hover { background: rgba(0, 255, 140, 0.14); color: #7dffc0; }
.list-working .list-header button,
.list-aidone .list-header button,
.list-request .list-header button { color: #3f8f6a; }
.list-working .list-header button:hover,
.list-aidone .list-header button:hover,
.list-request .list-header button:hover { background: rgba(0, 255, 140, 0.14); color: #7dffc0; }

/* 카드가 리스트 바탕(#060b08)에서 확실히 떠 보이도록:
   바탕보다 밝은 판 + 뚜렷한 네온 테두리 + 바깥 그림자로 경계를 만든다 */
.list-done .card-ai,
.card-ai, .list-request .card {
    background: rgba(14, 33, 24, 0.95);
    border: 1px solid rgba(0, 255, 140, 0.55);
    color: #d6ffe9;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55),      /* 바탕과 테두리를 갈라주는 어두운 선 */
                0 3px 12px rgba(0, 0, 0, 0.65),     /* 카드가 떠 있는 느낌 */
                0 0 10px rgba(0, 255, 140, 0.18);   /* 옅은 네온 번짐 */
}
.list-done .card-ai:hover,
.card-ai:hover, .list-request .card:hover {
    background: rgba(20, 45, 33, 0.97);
    border-color: #3ee394;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55),
                0 4px 14px rgba(0, 0, 0, 0.7),
                0 0 18px rgba(0, 255, 140, 0.45);
}
.card-ai .card-descr-mark,
.list-request .card .card-descr-mark {
    background: rgba(0, 255, 140, 0.12);
    color: #7dffc0;
}
/* 이 리스트에서 가장 자주 누르는 버튼 — 밝게 채워 눈에 띄게,
   글씨는 어둡게 해서 또렷하게 */
/* 자주 누르는 버튼이라 눈에는 띄되, 화면 전체를 밝히지는 않게 */
.list-request .add-card {
    background: #05321d;              /* 코드 레인이 비치지 않게 */
    border: 1px solid rgba(0, 255, 140, 0.55);
    color: #b6ffd9;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 255, 140, 0.18);
}
.list-request .add-card:hover {
    background: #045430;
    border-color: #3ee394;
    color: #eafff5;
    box-shadow: 0 0 16px rgba(0, 255, 140, 0.4);
}
.list-request .composer textarea {
    background: #08130e;
    color: #d6ffe9;
    border-color: #3ee394;
}
.list-request .list-header input {
    background: #08130e; color: #d6ffe9; border-color: #3ee394;
}

/* 카드 진행 상태 배지 */
.state-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid transparent;
}
.state-request { background: #ece4ff; color: #6b3fd4; border-color: #d6c6ff; }
.state-review  { background: #ffe9d1; color: #b3630a; border-color: #ffd0a0; }
.state-go      { background: #d9f5e2; color: #17794a; border-color: #a8e3bf; }
.state-doing   { background: #dcefff; color: #1663b8; border-color: #b6d9ff; }
.state-blocked { background: #ffe0e0; color: #c02f2f; border-color: #ffc2c2; }

.badge-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.badge-report { background: #dff3e4; color: #17794a; border-color: #a8e3bf; font-weight: 700; }
.badge-session { background: #fff0d9; color: #9a5b00; border-color: #ffd9a0; }
.badge-provider { font-weight: 800; letter-spacing: .01em; }
.badge-provider.provider-claude { background: #fff0e8; color: #9a421f; border-color: #ffc5a8; }
.badge-provider.provider-codex { background: #e1f5e9; color: #12633b; border-color: #a8dfbd; }
.badge-ai-limit { background: #ffe8df; color: #a33a18; border-color: #ffb79e; font-weight: 800; }
.card-ai .badge-report,
.list-request .badge-report { background: rgba(0,255,140,0.18); color: #b6ffd9; border-color: rgba(0,255,140,0.5); }
.card-ai .badge-session,
.list-request .badge-session { background: rgba(255,190,90,0.15); color: #ffd79a; border-color: rgba(255,190,90,0.4); }
.card-ai .badge-provider.provider-claude,
.list-request .badge-provider.provider-claude { background: rgba(255,137,74,0.16); color: #ffbd96; border-color: rgba(255,137,74,0.45); }
.card-ai .badge-provider.provider-codex,
.list-request .badge-provider.provider-codex { background: rgba(62,227,148,0.16); color: #9dffce; border-color: rgba(62,227,148,0.45); }
.card-ai .badge-ai-limit,
.list-request .badge-ai-limit { background: rgba(255,92,54,0.2); color: #ffb39f; border-color: rgba(255,116,82,0.62); }

/* AI 요청 리스트 상단 지침 복사 안내 */
.guide-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    padding: 0 10px 8px;
    flex-shrink: 0;
}
.guide-btn {
    background: #061c11;              /* 코드 레인이 비치지 않게 */
    border: 1px solid rgba(0, 255, 140, 0.28);
    color: #6fd7a5;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.guide-btn:hover {
    background: #053720;
    border-color: #3ee394;
    color: #d6ffe9;
}

/* 편집 창의 AI 업무 구역 */
.ai-section {
    display: flex; flex-direction: column; gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.ai-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text); cursor: pointer; user-select: none;
}
.ai-check input { accent-color: #17794a; width: 16px; height: 16px; }
.ai-check code {
    background: var(--panel); border-radius: 4px; padding: 1px 5px; font-size: 12px;
}
.ai-block { display: flex; flex-direction: column; gap: 4px; }
.ai-block-title { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.ai-block-body {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 50dvh;
    overflow-y: auto;
}
.ai-block-body.ai-empty { color: var(--text-dim); font-style: italic; }

/* 편집 창의 상태 선택 */
.state-row { display: flex; flex-direction: column; gap: 6px; }
.state-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.state-opt {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
}
.state-opt:hover { border-color: var(--accent); color: var(--text); }
.state-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.state-opt-go.active { background: #17794a; border-color: #17794a; }
.state-hint { color: var(--text-dim); font-size: 11px; }

/* 완료 카드 축하 애니메이션 */
.card-celebrate { animation: celebrate-pop 0.45s ease; }
@keyframes celebrate-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12) rotate(-2deg); box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.55); }
    70%  { transform: scale(0.97) rotate(1deg); }
    100% { transform: scale(1); }
}

/* 컨페티 파티클 */
.confetti {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    will-change: transform, opacity;
}

/* 임시 이미지 — 이미지 영역 위에 덮이는 진행 표시 */
.clip-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;   /* 버튼/안내문을 뺀 나머지 공간을 차지 */
    min-height: 120px;
}
.clip-progress {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 20, 0.74);
    border-radius: 14px;
    z-index: 30;
}
.clip-progress-box { width: min(340px, 78%); }
.clip-progress-bar {
    height: 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.clip-progress-bar span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, #4d96ff, #7ef0d4);
    transition: width 0.15s ease;
}
.clip-progress-bar span.indeterminate {
    width: 40% !important;
    animation: clip-indeterminate 1.1s ease-in-out infinite;
}
@keyframes clip-indeterminate {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(360%); }
}
#clip-progress-text {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #eaf1ff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ── 1회용 파일 전송 ── */
.file-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 26px 20px;
    text-align: center;
    width: min(460px, 92%);
}
.file-icon { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.file-name {
    font-size: 16px;
    font-weight: 700;
    color: #eaf1ff;
    word-break: break-all;
    margin-bottom: 6px;
}
.file-size { font-size: 13px; color: #8fa0b8; margin-bottom: 14px; }
.file-link {
    font-size: 12px;
    color: #7ab3ff;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-all;
}

/* 받는 사람용 다운로드 페이지 */
.dl-page { display: flex; align-items: center; justify-content: center; }
.dl-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.dl-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 34px 26px;
    text-align: center;
    width: min(430px, 100%);
}
.dl-box h1 { font-size: 19px; color: #eaf1ff; margin-bottom: 16px; }
.dl-desc { font-size: 13px; color: #8fa0b8; line-height: 1.7; }
.dl-btn {
    display: block;
    margin: 20px 0 16px;
    background: linear-gradient(90deg, #4d96ff, #7ef0d4);
    color: #0b1220;
    text-decoration: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 16px;
    font-weight: 800;
}
.dl-btn:hover { filter: brightness(1.08); }
.dl-btn.busy { opacity: 0.6; pointer-events: none; }
.dl-warn { font-size: 12px; color: #ffc46b; line-height: 1.7; }

/* 내 파일 바로 다운로드 버튼 */
.clip-actions .dl-inline { text-decoration: none; }
.clip-actions .dl-inline.disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* 프로젝트 관리(옵션) 모달 */
.options-summary {
    font-size: 13px;
    color: var(--text-dim);
    background: var(--panel);
    border-radius: 8px;
    padding: 9px 12px;
    text-align: center;
    word-break: break-all;
}
.option-list { display: flex; flex-direction: column; gap: 8px; }
.option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.option-row:hover { background: var(--accent-soft); border-color: var(--accent); }
.option-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.option-text { display: flex; flex-direction: column; gap: 2px; }
.option-text b { font-size: 14px; color: var(--text); font-weight: 700; }
.option-text small { font-size: 12px; color: var(--text-dim); }
.option-row.option-danger:hover { background: #fff2f2; border-color: var(--danger); }
.option-row.option-danger .option-text b { color: var(--danger); }

/* 외부 업로드 API 안내 박스 */
.api-box {
    width: min(560px, 92%);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 16px;
    color: #8fa0b8;
    font-size: 13px;
    flex-shrink: 0;
}
.api-box summary { cursor: pointer; font-weight: 600; color: #b9c7db; }
.api-desc { margin: 12px 0 10px; line-height: 1.6; }
.api-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.api-label { font-size: 11px; color: #6f7f96; font-weight: 700; }
.api-box code {
    display: block;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 9px 11px;
    color: #7ef0d4;
    font-size: 12px;
    word-break: break-all;
}
.api-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.api-actions button {
    background: #202940;
    color: #dfe6f2;
    border: 1px solid #33405c;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.api-actions button:hover { background: #2a3450; }
.api-actions button.ai-btn {
    background: linear-gradient(90deg, #4d96ff, #7ef0d4);
    color: #0b1220;
    border-color: transparent;
    font-weight: 800;
}
.api-actions button.ai-btn:hover { filter: brightness(1.08); background: linear-gradient(90deg, #4d96ff, #7ef0d4); }
.api-warn { margin-top: 10px; font-size: 12px; color: #ffc46b; line-height: 1.6; }

/* 로그인 비밀번호 저장 체크박스 */
.remember-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}
.remember-row input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ── 모달 ── */
.modal {
    position: fixed;
    inset: 0;
    /* 키보드가 올라오면 덮개도 그만큼만 차지해 스크롤이 가능해진다 */
    max-height: var(--vvh, none);
    touch-action: pan-y;              /* 손가락으로 위아래로 밀어 볼 수 있게 */
    -webkit-overflow-scrolling: touch;
    /* inset:0 이 기본이고, 주소창이 접혀 화면이 더 길어지는 순간에도
       덮개가 모자라지 않도록 최소 높이를 덧댄다.
       (height 로 dvh 를 고정하면 값이 어긋날 때 아래에 빈 띠가 생긴다) */
    min-height: 100dvh;
    background: rgba(36, 52, 77, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    /* 내용이 길면 화면 대신 이 덮개가 스크롤된다.
       flex-start + margin:auto 라야 짧을 땐 가운데, 길 땐 위가 잘리지 않는다 */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    z-index: 100;
}
.modal.hidden { display: none; }
.modal-body {
    --pad-x: 16px;            /* 스크롤바를 가장자리로 밀 때 이 값을 되돌려준다 */
    position: relative;       /* 닫기 ✕ 가 화면이 아니라 '이 창'의 오른쪽 위에 붙게 */
    background: var(--white);
    border-radius: 14px;
    padding: 18px var(--pad-x);
    width: min(620px, 94vw);
    margin: auto;                     /* 짧을 땐 세로 가운데 */
    flex-shrink: 0;                   /* 길어도 눌리지 않게 — 덮개가 스크롤한다 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 40px rgba(30,60,110,0.3);
}
.modal-body h3 { font-size: 15px; }
.field-label { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.modal-body textarea, .modal-body input[type="text"] {
    background: var(--white);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
}
.modal-body textarea:focus, .modal-body input[type="text"]:focus { border-color: var(--accent); outline: none; }
.delete-summary { font-size: 13px; color: var(--text); background: #fff2f2; border: 1px solid #ffd4d4; border-radius: 8px; padding: 9px 11px; }
.delete-warning { font-size: 13px; color: var(--danger); line-height: 1.5; }
.modal-actions .danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--white);
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.modal-actions .primary { padding: 8px 16px; }
.modal-actions .danger {
    background: var(--white);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}
.modal-actions .danger:hover { background: #fff2f2; }

/* ── 임시 이미지 클립 페이지 ── */
.clip-page { overflow-y: auto; }
.clip-page .back-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-right: 6px;
}
.clip-page .back-link:hover { color: var(--text); }
.clip-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    overflow-y: auto;
    min-height: 0;   /* 자식(이미지 영역)이 줄어들 수 있도록 */
}
.clip-empty {
    background: rgba(255, 255, 255, 0.75);
    border: 2px dashed rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 44px 30px;
    text-align: center;
    color: var(--text-dim);
    font-size: 15px;
    line-height: 1.7;
}
.clip-view {
    max-width: min(900px, 100%);
    max-height: 100%;         /* 남은 공간을 넘지 않게 */
    min-height: 0;
    display: flex;
    background: var(--white);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 6px 24px rgba(30, 60, 110, 0.25);
}
.clip-view img, .clip-view canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;         /* 세로로 긴 이미지도 화면 안에 들어오도록 */
    object-fit: contain;
    border-radius: 8px;
}
/* 스크롤/당겨서 새로고침/핀치줌 차단은 그림 그리는 캔버스에만 적용 */
.clip-view canvas { touch-action: none; }
.clip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;   /* 버튼 줄은 이미지에 밀리지 않게 */
}
.clip-actions button, .clip-actions .file-btn {
    background: var(--white);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.clip-actions button:hover, .clip-actions .file-btn:hover { border-color: var(--accent); color: var(--accent); }
.clip-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.clip-actions .file-btn {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    display: inline-block;
}
.clip-actions .file-btn:hover { color: #fff; filter: brightness(1.1); }
.clip-actions .save-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.clip-actions .save-btn:hover { color: #fff; filter: brightness(1.1); }
.clip-actions button.color-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #fff;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}
.clip-actions button.color-btn.active { outline: 3px solid var(--accent); }
.clip-actions button.color-red { background: #ff3b30; }
.clip-actions button.color-yellow { background: #ffcc00; }
.clip-actions button.color-blue { background: #3f8cff; }
.clip-actions button.color-black { background: #222; }
.clip-actions button.color-btn:hover { border-color: #fff; filter: brightness(1.15); }
.copy-helper {
    position: fixed;
    left: -9999px;
    top: 0;
    opacity: 0;
}

/* ── 클립 페이지 다크 테마 ── */
.clip-page {
    background: linear-gradient(150deg, #10151f, #1a2233 55%, #211a33);
}
.clip-page .topbar {
    background: rgba(14, 18, 27, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.clip-page .topbar .logo { color: #e8ecf5; }
.clip-page .topbar .version { color: #5d6b80; }
.clip-page .back-link { color: #8fa0b8; }
.clip-page .back-link:hover { color: #e8ecf5; }
.clip-page .clip-empty {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #8fa0b8;
}
.clip-page .clip-view {
    position: relative;
    background: #171e2c;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
.clip-page .clip-actions button,
.clip-page .clip-actions .file-btn {
    background: #202940;
    color: #dfe6f2;
    border: 1px solid #33405c;
}
.clip-page .clip-actions button:hover,
.clip-page .clip-actions .file-btn:hover { border-color: var(--accent); color: #fff; }
.clip-page .clip-actions .file-btn,
.clip-page .clip-actions .save-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.clip-page .clip-actions .file-btn:hover,
.clip-page .clip-actions .save-btn:hover { filter: brightness(1.15); color: #fff; }
.clip-page .clip-actions button:disabled { opacity: 0.35; }
.clip-page .clip-actions button.color-btn { border-color: #171e2c; }
.clip-page .clip-actions button.color-btn.active { outline-color: #7ab3ff; }
/* 색상 버튼은 다크 테마 버튼 배경보다 우선 */
.clip-page .clip-actions button.color-red { background: #ff3b30; }
.clip-page .clip-actions button.color-yellow { background: #ffcc00; }
.clip-page .clip-actions button.color-blue { background: #3f8cff; }
.clip-page .clip-actions button.color-black { background: #222; }
.clip-page .clip-info {
    color: #7c8aa3;
    text-shadow: none;
}
.clip-info {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(30, 60, 110, 0.4);
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
}

/* ── 로그인 ── */
.login-page {
    align-items: center;
    justify-content: center;
    display: flex;
}
.login-box {
    background: var(--white);
    border-radius: 16px;
    padding: 36px;
    width: min(360px, 90vw);
    text-align: center;
    box-shadow: 0 10px 40px rgba(30,60,110,0.25);
}
.login-box h1 { font-size: 22px; margin-bottom: 22px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input {
    background: var(--white);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 11px;
    font-size: 14px;
}
.login-box input:focus { border-color: var(--accent); outline: none; }
.login-box button {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.login-box button:hover { filter: brightness(1.1); }
.login-error { color: var(--danger); margin-top: 12px; font-size: 13px; }
.version { color: var(--text-dim); font-size: 12px; margin-top: 16px; }

/* 카드 편집 창의 프로젝트 입력 */
.ai-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ai-field input,
.ai-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--card);
    color: var(--text);
}
.agent-provider-select { cursor: pointer; font-weight: 700; }
.ai-field-hint { color: var(--muted); font-size: 11px; }

/* AI 업무 카드 전용 작성 창 */
.ai-compose .ai-check { margin-top: 10px; }

/* ── 프로젝트 고르기 칩 ── */
.session-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.session-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 99px;
    overflow: hidden;
    font-size: 11px;
}
.session-chip-pick {
    background: none; border: 0; cursor: pointer;
    padding: 3px 4px 3px 9px; font: inherit; color: var(--muted);
}
.session-chip-del {
    background: none; border: 0; cursor: pointer;
    padding: 3px 7px 3px 3px; font: inherit; color: #bbb; line-height: 1;
}
.session-chip:hover { border-color: #9fc4ff; }
.session-chip-del:hover { color: #d64545; }
.session-chip.active {
    border-color: #7ec8ff;
    background: #eaf4ff;
}
.session-chip.active .session-chip-pick { color: #1f6fb2; font-weight: 700; }

/* ── AI 업무 카드 작성 창 — AI 리스트와 같은 다크 네온 톤 ── */
.ai-tone {
    background: #060b08;
    border: 1px solid rgba(0, 255, 140, 0.22);
    color: #d6ffe9;
    position: relative;
    overflow: hidden;                 /* 코드 레인이 모서리 밖으로 새지 않게 */
    box-shadow: 0 0 34px rgba(0, 255, 140, 0.3),
                inset 0 0 30px rgba(0, 255, 140, 0.05);
}
/* 코드 레인 위로 내용이 오도록 (닫기 버튼은 제 자리를 지켜야 하니 제외) */
.ai-tone > *:not(.matrix-rain):not(.modal-x) { position: relative; z-index: 1; }
.ai-tone .matrix-rain { opacity: 0.30; }   /* 글자를 읽어야 하니 리스트보다 옅게 */

/* 리스트와 같은, 테두리를 따라 흐르는 네온 링 */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .ai-tone::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 13px;          /* 14px 모달 - 1px 테두리 */
        padding: 2px;
        background: conic-gradient(from var(--neon-angle, 0deg),
            rgba(0, 255, 140, 0.06) 0deg,
            rgba(0, 255, 140, 0.18) 55deg,
            #6bffb8 120deg,
            #eafff5 150deg,
            #6bffb8 180deg,
            rgba(0, 255, 140, 0.18) 245deg,
            rgba(0, 255, 140, 0.06) 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
        animation: neon-flow 4s linear infinite;
        pointer-events: none;
        z-index: 3;
    }
}
.ai-tone h3 {
    color: #7dffc0;
    text-shadow: 0 0 10px rgba(0, 255, 140, 0.5);
}
.ai-tone .field-label { color: #6fd7a5; }
.ai-tone textarea,
.ai-tone input[type="text"] {
    background: rgba(8, 19, 14, 0.82);
    color: #d6ffe9;
    border: 1px solid rgba(0, 255, 140, 0.28);
}
.ai-tone textarea:focus,
.ai-tone input[type="text"]:focus {
    border-color: #3ee394;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 255, 140, 0.15);
}
.ai-tone textarea::placeholder,
.ai-tone input[type="text"]::placeholder { color: #3f7a60; }
.ai-tone .agent-provider-select {
    background: #08130e;
    color: #b6ffd9;
    border-color: rgba(0, 255, 140, 0.35);
}
.ai-tone .ai-field-hint { color: #5f9d81; }
.ai-tone .ai-check { color: #b6ffd9; }
.ai-tone .ai-check input { accent-color: #3ee394; }
.ai-tone .session-chip { border-color: rgba(0, 255, 140, 0.28); }
.ai-tone .session-chip-pick { color: #6fd7a5; }
.ai-tone .session-chip-del { color: #3f7a60; }
.ai-tone .session-chip:hover { border-color: #3ee394; }
.ai-tone .session-chip-del:hover { color: #ff8a8a; }
.ai-tone .session-chip.active {
    background: rgba(0, 255, 140, 0.14);
    border-color: #3ee394;
}
.ai-tone .session-chip.active .session-chip-pick { color: #c7ffe4; }
/* 취소 버튼 — 밝은 기본 스타일을 눌러 다크 톤으로.
   :not() 셀렉터가 붙은 기본 규칙보다 특이도가 높아야 한다 */
.ai-tone .modal-actions button,
.ai-tone .modal-actions button:not(.primary):not(.danger) {
    background: #0e1c15;
    color: #7fc4a4;
    border: 1px solid rgba(0, 255, 140, 0.22);
}
.ai-tone .modal-actions button:hover,
.ai-tone .modal-actions button:not(.primary):not(.danger):hover {
    background: rgba(0, 255, 140, 0.12);
    border-color: rgba(0, 255, 140, 0.5);
    color: #c7ffe4;
}

/* 다크 배경에서 밝은 칩 배경 + 형광 글씨라 안 보이던 것을 고친다 */
.ai-tone .ai-check code,
.ai-tone code {
    background: rgba(0, 255, 140, 0.12);
    border: 1px solid rgba(0, 255, 140, 0.25);
    color: #9fffcd;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
}
.ai-tone .modal-actions .primary {
    background: rgba(0, 255, 140, 0.18);
    border-color: #3ee394;
    color: #d6ffe9;
    font-weight: 700;
}
.ai-tone .modal-actions .primary:hover {
    background: rgba(0, 255, 140, 0.32);
    box-shadow: 0 0 14px rgba(0, 255, 140, 0.4);
}
.ai-compose .ai-check { margin-top: 10px; }
/* '확인 없이 바로 진행' — 켜면 테두리가 살아나 지금 어느 쪽인지 한눈에 보인다 */
.ai-compose-check {
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 255, 140, 0.28);
    border-radius: 8px;
    background: rgba(0, 255, 140, 0.05);
}
.ai-compose-check:has(input:checked) {
    border-color: #3ee394;
    background: rgba(0, 255, 140, 0.14);
}
.ai-compose-hint {
    display: block;
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(0, 255, 140, 0.06);
    border: 1px solid rgba(0, 255, 140, 0.2);
    border-radius: 8px;
    color: #7fc4a4;
    font-size: 11px;
    line-height: 1.6;
}
.ai-compose-hint b { color: #b6ffd9; }

/* ── AI 카드 편집 창 (다크 톤일 때의 전용 요소들) ── */
.ai-tone .ai-section { border-top-color: rgba(0, 255, 140, 0.2); }
.ai-tone .ai-block-title { color: #6fd7a5; }
.ai-tone .ai-block-body {
    background: rgba(8, 19, 14, 0.82);
    border: 1px solid rgba(0, 255, 140, 0.22);
    color: #d6ffe9;
}
.ai-tone .ai-block-body.ai-empty { color: #4f8a6d; }
.ai-tone .state-hint { color: #7fc4a4; }

.ai-tone .state-opt {
    background: #0e1c15;
    border: 1px solid rgba(0, 255, 140, 0.22);
    color: #7fc4a4;
}
.ai-tone .state-opt:hover {
    border-color: rgba(0, 255, 140, 0.5);
    color: #c7ffe4;
}
.ai-tone .state-opt.active {
    background: rgba(0, 255, 140, 0.2);
    border-color: #3ee394;
    color: #eafff5;
    box-shadow: 0 0 12px rgba(0, 255, 140, 0.35);
}
/* '진행' 은 실제 작업이 시작되는 버튼이라 한 단계 더 밝게 */
.ai-tone .state-opt-go.active {
    background: rgba(0, 255, 140, 0.34);
    box-shadow: 0 0 18px rgba(0, 255, 140, 0.55);
}

/* 삭제 버튼 — 붉은 톤은 유지하되 다크 배경에 맞춘다 */
.ai-tone .modal-actions .danger {
    background: #24100f;
    border-color: rgba(255, 120, 120, 0.45);
    color: #ff9d9d;
}
.ai-tone .modal-actions .danger:hover {
    background: rgba(255, 90, 90, 0.2);
    border-color: #ff8a8a;
    color: #ffd6d6;
}

/* 편집 창 — AI가 단 상태를 읽기 전용으로 알려주는 줄 */
.state-ai {
    font-size: 12px;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
}
.state-ai b { color: var(--text); }
.state-ai small { display: block; margin-top: 2px; font-size: 11px; }
.ai-tone .state-ai {
    background: rgba(0, 255, 140, 0.06);
    border-color: rgba(0, 255, 140, 0.22);
    color: #7fc4a4;
}
.ai-tone .state-ai b { color: #d6ffe9; }

/* ── AI 질문 / 사용자 답변 ── */
.qna-list { display: flex; flex-direction: column; gap: 12px; }
.qna-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.qna-q { font-size: 13px; font-weight: 700; line-height: 1.5; margin-bottom: 2px; }
.qna-opt {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 13px; line-height: 1.45; cursor: pointer;
    padding: 3px 4px; border-radius: 6px;
}
.qna-opt:hover { background: rgba(0, 0, 0, 0.04); }
.qna-opt input { margin-top: 3px; flex-shrink: 0; }
.qna-free {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 9px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.ai-tone .qna-item {
    background: rgba(8, 19, 14, 0.82);
    border-color: rgba(0, 255, 140, 0.22);
}
.ai-tone .qna-q { color: #eafff5; }
.ai-tone .qna-opt { color: #c7ffe4; }
.ai-tone .qna-opt:hover { background: rgba(0, 255, 140, 0.1); }
.ai-tone .qna-opt input { accent-color: #3ee394; }
.ai-tone .qna-free {
    background: rgba(6, 14, 10, 0.9);
    border-color: rgba(0, 255, 140, 0.28);
    color: #d6ffe9;
}
.ai-tone .qna-free::placeholder { color: #3f7a60; }
/* '직접 입력' 은 보기이면서 입력칸을 여는 열쇠라 살짝 구분해 둔다 */
.qna-opt-free { margin-top: 2px; border-top: 1px dashed var(--border); padding-top: 6px; }
.qna-opt-free span { color: var(--text-dim); }
.ai-tone .qna-opt-free { border-top-color: rgba(0, 255, 140, 0.22); }
.ai-tone .qna-opt-free span { color: #8fdcb6; }
/* 답이 저장됐는지 알려주는 한 줄 */
.qna-save-hint { display: block; margin-top: 6px; }
.qna-save-hint.ok { color: var(--accent); }
.qna-save-hint.bad { color: #c0392b; font-weight: 700; }
.ai-tone .qna-save-hint.ok { color: #7dffc0; }
.ai-tone .qna-save-hint.bad { color: #ff9b8a; }
.ai-block.folded .qna-save-hint { display: none; }

/* 답변이 필요한 카드 — 노란 네온이 테두리를 따라 흐른다 */
.badge-question { background: #fff3cd; color: #8a5a00; border-color: #ffe08a; font-weight: 700; }
.card-ai .badge-question,
.list-request .badge-question {
    background: rgba(255, 200, 60, 0.2); color: #ffe6a3; border-color: rgba(255, 200, 60, 0.55);
}
.card.needs-answer {
    border-color: rgba(255, 200, 60, 0.75);
    position: relative;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .card.needs-answer::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 12px;
        padding: 2px;
        background: conic-gradient(from var(--neon-angle, 0deg),
            rgba(255, 200, 60, 0.08) 0deg,
            rgba(255, 200, 60, 0.3) 55deg,
            #ffd34d 120deg,
            #fff6d6 150deg,
            #ffd34d 180deg,
            rgba(255, 200, 60, 0.3) 245deg,
            rgba(255, 200, 60, 0.08) 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask-composite: exclude;
        animation: neon-flow 2.6s linear infinite;   /* 재촉하듯 조금 빠르게 */
        pointer-events: none;
        z-index: 1;
    }
}
.list-request .card.needs-answer {
    border-color: rgba(255, 200, 60, 0.75);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55),
                0 3px 12px rgba(0, 0, 0, 0.65),
                0 0 14px rgba(255, 200, 60, 0.35);
}
.list-request .card.needs-answer:hover {
    border-color: #ffd34d;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55),
                0 4px 14px rgba(0, 0, 0, 0.7),
                0 0 22px rgba(255, 200, 60, 0.55);
}

/* main 병합(완료 처리중) 회차 카드 — 업무의 마지막 단계라 보라 테두리로 짚어 준다.
   답변이 급한 노란 카드가 우선이므로 needs-answer 가 붙은 카드는 건드리지 않는다 */
.card.merge-round:not(.needs-answer) {
    border: 2px solid #7c4ddb;
    box-shadow: 0 0 0 1px rgba(124, 77, 219, 0.16), var(--shadow);
}
.card.merge-round:not(.needs-answer):hover { border-color: #6b3fd4; }
.card-ai.merge-round:not(.needs-answer),
.list-request .card.merge-round:not(.needs-answer),
.list-working .card.merge-round:not(.needs-answer),
.list-aidone .card.merge-round:not(.needs-answer),
.list-done .card-ai.merge-round:not(.needs-answer) {
    border: 2px solid rgba(180, 150, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55),
                0 3px 12px rgba(0, 0, 0, 0.65),
                0 0 14px rgba(180, 150, 255, 0.4);
}
.card-ai.merge-round:not(.needs-answer):hover,
.list-request .card.merge-round:not(.needs-answer):hover,
.list-working .card.merge-round:not(.needs-answer):hover,
.list-aidone .card.merge-round:not(.needs-answer):hover,
.list-done .card-ai.merge-round:not(.needs-answer):hover {
    border-color: #c9adff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55),
                0 4px 14px rgba(0, 0, 0, 0.7),
                0 0 22px rgba(180, 150, 255, 0.6);
}

#modal-descr-row { display: flex; flex-direction: column; gap: 10px; }

#modal-user-note {
    resize: none;              /* 내용만큼 저절로 늘어난다 */
    overflow-y: hidden;        /* 안쪽 스크롤바 없음 */
    min-height: 62px;
}

/* ── 카드의 만든 날짜 (작게) ── */
.card-date {
    float: right;
    margin-left: 8px;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.6;
    opacity: 0.75;
    white-space: nowrap;
}
.card-ai .card-date, .list-request .card-date, .list-working .card-date, .list-aidone .card-date { color: #5f9d81; }

/* ── 완료 리스트의 날짜별 묶음 ── */
.date-group { margin-bottom: 6px; }
/* 카드와 카드 사이를 가르는 절취선 — 가운데에 날짜 라벨 */
.date-head {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    background: none;
    border: 0;
    padding: 4px 0;
    margin: 6px 0 10px;
    cursor: pointer;
    font: inherit;
    color: var(--text-dim);
}
.date-head::before,
.date-head::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--border);
    align-self: center;
}
.date-head::before { margin-right: 1px; }
.date-scissor { font-size: 11px; opacity: 0.55; line-height: 1; }
.date-head:hover { color: var(--text); }
.date-head:hover::before,
.date-head:hover::after { border-top-color: var(--accent); }
.date-arrow { font-size: 9px; transition: transform 0.15s; opacity: 0.7; }
.date-name { font-size: 12px; font-weight: 700; white-space: nowrap; }
.date-count {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 6px;
}
.date-group.collapsed .date-arrow { transform: rotate(-90deg); }
.date-group.collapsed .date-cards { display: none; }
/* 접힌 묶음은 절취선만 남아 조용하게 */
.date-group.collapsed .date-head { opacity: 0.7; }
/* 첫 묶음은 위쪽 여백을 줄인다 */
.date-group:first-child .date-head { margin-top: 0; }

/* ── 완료 리스트의 AI 카드 — 코드 레인이 은은하게 ── */
.card-ai {
    position: relative;
    overflow: hidden;
    color: #d6ffe9;
}
.card-ai > *:not(.matrix-rain) { position: relative; z-index: 1; }
.card-ai .matrix-rain { opacity: 0.22; }   /* 글자를 읽어야 하니 아주 옅게 */

/* ── 완료된 카드는 읽기 전용 ── */
.read-only textarea,
.read-only input[type="text"] {
    opacity: 0.85;
    cursor: default;
}
/* 고칠 수 없는 칸은 크기도 조절할 수 없다 — 글자 높이에 딱 맞춘다.
   field-sizing 을 아는 브라우저는 이것만으로 끝나고,
   모르는 브라우저는 아래 자바스크립트가 높이를 맞춘다 */
.read-only textarea:not(.always-editable) {
    resize: none;
    overflow-y: hidden;
    min-height: 0;
    field-sizing: content;
}
#modal-user-note { field-sizing: content; min-height: 0; }
.read-only textarea:focus,
.read-only input[type="text"]:focus { box-shadow: none; }
.read-only .qna-opt,
.read-only .ai-check { cursor: default; }
.read-only .qna-opt:hover { background: none; }
/* '(읽기 전용)' 은 실제로 잠긴 칸에만 — 아래 고정 영역의 피드백 칸은 쓸 수 있다 */
.read-only .modal-scroll .field-label::after {
    content: " (읽기 전용)";
    font-weight: 400;
    opacity: 0.6;
}

/* ── AI 차례로 넘어간 카드 — 업무 내용만 잠근다 ── */
.locked #modal-card-title,
.locked #modal-card-descr,
.locked #modal-session {
    opacity: 0.75;
    cursor: default;
    resize: none;
    overflow-y: hidden;
    min-height: 0;
    field-sizing: content;
    border-style: dashed;
}
.locked #modal-card-title:focus,
.locked #modal-card-descr:focus,
.locked #modal-session:focus { box-shadow: none; }
.locked .ai-check { cursor: default; opacity: 0.75; }
/* 잠긴 것이 무엇인지 칸 이름에 바로 적는다 — 눌러 보고 알게 하지 않는다 */
.locked .modal-scroll > .field-label::after,
.locked #modal-descr-row .field-label::after,
.locked label[for="modal-session"]::after {
    content: " 🔒";
    font-weight: 400;
    opacity: 0.7;
}
.locked-note {
    border: 1px solid #ffd9a0;
    background: #fff7e8;
    color: #8a5a00;
    border-radius: 9px;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
}
.ai-tone .locked-note {
    border-color: rgba(0, 255, 140, 0.35);
    background: rgba(0, 255, 140, 0.08);
    color: #9dffcd;
}

/* ── AI 연결 표시등 ── */
.agent-lamp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #050806;              /* 뒤의 코드 레인이 비치지 않게 불투명 */
    border: 1px solid rgba(0, 255, 140, 0.25);
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    color: #5f9d81;
    font-family: inherit;
}
.agent-lamp:hover { border-color: rgba(0, 255, 140, 0.55); }
/* 앞의 아이콘을 키워 멀리서도 색이 보이게 */
.agent-lamp::first-letter { font-size: 13px; }
.agent-lamp.on {
    color: #b6ffd9;
    border-color: rgba(0, 255, 140, 0.55);
    background: #052818;
    box-shadow: 0 0 12px rgba(0, 255, 140, 0.3);
    animation: lamp-breathe 2.4s ease-in-out infinite;
}
.agent-lamp.off {
    color: #ffb3b3;
    border-color: rgba(255, 90, 90, 0.5);
    background: #29120f;
    box-shadow: 0 0 12px rgba(255, 60, 60, 0.25);
}
@keyframes lamp-breathe {
    0%, 100% { box-shadow: 0 0 12px rgba(0, 255, 140, 0.3); }
    50%      { box-shadow: 0 0 20px rgba(0, 255, 140, 0.6); }
}

/* ── AI 업무 완료 리스트 — 후속 작업 요청 ── */
.followup-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
}
.followup-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.followup-btn {
    flex: 1;
    min-width: 140px;
    background: var(--accent-soft);
    border: 1px solid #a9ccff;
    color: var(--accent);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.followup-btn:hover { background: #d6e8ff; }
.followup-btn:disabled { opacity: 0.7; cursor: default; }
.followup-hint { color: var(--text-dim); font-size: 11px; }

.ai-tone .followup-row { border-top-color: rgba(0, 255, 140, 0.2); }
.ai-tone .followup-btn {
    background: rgba(0, 255, 140, 0.1);
    border-color: rgba(0, 255, 140, 0.35);
    color: #9fffcd;
}
.ai-tone .followup-btn:hover {
    background: rgba(0, 255, 140, 0.24);
    border-color: #3ee394;
    color: #eafff5;
    box-shadow: 0 0 14px rgba(0, 255, 140, 0.3);
}
.ai-tone .followup-hint { color: #7fc4a4; }

/* 이번 회차의 업무 유형 */
.badge-tasktype { background: #ede4ff; color: #6b3fd4; border-color: #d4c4ff; font-weight: 700; }
.card-ai .badge-tasktype,
.list-request .badge-tasktype,
.list-working .badge-tasktype,
.list-aidone .badge-tasktype {
    background: rgba(180, 150, 255, 0.2); color: #ddccff; border-color: rgba(180, 150, 255, 0.5);
}
/* '⚡ 확인 없이 바로 진행' 으로 만든 카드 — 승인 단계를 건너뛰었다는 표시 */
.badge-instant { background: #fff4d6; color: #8a5b00; border-color: #ffdf9a; font-weight: 700; }
.card-ai .badge-instant,
.list-request .badge-instant,
.list-working .badge-instant,
.list-aidone .badge-instant {
    background: rgba(255, 210, 90, 0.2); color: #ffe6a8; border-color: rgba(255, 210, 90, 0.5);
}
.task-type-tag {
    align-self: flex-start;
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    background: #ede4ff;
    color: #6b3fd4;
    border: 1px solid #d4c4ff;
}
.ai-tone .task-type-tag {
    background: rgba(180, 150, 255, 0.18);
    color: #ddccff;
    border-color: rgba(180, 150, 255, 0.5);
}

.followup-btn.cancel {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text-dim);
    font-weight: 600;
}
.followup-btn.cancel:hover { background: #ececf3; color: var(--text); }
.ai-tone .followup-btn.cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #9fb3aa;
}
.ai-tone .followup-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #d6ffe9;
    box-shadow: none;
}

/* 지난 문답 기록 */
.qna-log { display: flex; flex-direction: column; gap: 8px; max-height: 40dvh; overflow-y: auto; }
.qna-log-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 1.5;
}
.qna-log-q { font-weight: 700; }
.qna-log-a { color: var(--accent); margin-top: 2px; }
.qna-log-at { color: var(--text-dim); font-size: 10px; margin-top: 3px; }
.ai-tone .qna-log-item {
    background: rgba(8, 19, 14, 0.82);
    border-color: rgba(0, 255, 140, 0.2);
}
.ai-tone .qna-log-q { color: #b6ffd9; }
.ai-tone .qna-log-a { color: #7dffc0; }
.ai-tone .qna-log-at { color: #4f8a6d; }

/* 카드 작성 창 상단의 업무 유형 탭
   탭은 '지금 무엇을 고르는 중인지' 를 보여주는 물건이라, 글자만 놓여 있으면
   눌러야 할 것인지 알기 어렵다. 그래서 안 고른 탭에도 테두리와 바탕을 줘서
   버튼처럼 서 있게 하고, 고른 탭만 아래 바닥선을 끊고 내용과 이어 붙인다. */
.task-tabs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    margin-bottom: 6px;
}
.task-tab {
    flex: 1;
    /* 좁은 화면에서는 글자가 잘리기 전에 아랫줄로 내려가게 한다 */
    min-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    bottom: -2px;                     /* 바닥선 위에 걸터앉아 선을 끊을 수 있게 */
    background: var(--panel);
    border: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
    border-radius: 8px 8px 0 0;       /* 위만 둥근 전형적인 탭 모양 */
    padding: 8px 8px 7px;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.task-tab:hover { color: var(--text); background: var(--card-hover); }
.task-tab:active { bottom: -3px; }    /* 눌리는 느낌 (bottom 을 쓰던 자리라 top 은 못 쓴다) */
.task-tab.active {
    background: var(--white);
    border-color: var(--border);
    border-bottom-color: var(--white);   /* 바닥선을 지워 아래 내용과 한 몸으로 */
    color: var(--accent);
    box-shadow: inset 0 3px 0 var(--accent);
}
.ai-tone .task-tabs { border-bottom-color: rgba(0, 255, 140, 0.35); }
.ai-tone .task-tab {
    background: #0c1710;
    border-color: rgba(0, 255, 140, 0.25);
    border-bottom-color: rgba(0, 255, 140, 0.35);
    color: #5f9d81;
}
.ai-tone .task-tab:hover { background: #11291c; color: #b6ffd9; }
.ai-tone .task-tab.active {
    background: #0e3524;
    border-color: rgba(0, 255, 140, 0.55);
    border-bottom-color: #0e3524;
    color: #d6ffe9;
    box-shadow: inset 0 3px 0 #6bffb8, 0 -4px 14px rgba(0, 255, 140, 0.25);
}
/* main 을 건드리는 유형은 눈에 띄게 */
.badge-tasktype.risky { background: #ffe8e0; color: #b34700; border-color: #ffc6ad; }
.card-ai .badge-tasktype.risky,
.list-request .badge-tasktype.risky,
.list-working .badge-tasktype.risky,
.list-aidone .badge-tasktype.risky {
    background: rgba(255, 150, 90, 0.2); color: #ffd0b3; border-color: rgba(255, 150, 90, 0.55);
}

/* 이미 마친 회차 */
.badge-taskdone { background: #dff3e4; color: #17794a; border-color: #a8e3bf; font-weight: 700; }
.card-ai .badge-taskdone,
.list-request .badge-taskdone,
.list-working .badge-taskdone,
.list-aidone .badge-taskdone {
    background: rgba(0, 255, 140, 0.18); color: #b6ffd9; border-color: rgba(0, 255, 140, 0.5);
}
.task-type-tag.finished { background: #dff3e4; color: #17794a; border-color: #a8e3bf; }
.ai-tone .task-type-tag.finished {
    background: rgba(0, 255, 140, 0.16); color: #b6ffd9; border-color: rgba(0, 255, 140, 0.5);
}

/* 카드 편집 창 — 내용은 스크롤, 아래 버튼은 항상 보이게 */
.modal-scroll { display: contents; }          /* 평소에는 없는 것처럼 */
.modal-body.pinned {
    /* --vvh 는 가상 키보드가 올라오면 줄어든 실제 화면 높이 */
    max-height: min(90vh, 90dvh, var(--vvh, 100vh));
    overflow: hidden;          /* 창 자체는 스크롤하지 않는다 — 아래 버튼이 늘 보이게 */
}
/* 키보드가 올라와 자리가 좁아지면 창 전체를 스크롤할 수 있게 풀어준다 */
body.kb-open .modal { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
body.kb-open .modal-body { margin-top: 0; margin-bottom: 0; }
body.kb-open .modal-body.pinned {
    max-height: none;
    overflow: visible;
}
body.kb-open .modal-body.pinned .modal-scroll {
    overflow: visible;
    min-height: 0;
}
.modal-body.pinned .modal-scroll {
    /* 스크롤바를 창 가장자리 쪽으로 민다. --bar-inset 만큼만 안쪽에 두어
       모서리에 딱 붙지 않게. 민 만큼 안쪽 여백을 주어 글은 제자리에 둔다 */
    --bar-inset: 5px;
    margin-right: calc((var(--pad-x) - var(--bar-inset)) * -1);
    padding-right: calc(var(--pad-x) - var(--bar-inset));
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 72px;        /* 내용이 완전히 눌려 사라지지 않게 */
    overflow-y: auto;
}
/* 고정된 아래 영역이 스크롤 내용과 겹쳐 보이지 않게 경계를 준다 */
.modal-body.pinned .followup-row {
    border-top: 1px solid var(--border);
    margin-top: 0;
    flex-shrink: 0;
}
.modal-body.pinned .modal-actions { flex-shrink: 0; }
.ai-tone.pinned .followup-row { border-top-color: rgba(0, 255, 140, 0.22); }
/* 스크롤 영역 안에서는 각 칸이 따로 스크롤되지 않게 — 창 하나만 스크롤한다 */
.modal-body.pinned .ai-block-body,
.modal-body.pinned .qna-log { max-height: none; overflow: visible; }

/* 일반 카드 → AI 업무 전환 패널 */
.convert-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(0, 255, 140, 0.22);
    padding-top: 12px;
    margin-top: 4px;
}
.convert-head { font-size: 13px; font-weight: 700; color: #7dffc0; }
.convert-desc { font-size: 12px; line-height: 1.6; color: #7fc4a4; }
.convert-desc b { color: #d6ffe9; }

/* 피드백 입력 (완료 카드에서도 쓸 수 있게 읽기 전용에서 제외) */
#modal-feedback-row { gap: 6px; }
#modal-feedback {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}
.read-only #modal-feedback { opacity: 1; cursor: text; }
.modal-body.pinned #modal-feedback-row {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.ai-tone.pinned #modal-feedback-row { border-top-color: rgba(0, 255, 140, 0.22); }
/* 아래 고정 영역이 여러 개면 그 사이 경계는 하나만 */
.modal-body.pinned #modal-followup { border-top: 0; padding-top: 4px; }

/* 아래 고정 영역은 어떤 경우에도 줄어들거나 밀리지 않는다 */
.modal-body.pinned > #modal-feedback-row,
.modal-body.pinned > #modal-followup,
.modal-body.pinned > #modal-followup-cancel,
.modal-body.pinned > #modal-convert-row,
.modal-body.pinned > #modal-convert-actions,
.modal-body.pinned > .modal-actions { flex-shrink: 0; }
/* 버튼이 여러 줄이 되어도 아래에 붙어 있게 — 좁은 화면에서는 조금 촘촘히 */
.modal-body.pinned .followup-btn { padding: 8px 10px; font-size: 12px; min-width: 120px; }

/* 보드 빈 곳을 잡아끌어 좌우 이동 */
.board { cursor: grab; }
.board > * { cursor: default; }
.board.panning { cursor: grabbing; user-select: none; }
.board.panning * { cursor: grabbing !important; }

/* 현재 진행 상태 (읽기 전용) */
.state-now {
    align-self: flex-start;
    border-radius: 99px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
}
.ai-tone .state-now {
    background: rgba(0, 255, 140, 0.12);
    border-color: rgba(0, 255, 140, 0.35);
    color: #d6ffe9;
}
.ai-tone .state-now.state-go { background: rgba(0,255,140,0.3); border-color: #3ee394; }
.ai-tone .state-now.state-blocked {
    background: rgba(255, 150, 90, 0.2); color: #ffd0b3; border-color: rgba(255, 150, 90, 0.55);
}
/* 진행 시키기 — 실제 작업이 시작되는 버튼이라 확실히 눈에 띄게 */
.followup-btn.go {
    background: rgba(0, 255, 140, 0.24);
    border-color: #3ee394;
    color: #eafff5;
}
.followup-btn.go:hover {
    background: rgba(0, 255, 140, 0.38);
    box-shadow: 0 0 16px rgba(0, 255, 140, 0.5);
}

/* 업무 분석 중 — 작업 중과 구분되게 */
.state-analyzing { background: #e6f0ff; color: #2b62b8; border-color: #c2d8fb; }
.card-ai .state-analyzing,
.list-request .state-analyzing,
.list-working .state-analyzing,
.list-aidone .state-analyzing {
    background: rgba(140, 190, 255, 0.2); color: #cfe3ff; border-color: rgba(140, 190, 255, 0.55);
}
.ai-tone .state-now.state-analyzing {
    background: rgba(140, 190, 255, 0.18); color: #cfe3ff; border-color: rgba(140, 190, 255, 0.5);
}

/* ── 스크롤바 ────────────────────────────────────────
   얇게, 손잡이만, 가장자리에 바짝. 트랙을 없애 스크롤이 없을 땐 흔적도 없다.
   크롬 계열은 scrollbar-width 가 지정되면 세부 스타일을 무시하므로
   브라우저별로 갈라서 적용한다. */

/* 파이어폭스 등 — 표준 속성만 지원 */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: rgba(90, 120, 160, 0.35) transparent; }
    .board { scrollbar-color: rgba(255, 255, 255, 0.4) transparent; }
    .ai-tone *, .list-request *, .list-working *, .card-ai *,
    .ai-tone *, .list-request *, .list-aidone *, .card-ai * {
        scrollbar-color: rgba(0, 255, 140, 0.35) transparent;
    }
}

/* 크롬·엣지·삼성인터넷 — 직접 그린다 */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
    ::-webkit-scrollbar-thumb {
        background: rgba(90, 120, 160, 0.3);
        border-radius: 99px;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(60, 95, 145, 0.55); }

    /* 보드 아래 가로 막대는 배경이 어두워 밝은 손잡이로 */
    .board::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); }
    .board::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.65); }

    /* 다크·네온 영역은 초록 손잡이로 */
    .ai-tone ::-webkit-scrollbar-thumb,
    .list-request ::-webkit-scrollbar-thumb,
    .list-working ::-webkit-scrollbar-thumb,
    .list-aidone ::-webkit-scrollbar-thumb,
    .card-ai::-webkit-scrollbar-thumb {
        background: rgba(0, 255, 140, 0.32);
    }
    .ai-tone ::-webkit-scrollbar-thumb:hover,
    .list-request ::-webkit-scrollbar-thumb:hover,
    .list-working ::-webkit-scrollbar-thumb:hover,
    .list-aidone ::-webkit-scrollbar-thumb:hover,
    .card-ai::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 255, 140, 0.62);
    }
}


/* ── 카드 첨부 이미지 ── */
.img-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.img-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel);
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-del {
    position: absolute;
    top: 2px; right: 2px;
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.img-del:hover { background: #d64545; }
/* 눈에 잘 띄라고 흐린 회색 대신 본문 색과 옅은 바탕을 준다 */
.img-add {
    align-self: flex-start;
    background: rgba(63, 140, 255, 0.07);
    border: 1px dashed rgba(63, 140, 255, 0.5);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}
.img-add:hover {
    color: var(--accent); border-color: var(--accent);
    background: rgba(63, 140, 255, 0.16);
}
.img-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* 붙여넣기 안내 — 평소에는 흐린 안내, 무슨 일이 일어나면 잠깐 밝아진다 */
.paste-hint.paste-hint-on { color: var(--accent); }
.ai-tone .paste-hint.paste-hint-on { color: #3ee394; }
.ai-tone .img-thumb { background: rgba(8, 19, 14, 0.82); border-color: rgba(0, 255, 140, 0.25); }
.ai-tone .img-add {
    border-color: rgba(0, 255, 140, 0.6);
    color: #b6ffd9;
    background: rgba(0, 255, 140, 0.1);
}
.ai-tone .img-add:hover {
    color: #eafff4; border-color: #3ee394; background: rgba(0, 255, 140, 0.24);
    box-shadow: 0 0 10px rgba(0, 255, 140, 0.25);
}

/* ── 이미지 편집기 ── */
.img-editor-body { width: min(760px, 94vw); }
.img-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.img-tool {
    background: rgba(0, 255, 140, 0.08);
    border: 1px solid rgba(0, 255, 140, 0.28);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: #7fc4a4;
    cursor: pointer;
}
.img-tool:hover { background: rgba(0, 255, 140, 0.18); color: #d6ffe9; }
.img-tool.active {
    background: rgba(0, 255, 140, 0.24);
    border-color: #3ee394;
    color: #eafff5;
}
.img-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 255, 140, 0.22);
    border-radius: 10px;
    padding: 6px;
    overflow: auto;
    max-height: 58dvh;
    scrollbar-gutter: stable;
}
#img-canvas {
    max-width: 100%;
    max-height: 56dvh;
    touch-action: none;      /* 그리는 중 화면이 밀리지 않게 */
    cursor: crosshair;
    display: block;
}

/* ── 아래 고정 영역은 작고 조용하게 ──────────────────
   화면 크기와 무관하게 작게 유지한다. 큰 화면(폴드 펼침 등)에서도
   버튼이 본문을 가리면 안 된다. */
.modal-body.pinned .followup-row {
    gap: 4px;
    padding-top: 7px;
    margin-top: 0;
}
.modal-body.pinned .followup-btns { gap: 5px; }
.modal-body.pinned .followup-btn {
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 첫 줄에 테스트·빌드, 둘째 줄에 병합·닫기 */
.modal-body.pinned .followup-btn[data-kind="test"],
.modal-body.pinned .followup-btn[data-kind="build"] { flex: 1 1 calc(50% - 3px); }
.modal-body.pinned .followup-btn[data-kind="merge"] { flex: 1 1 auto; }
/* 이름이 길면 잘라내지 말고 두 줄로 — 무슨 버튼인지 다 보여야 한다 */
.modal-body.pinned .followup-btn {
    white-space: normal;
    text-overflow: clip;
    line-height: 1.3;
}
/* 병합은 업무를 끝내는 버튼이라 한 단계 밝게 */
.followup-btn[data-kind="merge"] {
    background: rgba(0, 255, 140, 0.32);
    border-color: #7dffc0;
    color: #eafff5;
    box-shadow: 0 0 12px rgba(0, 255, 140, 0.3);
}
.followup-btn[data-kind="merge"]:hover {
    background: rgba(0, 255, 140, 0.48);
    border-color: #d6ffe9;
    box-shadow: 0 0 20px rgba(0, 255, 140, 0.6);
}
.modal-body.pinned .modal-actions { margin-top: 4px; gap: 5px; }
.modal-body.pinned .modal-actions button,
.modal-body.pinned .modal-actions .primary,
.modal-body.pinned .modal-actions .danger {
    padding: 5px 11px;
    font-size: 11px;
}
.modal-body.pinned #modal-feedback {
    min-height: 38px;
    padding: 6px 9px;
    font-size: 13px;
}
.modal-body.pinned .field-label { font-size: 11px; }
/* 버튼 이름만으로 충분하다 — 설명 줄은 툴팁으로 충분 */
.modal-body.pinned .followup-hint { display: none; }
/* 상태 표시도 한 줄로 */
.modal-body.pinned .state-hint { font-size: 10px; }

@media (max-width: 640px) {
    .modal-body { --pad-x: 13px; padding: 15px var(--pad-x); }
    .modal-body.pinned { max-height: min(92vh, 92dvh, var(--vvh, 100vh)); }
    .modal-body.pinned .followup-btn { padding: 5px 7px; font-size: 10.5px; }
    .modal-body.pinned .modal-actions button,
    .modal-body.pinned .modal-actions .primary,
    .modal-body.pinned .modal-actions .danger { padding: 5px 9px; font-size: 10.5px; }
    .modal-body.pinned #modal-feedback { min-height: 34px; font-size: 12.5px; }
    .img-tool { padding: 5px 9px; font-size: 11px; }
    .img-thumb { width: 68px; height: 68px; }
}

/* 받을 수 없는 리스트 위로 카드를 끌면 알려준다 */
.list.no-drop { outline: 2px dashed rgba(255, 120, 120, 0.6); outline-offset: -3px; }
.list.no-drop::after {
    content: "손으로 옮길 수 없습니다";
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    background: rgba(180, 40, 40, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    pointer-events: none;
    z-index: 5;
}

.mark-hint { color: var(--text-dim); font-size: 11px; align-self: center; margin-right: auto; }

/* 키보드가 올라와 화면이 짧아지면(브라우저가 화면을 줄여줄 때 포함)
   창을 통째로 밀어 볼 수 있게 푼다. 그러지 않으면 아래 버튼이 잘려 닿지 않는다 */
@media (max-height: 560px) {
    .modal-body.pinned {
        max-height: none;
        overflow: visible;
    }
    .modal-body.pinned .modal-scroll {
        overflow: visible;
        min-height: 0;
    }
    .modal { align-items: flex-start; }
}

/* 위에서 쓸어내려 새로고침 */
.pull-refresh {
    position: fixed;
    top: -40px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 90;
    padding: 6px 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(30, 60, 110, 0.18);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.pull-refresh.show { opacity: 1; }
.pull-refresh.ready { color: var(--accent); border-color: #a9ccff; }

/* 스크롤 영역 안의 칸이 눌려 글이 잘리지 않게 —
   자리가 모자라면 줄어들지 말고 창이 스크롤되게 한다 */
.modal-body.pinned .modal-scroll > *,
.modal-body.pinned .ai-section > *,
.modal-body.pinned .ai-block > *,
.modal-body.pinned .ai-field > *,
.ai-compose .modal-scroll > *,
.ai-compose .ai-field > * { flex-shrink: 0; }
.modal-body textarea, .modal-body input[type="text"] { flex-shrink: 0; }

/* 접었다 펴는 항목 — 눌러서 여닫는다는 게 보이도록 한 줄짜리 머리글 */
.ai-block-title.foldable {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    cursor: pointer;
    text-align: left;
}
.ai-block-title.foldable:hover { color: var(--text); border-color: var(--accent); }
.ai-block-title.foldable::after {          /* 오른쪽 끝에 상태를 한 번 더 */
    content: "펼치기";
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.7;
}
.ai-block:not(.folded) > .ai-block-title.foldable::after { content: "접기"; }
.fold-arrow {
    font-size: 10px;
    line-height: 1;
    opacity: 0.9;
    transition: transform 0.15s;
}
.ai-block.folded .fold-arrow { transform: rotate(-90deg); }
.ai-block.folded .ai-block-body,
.ai-block.folded .fold-body,
.ai-block.folded .qna-list,
.ai-block.folded .qna-log { display: none; }
.fold-body { display: flex; flex-direction: column; gap: 6px; }

.ai-tone .ai-block-title.foldable {
    background: rgba(0, 255, 140, 0.07);
    border-color: rgba(0, 255, 140, 0.25);
    color: #7fc4a4;
}
.ai-tone .ai-block-title.foldable:hover {
    background: rgba(0, 255, 140, 0.16);
    border-color: #3ee394;
    color: #d6ffe9;
}


/* 작업 브랜치 이름 */
.branch-row { display: flex; flex-direction: column; gap: 4px; }
.branch-line {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px 6px 10px;
}
.branch-line code {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.branch-line code::-webkit-scrollbar { display: none; }
.branch-copy {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text-dim);
    cursor: pointer;
}
.branch-copy:hover { color: var(--text); border-color: var(--accent); }
.ai-tone .branch-line {
    background: rgba(8, 19, 14, 0.82);
    border-color: rgba(0, 255, 140, 0.25);
}
.ai-tone .branch-line code { color: #9fffcd; }
/* 아직 브랜치가 없을 때 — 이름이 아니라 안내라는 게 보이게 */
.branch-line code.ai-empty { color: var(--text-dim); font-style: italic; }
.ai-tone .branch-line code.ai-empty { color: #4f8a6d; }
.ai-tone .branch-copy { border-color: rgba(0, 255, 140, 0.3); color: #7fc4a4; }
.ai-tone .branch-copy:hover {
    color: #d6ffe9; border-color: #3ee394; background: rgba(0, 255, 140, 0.12);
}

/* AI가 올린 그림 표시 */
.img-thumb.from-ai { border-color: rgba(0, 255, 140, 0.5); }
.img-by-ai {
    position: absolute;
    left: 3px;
    bottom: 3px;
    font-size: 11px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 99px;
    padding: 2px 5px;
    pointer-events: none;
}

/* 손볼 게 남은 카드 — 게임의 레드닷처럼 오른쪽 위에 */
.card.attn { position: relative; }
/* 배지가 오른쪽 끝까지 차면 점에 가린다 — 그만큼 자리를 비워 둔다 */
.card.attn .badge-row { padding-right: 20px; }
.card.attn > .card-date { margin-right: 16px; }
/* .card-ai > * 규칙이 position 을 되돌려놓아 선택자를 맞춰준다 */
.card > .attn-dot {
    display: block;
    position: absolute;
    /* AI 카드는 코드 레인 때문에 overflow:hidden 이라 밖으로 내면 잘린다 — 안쪽에 붙인다 */
    top: 6px;
    right: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff3b30;
    border: 2px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.7);
    pointer-events: auto;
    z-index: 3;
    animation: attn-pulse 1.8s ease-in-out infinite;
}
.list-request .attn-dot,
.list-working .attn-dot,
.list-aidone .attn-dot,
.card-ai .attn-dot { border-color: #0e2118; }
@keyframes attn-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 8px rgba(255, 59, 48, 0.7); }
    50%      { transform: scale(1.18); box-shadow: 0 0 14px rgba(255, 59, 48, 0.95); }
}

/* ── 창 닫기 버튼 — 어느 창에서든 오른쪽 위 같은 자리 ── */
/* 창 오른쪽 위 닫기 — 바탕이 흰 창에서는 흰 동그라미가 보이지 않았다.
   살짝 눌린 회색으로 채우고 테두리를 진하게 해서 버튼처럼 보이게 한다. */
.modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ccd7e6;
    background: linear-gradient(180deg, #ffffff, #e9eef6);
    color: #55657c;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(30, 50, 80, 0.12);
    transition: background 0.16s, border-color 0.16s, color 0.16s,
                box-shadow 0.16s, transform 0.12s;
}
.modal-x:hover {
    background: linear-gradient(180deg, #fff2f2, #ffdede);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: 0 2px 9px rgba(255, 107, 107, 0.3);
}
.modal-x:active { transform: scale(0.92); }
/* AI 톤 창에서는 초록 유리알로 (리스트 접기 버튼과 같은 결) */
.ai-tone .modal-x {
    position: absolute;   /* .ai-tone > * 규칙이 relative 로 끌어내리지 않게 */
    background:
        radial-gradient(115% 115% at 50% 0%,
                        rgba(0, 255, 140, 0.22), rgba(0, 255, 140, 0.04) 62%),
        rgba(7, 22, 16, 0.88);
    border-color: rgba(0, 255, 140, 0.42);
    color: #a8ffd4;
    box-shadow: inset 0 1px 0 rgba(190, 255, 225, 0.2),
                0 0 10px rgba(0, 255, 140, 0.16);
}
.ai-tone .modal-x:hover {
    background: rgba(255, 90, 90, 0.22);
    border-color: #ff8a8a;
    color: #ffd6d6;
    box-shadow: 0 0 12px rgba(255, 120, 120, 0.35);
}
/* 제목이 버튼과 겹치지 않게 */
.modal-body > h3 { padding-right: 40px; }

/* 내용·메모 칸도 글자 높이에 맞춘다 — 아래에 빈 칸을 남기지 않는다 */
#modal-card-title, #modal-card-descr {
    resize: none;
    overflow-y: hidden;
    field-sizing: content;
    min-height: 3.4em;          /* 비어 있어도 두 줄만큼은 잡아 둔다 */
}

/* ── 'AI 작업 중' — 리스트가 아니라 공장 한 채 ── */
.list.factory-mode {
    width: 300px;
    min-width: 300px;
    /* 상자·테두리·흐르는 링 없이 그림만 놓인다.
       테두리는 지우지 않고 투명하게 둔다 — 없애면 1px 만큼 위로 붙어
       옆 리스트의 개수 배지와 줄이 어긋난다 */
    background: none;
    border-color: transparent;
    box-shadow: none;
}
.list-working.factory-mode::before,
.list-working.factory-mode::after,
.list-aidone.factory-mode::before,
.list-aidone.factory-mode::after { content: none; }
/* 머리글에는 ⠿ 손잡이와 개수 배지만 — 배지는 다른 리스트와 같은 것을 쓴다.
   같은 자리에 같은 높이로 놓여야 보드 위에서 줄이 맞는다. */
.list.factory-mode .list-header {
    justify-content: space-between;
    /* 위 여백은 다른 리스트와 같게 둔다 — 개수 배지가 한 줄로 맞아야 한다 */
    padding: 12px 10px 6px;
    position: relative;
    /* AI 리스트는 자식이 모두 z-index:1 이라 나중에 놓인 공장이 이긴다.
       배지는 그보다 위에 있어야 그림에 가리지 않는다 */
    z-index: 2;
}
.list.factory-mode .list-header { display: none; }
.list.factory-mode .drag-handle { opacity: 0.45; }
.list.factory-mode .drag-handle:hover { opacity: 1; }

/* 접으면 카드와 그 아래 것들은 감춘다 — 개수만 알면 된다 */
/* 공장으로 보여주는 리스트에는 카드도 작성기도 늘어놓지 않는다 */
.list.factory-mode .cards,
.list.factory-mode .add-card,
.list.factory-mode .composer,
.list.factory-mode .guide-bar { display: none; }

/* ── 첨부 이미지 크게 보기 ── */
.img-view-body {
    width: min(94vw, 1100px);
    max-width: 94vw;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.img-view-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    padding: 6px;
    min-height: 120px;
}
.img-view-stage img {
    max-width: 100%;
    max-height: min(72vh, 760px);
    object-fit: contain;
    border-radius: 6px;
}
.img-view-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 54px;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 140, 0.3);
    background: rgba(6, 14, 10, 0.72);
    color: #b9ffd9;
    font-size: 24px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
}
.img-view-nav:hover { background: rgba(0, 255, 140, 0.18); border-color: #3ee394; }
#img-view-prev { left: 8px; }
#img-view-next { right: 8px; }

/* ── 테스트 환경이 무효가 됐다는 안내 ── */
.stale-note {
    border: 1px solid #ffd9a0;
    background: #fff7e8;
    color: #8a5a00;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
}
.ai-tone .stale-note {
    border-color: rgba(255, 199, 60, 0.5);
    background: rgba(255, 199, 60, 0.1);
    color: #ffd85c;
}
/* 테스트 환경 만료 — 카드 맨 위에 붉게. 놓치면 헛일을 하게 되는 정보다 */
.card-stale-flag {
    display: block;
    margin: -2px 0 6px;
    padding: 4px 8px;
    border-radius: 7px;
    background: linear-gradient(180deg, #ff5c5c, #e01f1f);
    border: 1px solid #ff9a9a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.35;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px rgba(255, 60, 60, 0.45);
}

/* 사장실(위)·개발실(아래)을 세로로 쌓는 기둥 — 시안의 왼쪽 배치 그대로 */
.room-column {
    display: flex;
    flex-direction: column;
    gap: 7px;                  /* 두 방 사이를 절반으로 (아래 room-plate 여백과 합쳐 16px) */
    width: 300px;
    min-width: 300px;
    align-self: flex-start;
}
.room-column .list { width: 100%; min-width: 100%; }

/* ── 개발실·사장실 — 방 그림 위에 사람을 겹친다 ── */
.room-plate {
    position: relative;
    display: block;
    width: calc(100% - 12px);
    /* 위 여백은 0 — 머리글이 감춰져 있어서 이 그림이 이 기둥의 첫 줄이다.
       여백을 두면 그만큼 옆 리스트들보다 아래에서 시작해 윗선이 어긋난다 */
    margin: 0 6px 10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;               /* 그림 밑 글자 여백 제거 */
    transition: transform 0.14s ease;
}
.room-plate:hover { transform: translateY(-2px); }
.room-plate:active { transform: translateY(0) scale(0.985); }
/* 사장실과 개발실 사이만 절반으로 (32px → 16px).
   기둥 간격 7 + 위 방의 아래 여백 5 + 아래 방의 위 여백 4. */
.room-column .list:not(:last-child) .room-plate { margin-bottom: 5px; }
.room-column .list + .list .room-plate { margin-top: 4px; }
.room-bg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.room-sprite {
    position: absolute;
    height: auto;
    pointer-events: none;
}
/* 개수 — 방 그림 안 오른쪽 위. 리스트 머리글의 노란 배지와 같은 모양 */
.room-count {
    position: absolute;
    top: 6px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 23px;
    height: 21px;
    padding: 0 7px 1px;
    background: #e8c25c;
    color: #584608;
    /* 테두리는 어둡게 — 노란 테두리는 밝은 방 그림에 묻혀 경계가 안 보였다 */
    border: 1px solid rgba(28, 20, 2, 0.85);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* 방 이름표 — 목업의 말풍선 같은 자리 */
.room-tag {
    position: absolute;
    top: 6px;
    left: 8px;
    padding: 3px 10px;
    border-radius: 99px;
    background: rgba(20, 26, 34, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

/* ── 지금 도는 업무 목록 ── */
.working-body { width: min(520px, 94vw); }
.working-list {
    display: flex;
    flex-direction: column;
    /* 업무가 여러 줄이면 아래 업무와 그대로 이어져 보였다 — 사이를 넉넉히 벌린다 */
    gap: 14px;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    /* 왼쪽 색 띠가 목록 가장자리에 딱 붙지 않게 */
    padding: 2px 2px 2px 3px;
}
.working-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 11px 13px;
    border-radius: 12px;
    /* 모달 바탕(#060b08)보다 한 단계 밝게 + 테두리를 또렷하게.
       거의 불투명하게 둬야 뒤로 흐르는 코드 레인에 칸 경계가 묻히지 않는다 */
    border: 1px solid rgba(0, 255, 140, 0.5);
    /* 글이 길어져도 어디서 시작하는지 보이도록 왼쪽에 세로 색 띠 */
    border-left: 4px solid #3ee394;
    background: rgba(24, 45, 35, 0.98);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #d6ffe9;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.working-row:hover {
    border-color: #3ee394;
    background: rgba(0, 255, 140, 0.16);
}
.working-row:active { transform: scale(0.99); }
.working-row-title {
    font-weight: 600;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
/* align-items 를 주지 않으면 작은 알약이 가장 큰 알약(업무 유형) 높이만큼 늘어나고
   글자는 그대로 위에 남아 위로 치우쳐 보인다. 각자 제 높이를 쓰고 줄 가운데에 선다 */
.working-row-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.working-chip {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 99px;
    border: 1px solid rgba(0, 255, 140, 0.3);
    color: #7fc4a4;
    white-space: nowrap;
}
.working-chip.chip-state { border-color: rgba(255, 199, 60, 0.5); color: #ffd85c; }
.working-chip.chip-provider { border-color: rgba(62, 227, 148, 0.55); color: #9dffce; font-weight: 700; }
.working-chip.chip-branch { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* 이번 회차의 업무 유형 — 목록에서 가장 먼저 눈에 들어와야 한다 */
.working-chip.chip-tasktype {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    background: rgba(180, 150, 255, 0.22);
    border-color: rgba(180, 150, 255, 0.6);
    color: #ddccff;
}
/* main 을 건드리는 회차(병합·빌드)는 더 튀게 — 잘못 돌면 되돌리기 어렵다 */
.working-chip.chip-tasktype.risky {
    background: rgba(255, 150, 90, 0.24);
    border-color: rgba(255, 150, 90, 0.75);
    color: #ffd0b3;
    animation: working-risky-pulse 1.8s ease-in-out infinite;
}
@keyframes working-risky-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 150, 90, 0); }
    50%      { box-shadow: 0 0 10px rgba(255, 150, 90, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .working-chip.chip-tasktype.risky { animation: none; }
}
.working-empty { color: #6b9d86; font-size: 13px; margin: 6px 0 2px; }

/* ── 내가 확인해줘야 하는 카드의 키워드 — 쨍한 빨강 ──
   확인 요청(review)·막힘(blocked)·답변 필요는 놓치면 그대로 멈춰 있는
   것들이다. 다른 배지와 같은 톤으로 두면 줄 속에 묻힌다. */
.state-badge.state-review,
.state-badge.state-blocked,
.state-badge.badge-question,
.card-ai .badge-question,
.list-request .badge-question,
.ai-tone .state-now.state-blocked,
.ai-tone .state-now.state-review {
    background: linear-gradient(180deg, #ff5c5c, #e01f1f);
    border-color: #ff9a9a;
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px rgba(255, 60, 60, 0.45);
}

/* ── 폰 알림 토글 ── */
.push-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
}
.push-toggle input { width: 16px; height: 16px; }
.push-state { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.push-test {
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-dim);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}
.push-test:hover { border-color: var(--accent); color: var(--text); }