/* PurePost — 따뜻한 크림색 편집 스타일 (참고: ElevenLabs 스타일 / transitions.dev)
   원칙: 순백 대신 Eggshell, 그림자 대신 1px 헤어라인, 알약 버튼, 20px 카드, 짧고 부드러운 전환 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ===== 디자인 토큰 (2026-10-26 디자인 최종 점검) =====
   색·크기·모서리·글자·움직임 값은 여기에만 둔다. 아래 규칙은 모두 var(--…) 로 쓴다.
   회사 전용 색·글꼴이 생기면 이 블록의 값만 바꾸면 화면 전체에 적용된다. */
:root {
  /* 바탕·선·글자 (무채색) */
  --white: #ffffff;
  --eggshell: #fdfcfc;        /* 화면 바탕 */
  --taupe: #f5f3f1;           /* 카드 바탕 */
  --taupe-deep: #ece9e5;      /* 마우스 올림·옅은 채움 */
  --stone: #ebe8e4;           /* 헤어라인 */
  --line-strong: #d9d4cc;     /* 진한 선(점선 테두리·마우스 올린 테두리) */
  --ink: #0a0a0a;             /* 제목·본문·주요 단추 */
  --primary-dark: #2b2a28;    /* 주요 단추 마우스 올림 */
  --graphite: #44403b;        /* 보조 글자 */
  --smoke: #6b665f;           /* 안내 글: 모든 바탕에서 대비 4.5:1 이상 */
  --ash: #a59f97;             /* 선·장식·비활성 전용 (글자에는 쓰지 않음) */
  --accent: #0447ff;          /* 포인트. 아주 제한적으로 */
  /* 뜻이 있는 색 */
  --ok: #1b6e45; --ok-soft: #e4f3ea; --ok-line: #bfe3cd;
  --warn: #8a5200; --warn-soft: #fbf0dc; --warn-line: #ecd9ae; --warn-ink: #7a5410;
  --gold: #c9a24a; --gold-bright: #e3c25a; --gold-soft: #fff8e1;   /* AI·진행 중 표시 */
  --danger: #b3261e; --danger-dark: #962019; --danger-soft: #f9e5e3; --danger-line: #efc9c5;
  --hl: #fff1a8; --hl-line: #f3dc6a;                              /* 찾은 글자 칠하기 */
  /* 검정 바탕(메뉴 선택·진행 표시줄) 위 글자 */
  --on-dark-muted: #b8b2aa; --on-dark-gold: #ffd96b; --on-dark-danger: #ff9a94; --on-dark-ok: #7fd8a6;
  --spark: #ff4704;                                                /* 로그인 그림 장식 */
  /* 예전 이름(별칭) */
  --bg: var(--eggshell); --panel: var(--eggshell); --line: var(--stone); --text: var(--ink); --muted: var(--smoke);
  --primary: var(--ink); --primary-soft: var(--taupe);
  /* 높이: 큰 단추 52 / 보통 단추·입력칸 44 / 작은 단추 32 / 칩 36 / 배지 24 / 휴대폰 누르는 최소 44 */
  --h-lg: 52px; --h-md: 44px; --h-sm: 32px; --h-chip: 36px; --h-badge: 24px; --h-tap: 44px;
  /* 모서리 */
  --r-xs: 4px; --r-sm: 8px; --r-input: 10px; --r-box: 14px; --r-card: 20px; --r-pill: 9999px;
  /* 글자 크기 단계 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px;
  /* 움직임: 짧게 0.15 / 보통 0.2 / 크게 0.3초, 곡선 두 가지 */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s; --dur: .2s; --dur-slow: .3s;
  /* 글꼴 */
  --font: "Pretendard Variable", Pretendard, "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-latin: Inter, var(--font);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
html { scrollbar-gutter: stable; } /* 세로 스크롤 막대 자리를 늘 비워 둠 → 막대가 생기고 없어질 때 화면 전체가 좌우로 밀리지 않음 (2026-11-03 사용자: 쪽을 넘길 때 목록이 왼쪽으로 갔다 오른쪽으로) */
body {
  font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55;
  letter-spacing: .005em; -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; /* 2026-10-14: 한글이 "누/르세요"처럼 낱말 중간에서 꺾이지 않게. 넘칠 때만 낱말 중간에서 (anywhere는 표 칸을 지나치게 줄여서 안 씀) */
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--stone); }

/* ---------- 레이아웃 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: 0 0 236px; background: var(--taupe); color: var(--graphite); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 24px 16px 16px; position: sticky; top: 0; height: 100vh;
  z-index: 10; /* 메뉴 말풍선(.nav-tip)이 오른쪽 본문 위로 나오게 (2026-10-15) */
}
/* 왼쪽 위 로고 = 홈 링크. 마우스를 올리면 영역이 살짝 떠오르고, 로고가 기울며 테두리 고리가 생기고, 오른쪽 빈자리에 집 모양이 들어온다
   (2026-10-13 사용자: 밑줄보다 효과 있게, 글씨는 침범하지 않게 → 모든 효과는 글씨 바깥 여백·로고 안에서만 움직인다) */
.brand { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 36px 8px 8px; margin: -8px -16px 16px -8px; color: inherit; text-decoration: none; border-radius: var(--r-box);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.brand::after { content: ""; position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; opacity: 0; transform: translate(-8px, -50%);
  transition: opacity .2s var(--ease), transform .3s var(--ease-out);
  background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") center / contain no-repeat; }
a.brand:hover, a.brand:focus-visible { background: var(--eggshell); box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
a.brand:hover::after, a.brand:focus-visible::after { opacity: .75; transform: translate(0, -50%); }
a.brand:hover .brand-logo, a.brand:focus-visible .brand-logo { transform: rotate(-10deg) scale(1.04); box-shadow: 0 0 0 3px var(--eggshell), 0 0 0 4.5px var(--ink); }
a.brand:active { transform: translateY(0) scale(.99); }
a.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.brand-logo {
  width: 34px; height: 34px; border-radius: var(--r-input); background: var(--ink); color: var(--eggshell); flex: none;
  font-weight: 600; font-size: 18px; display: grid; place-items: center; letter-spacing: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .2s var(--ease);
}
.brand-name { color: var(--ink); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.brand-sub { font-size: 12px; color: var(--smoke); white-space: nowrap; }
.nav { display: flex; flex-direction: column; gap: 2px; position: relative; }
.nav a {
  padding: 8px 12px; border-radius: var(--r-pill); font-weight: 500; color: var(--graphite); position: relative; z-index: 1;
  transition: background var(--dur) var(--ease), color var(--dur-slow) var(--ease), transform var(--dur) var(--ease);
}
/* 메뉴 사이를 미끄러지는 검정 알약 (2026-11-03 인터랙션, JS moveNavInd). 넓은 화면에서만 — 좁은 화면은 활성 메뉴 배경색 그대로 */
.nav-ind { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; border-radius: var(--r-pill); background: var(--ink); pointer-events: none; transition: top .32s var(--ease-out), height .32s var(--ease-out); }
.nav-ind.no-anim { transition: none; }
.nav.has-ind a.active, .nav.has-ind a.active:hover { background: transparent; }
.nav a:hover { background: var(--taupe-deep); color: var(--ink); }
.nav a:active { transform: scale(.98); }
.nav a.active { background: var(--ink); color: var(--eggshell); }
.sidebar-foot { margin-top: auto; font-size: 12px; padding: 12px 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; color: var(--smoke); }
.sidebar-foot .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; }
.link-btn { background: none; border: 0; color: var(--graphite); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0 0 0 8px; font-size: 12px; }
.link-btn:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-pill); font-size: 17px; padding: 4px 12px; cursor: pointer; }

.main { flex: 1; min-width: 0; padding: 36px 48px 64px; overflow-anchor: none; } /* 브라우저 스크롤 고정(anchoring) 끔 — 목록 줄을 통째로 바꿀 때(쪽 넘기기) 크롬이 엉뚱한 기준으로 화면을 수백 px 옮기던 것 (2026-11-03 사용자, 2550px 실측 354px) */
.page { animation: page-in .3s var(--ease-out) backwards; } /* backwards: 끝난 뒤 transform·filter가 남아 position:fixed 창(AI·발송 오버레이)을 가두지 않게 (2026-10-14) */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
.page-head p { margin: 8px 0 0; color: var(--smoke); font-size: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 카드 / 통계 ---------- */
.card { background: var(--taupe); border-radius: var(--r-card); padding: 28px 28px; margin-bottom: 16px; }
.card.plain { background: var(--eggshell); border: 1px solid var(--line); }
.card h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.card h2 .step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--eggshell); font-size: 12px; font-weight: 600; margin-right: 8px; vertical-align: -3px; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* minmax(0,…): 칸 안의 넓은 표(발송 기록 기자별 결과)가 칸을 화면 밖으로 밀지 않고 표만 좌우로 넘기게 (2026-10-16) */
.stat { background: var(--taupe); border-radius: var(--r-card); padding: 20px 24px; animation: page-in .3s var(--ease-out) both; }
.stat:nth-child(2) { animation-delay: .04s } .stat:nth-child(3) { animation-delay: .08s } .stat:nth-child(4) { animation-delay: .12s }
.stat .label { color: var(--smoke); font-size: 13px; }
.stat .value { font-size: 34px; font-weight: 300; letter-spacing: -.03em; margin-top: 8px; line-height: 1.1; animation: num-in .3s var(--ease-out) both; }
@keyframes num-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.stat .hint { color: var(--smoke); font-size: 12px; margin-top: 4px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--eggshell); cursor: pointer; font-weight: 500; white-space: nowrap; font-size: 14px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .15s var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--taupe); border-color: var(--line-strong); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--eggshell); }
/* 「✦ 뉴스에서 기자 찾기」 단추 (2026-10-19 사용자: 검정 말고 더 똑똑해 보이게, 위·가운데 같은 모양).
   밝은 크림·연보라·하늘 그라데이션 바탕 + 천천히 흐르는 금색·보라·하늘 테두리 + 반짝이는 금색 ✦. 글자는 진한 색 그대로 */
.btn.ai {
  --ai-g: linear-gradient(115deg, #e9c25a, #b994ff 35%, #6fc4f5 65%, #e9c25a);
  --ai-fill: linear-gradient(120deg, #fff7e2, #f3ecff 50%, #e9f6ff);
  color: var(--ink); font-weight: 600; border: 1.5px solid transparent;
  background: var(--ai-fill) padding-box, var(--ai-g) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: ai-btn-flow 6s linear infinite;
  transition: box-shadow var(--dur) var(--ease), transform .15s var(--ease);
}
.btn.ai:hover { --ai-fill: linear-gradient(120deg, #ffefc4, #e8dcff 50%, #d8efff); background: var(--ai-fill) padding-box, var(--ai-g) border-box; background-size: 100% 100%, 300% 100%; box-shadow: 0 6px 22px rgba(185, 148, 255, .3); }
.btn.ai .disc-spark { color: var(--gold); display: inline-block; animation: ai-spark 2.4s ease-in-out infinite; }
@keyframes ai-btn-flow { to { background-position: 0 0, 300% 0; } }
@keyframes ai-spark { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(20deg); opacity: .75; } }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--taupe-deep); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger-line); }
.btn.sm { padding: 4px 12px; font-size: 13px; }
.btn.lg { padding: 12px 24px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--ash) transparent var(--ash) transparent; animation: spin .8s linear infinite; }
.btn.primary.loading::after { border-color: var(--line-strong) transparent var(--line-strong) transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { border: 0; background: transparent; cursor: pointer; font-size: 15px; padding: 8px 8px; border-radius: var(--r-pill); color: var(--smoke); transition: background var(--dur) var(--ease); }
.icon-btn:hover { background: var(--taupe); color: var(--ink); }

/* ---------- 표 ---------- */
.table-wrap { overflow: auto; border-radius: var(--r-box); background: var(--eggshell); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { color: var(--smoke); font-weight: 500; font-size: 12px; background: var(--eggshell); position: sticky; top: 0; letter-spacing: .01em; }
tbody tr { transition: background var(--dur) var(--ease); }
tbody tr:hover { background: var(--taupe); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 44px 20px; text-align: center; color: var(--smoke); }

/* ---------- 폼 ---------- */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type=search] { flex: 1; min-width: 200px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label { font-weight: 500; font-size: 13px; color: var(--graphite); }
.field .help { color: var(--smoke); font-size: 12px; }
input[type=text], input[type=email], input[type=search], input[type=url], input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 12px 12px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--eggshell);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
input::placeholder, textarea::placeholder { color: var(--ash); }
textarea { min-height: 120px; resize: none; line-height: 1.65; }
textarea.body { min-height: 320px; }
.row { display: flex; gap: 12px; }
.row > .field { flex: 1; }
.checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.checkbox input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ink); }
.checkbox input { width: auto; accent-color: var(--ink); }
input[type=checkbox] { accent-color: var(--ink); }
.shake { animation: shake .3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }

/* ---------- 배지 ---------- */
.badge { display: inline-block; padding: 4px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--taupe-deep); color: var(--graphite); border: 1px solid transparent; white-space: nowrap; }
.badge.svc-공통 { background: var(--taupe-deep); } /* 서비스별 색은 두지 않음 — 서비스 이름은 회사마다 다름 (2026-10-22) */
.badge.st-sent, .badge.st-done { background: var(--ok-soft); color: var(--ok); }
.badge.st-failed { background: var(--danger-soft); color: var(--danger); }
.badge.st-sending, .badge.st-pending { background: var(--warn-soft); color: var(--warn); }
.badge.st-draft { background: var(--taupe-deep); }
.badge.edited { background: var(--warn-soft); color: var(--warn-ink); font-size: 12px; } /* 발송 기록: 직접 고쳐 보낸 기자 (2026-10-20) */
.badge.variant { background: var(--eggshell); border-color: var(--line); font-weight: 600; min-width: 26px; text-align: center; }
.tag { display: inline-block; font-size: 12px; background: var(--eggshell); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; margin-right: 4px; color: var(--graphite); }
.muted { color: var(--smoke); }
.small { font-size: 12px; }
.notice { background: var(--warn-soft); color: var(--warn-ink); padding: 12px 16px; border-radius: var(--r-box); margin-bottom: 16px; font-size: 14px; }
.notice.info { background: var(--taupe); color: var(--graphite); }
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice a { text-decoration: underline; text-underline-offset: 2px; }
hr.hair { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

/* ---------- 메일 보내기 ---------- */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
/* 메일 보내기: 한 화면에 한 단계씩 (2026-10-13 사용자 요청, MBTI 테스트처럼). 상단 단계 표시 + 아래 이전/다음 */ /* --wiz-h 는 JS가 화면 높이에 맞춰 넣는다 */ /* 2026-10-19 사용자: 짧은 단계(5단계 등)의 회색 상자가 화면 가운데로 내려가 「홍보 서비스」 알약과 멀어지던 것 → 모든 단계에서 알약 바로 아래에 붙고, 남는 높이는 상자가 채움(내용은 상자 안 가운데) */
/* AI 작업 중 효과: 입력칸 테두리가 숨 쉬듯 빛나고, 진행 막대·단계 문구·글이 써지는 듯한 줄 */
@keyframes ai-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(227,194,90,.18); } 50% { box-shadow: 0 0 0 7px rgba(227,194,90,.32); } } /* AI 작업 중·보내는 중 덮개(.ai-overlay)가 이 회색 상자 전체를 덮는다 → 높이가 안 변해 내용이 밀리지 않음 */
.ai-overlay { position: absolute; inset: 0; display: block; padding: 24px; border-radius: var(--r-card); background: rgba(253,252,252,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ai-fade .3s var(--ease-out) both; z-index: 5; } /* 2026-10-14 사용자: 회색 내용 상자만 흐리게. 바깥(서비스 알약·진행 트랙)은 busyWhy 로 따로 막음 */ /* 카드 자식 폭 제한(860px) 예외: 덮개는 카드 전체 */
.ai-overlay { border-radius: inherit; } /* 카드와 같은 모서리(좁은 화면 16px) */
.ai-overlay .ai-working { text-align: left; }
.ai-overlay[hidden] { display: none; }
@keyframes ai-fade { from { opacity: 0; } to { opacity: 1; } }
.ai-overlay .ai-working { position: sticky; top: max(16px, calc(50vh - 200px)); margin: 0 auto; width: min(100%, 760px); padding: 28px 32px 28px; border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(20,18,16,.14); } /* 상자가 길어도 창은 화면에 보이는 자리에 붙어 있음 */
.ai-working { margin-top: 16px; padding: 16px 20px; border-radius: var(--r-box); background: linear-gradient(120deg, #fff8e1, #fdfcfc 45%, #fff8e1); background-size: 220% 100%; animation: ai-bg 3s linear infinite; border: 1px solid var(--warn-line); }
@keyframes ai-bg { from { background-position: 0 0; } to { background-position: 220% 0; } }
.ai-working-head { display: flex; align-items: center; gap: 12px; }
.ai-working-head b { font-size: 15px; }
.ai-working-head b.swap { animation: ai-swap .3s var(--ease-out); }
@keyframes ai-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd96b, #c99a1e); box-shadow: 0 0 0 0 rgba(227,194,90,.5); animation: ai-orb 1.6s ease-out infinite; }
@keyframes ai-orb { 0% { box-shadow: 0 0 0 0 rgba(227,194,90,.55); } 100% { box-shadow: 0 0 0 12px rgba(227,194,90,0); } }
@keyframes ai-line-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* 어느 화면에서든 보이는 AI 진행 표시줄 (오른쪽 아래) */
.ai-bar { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--eggshell); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: ai-bar-in .3s var(--ease-out) both; max-width: calc(100% - 44px); }
@keyframes ai-bar-in { from { opacity: 0; transform: translateY(10px) scale(.97); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.ai-bar .thinking i { background: var(--eggshell); }
.ai-bar .muted { color: var(--on-dark-muted); }
.ai-bar-link { color: var(--on-dark-gold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ai-bar.done { background: var(--ok); }
.ai-bar.done .ai-bar-link { color: var(--white); }
.ai-bar.error { background: var(--danger); }
.ai-bar.error .ai-bar-link { color: var(--white); }
.ai-bar-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.ai-bar-x { background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; padding: 0 2px; opacity: .8; }
.ai-bar-text { min-width: 0; } /* 기자 찾기 표시줄의 「결과 보기」 (주소 이동 대신 찾기 창을 엶) */
.ai-bar { transition: bottom var(--dur) var(--ease); } /* 표시줄이 여럿이면 위로 쌓임(stackBars) */
/* 넓은 화면: 진행 표시줄은 왼쪽 메뉴 아래(로그인 정보 위)에 작은 카드로 (2026-10-19 사용자: 오른쪽 아래 표시줄이 메일 보내기의 「다음」 단추에 붙음).
   좁은 화면(메뉴가 위 줄)에서는 예전처럼 화면 아래 (barHost) */
.work-dock { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; }
.work-dock:empty { padding: 0; }
.work-dock + .sidebar-foot { margin-top: 0; }
.work-dock .ai-bar { position: static; max-width: none; width: 100%; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 12px 16px; border-radius: var(--r-box); font-size: 13px; line-height: 1.45; box-shadow: none; }
.work-dock .ai-bar-text { flex: 1 1 140px; }
/* 카드 안 순서 (2026-10-19 사용자): 제목 → 안내 글 → 맨 아래 줄 「진행 보기」(왼쪽)·「중단하기」(오른쪽 끝) — 큰 진행 상자와 같은 자리 */
.work-dock .ai-bar .thinking, .work-dock .ai-bar .ai-bar-check, .work-dock .ai-bar .ai-bar-text { order: 0; }
.work-dock .ai-bar .small.muted { flex-basis: 100%; font-size: 12px; order: 1; }
.work-dock .ai-bar .ai-bar-link { order: 2; }
.work-dock .ai-bar .stop-btn, .work-dock .ai-bar .ai-bar-x { order: 3; margin-left: auto; }
@media (max-width: 800px) { .work-dock { display: none; } }
@media (max-width: 600px) {
  .ai-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-wrap: wrap; font-size: 13px; border-radius: var(--r-box); row-gap: 8px; }
  .ai-bar .muted { display: none; }
  .ai-bar-text { flex: 1 1 calc(100% - 40px); }
}
/* 짧은 단계(1·2·5)의 카드: 안의 내용도 가로·세로 가운데 (MBTI 테스트 화면처럼) */
@keyframes wiz-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
/* 기자 명단: 상태별 보기 칩 (전체 / 발송 가능 / 수신 거부 / 이메일 없음) */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-chips button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--eggshell); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--graphite); transition: all var(--dur) var(--ease); }
.filter-chips button b { font-weight: 600; font-size: 12px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--taupe-deep); color: var(--graphite); }
.filter-chips button:hover { background: var(--taupe-deep); }
.filter-chips button.active { background: var(--ink); border-color: var(--ink); color: var(--eggshell); }
.filter-chips button.active b { background: rgba(255,255,255,.18); color: var(--eggshell); }
.vars { display: flex; gap: 8px; flex-wrap: wrap; }
.vars button { font-size: 12px; padding: 4px 12px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong); background: var(--eggshell); cursor: pointer; color: var(--graphite); transition: background var(--dur) var(--ease); }
.vars button:hover { background: var(--taupe-deep); }
.variant-tabs { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.variant-tabs button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--eggshell); cursor: pointer; font-weight: 600; transition: all var(--dur) var(--ease); }
.variant-tabs button.active { background: var(--ink); color: var(--eggshell); border-color: var(--ink); transform: scale(1.06); }
/* 버전 탭 크게: 글자 동그라미 + "버전" 글씨 (2026-10-14 사용자: A·B 단추가 작아 어느 버전인지 안 보임) */
.variant-tabs button.vt { width: auto; height: 44px; border-radius: var(--r-pill); padding: 0 20px 0 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--graphite); }
.variant-tabs button.vt .vt-letter { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--taupe-deep); color: var(--ink); font-size: 16px; font-weight: 700; font-family: Inter, Pretendard, sans-serif; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.variant-tabs button.vt.active { transform: none; color: var(--eggshell); font-weight: 600; }
.variant-tabs button.vt.active .vt-letter { background: var(--eggshell); color: var(--ink); }
.variant-tabs button.vt:not(.active):hover .vt-letter { background: var(--white); }
.variant-tabs button.add { width: 44px; height: 44px; font-size: 20px; }
.variant-tabs button.add { border-style: dashed; color: var(--smoke); font-weight: 400; }
.variant-tabs button[data-i]:not(.active):hover, .variant-tabs button.add:hover { background: var(--taupe-deep); border-color: var(--line-strong); }
/* "이 버전 삭제": 동그란 탭 모양을 물려받지 않게. 휴지통 아이콘 + 마우스를 올리면 연한 빨강이 왼쪽에서 차오르고 뚜껑이 살짝 들린다 (2026-10-13) */
/* 받을 기자: AI 추천 상자, 묶음 칩, 그룹 머리글, 점수 */
.score.hi { background: var(--ok-soft); color: var(--ok); }
.score.mid { background: var(--warn-soft); color: var(--warn); }
.score.lo { background: var(--taupe-deep); color: var(--smoke); }
.preview { background: var(--eggshell); border: 1px solid var(--line); border-radius: var(--r-box); padding: 20px 20px; white-space: pre-wrap; line-height: 1.75; }
.preview-meta { font-size: 12px; color: var(--smoke); margin-bottom: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 12px; white-space: normal; }
.preview img { max-width: 100%; border-radius: var(--r-input); margin-top: 16px; }
.progress { height: 6px; background: var(--taupe-deep); border-radius: var(--r-pill); overflow: hidden; }
.progress > div { height: 100%; background: var(--ink); transition: width .3s var(--ease); }
.thinking { display: inline-flex; gap: 4px; align-items: center; color: var(--smoke); font-size: 13px; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--smoke); animation: pulse 1s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .15s } .thinking i:nth-child(3) { animation-delay: .3s }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.skeleton { background: linear-gradient(90deg, var(--taupe) 25%, var(--taupe-deep) 37%, var(--taupe) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-input); height: 14px; margin: 8px 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- 모달 / 토스트 ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,18,16,.38); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 95; padding: 20px; animation: fade-in .2s var(--ease) both; } /* 아래 작업 표시줄(.ai-bar 90)보다 위, 토스트(100)보다 아래 — 휴대폰에서 표시줄이 창 단추를 가리던 것 (2026-10-29 점검) */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--eggshell); border-radius: var(--r-card); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border: 1px solid var(--line); animation: modal-in .3s var(--ease-out) both; }
@keyframes modal-in { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.modal.wide { max-width: 940px; }
.modal.wide.sig-modal { max-width: min(1500px, 96vw); } /* 4단계 서명 창: 설정과 같은 편집기(입력·미리보기 두 칸)가 들어가게 넓게 (2026-10-20) */.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--eggshell); z-index: 1; }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-body { padding: 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--eggshell); padding: 12px 20px; border-radius: var(--r-pill); z-index: 100; font-size: 14px; animation: toast-in .3s var(--ease-out) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.96); filter: blur(3px); } to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: none; } }
.toast.error { background: var(--danger); }
.toast.ok { background: var(--ok); }
.toast.warn { background: var(--warn); }
.or { display: flex; align-items: center; gap: 12px; color: var(--smoke); font-size: 12px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- 로그인 ---------- */
body.login-mode .sidebar { display: none; }
body.login-mode .main { max-width: none; display: grid; place-items: center; min-height: 100vh; }

/* ---------- 반응형 ---------- */
@media (max-width: 1200px) { .main { padding: 28px 28px 56px; } .compose { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 1000px) { .compose { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 20; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 4px 40px 4px 4px; margin: 0; flex: 1; }
  .brand-sub { display: none; }
  .nav-toggle { display: inline-block; }
  .nav { display: none; width: 100%; flex-direction: column; padding-top: 8px; border-top: 1px solid var(--line); }
  .nav.open { display: flex; animation: page-in .2s var(--ease-out) both; }
  .sidebar-foot { display: none; }
  .nav.open + .sidebar-foot { display: flex; width: 100%; margin-top: 0; border-top: 0; padding: 8px 12px 0; }
  .main { padding: 20px 16px 48px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head h1 { font-size: 24px; }
  .actions { width: 100%; }
  .actions .btn { flex: 1; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: 16px; }
  .stat .value { font-size: 26px; }
  .card { padding: 20px; border-radius: var(--r-box); }
  .row { flex-direction: column; gap: 0; }
  textarea.body { min-height: 220px; }
  th, td { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .table-wrap table { min-width: 720px; } /* 좁은 화면에서 글자가 세로로 깨지지 않게: 표는 제 폭을 지키고 좌우로 넘겨 본다 */
  .table-wrap td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; } /* 긴 칸(최근 기사 등)은 … 으로 줄임 */
  .table-wrap td:last-child, .table-wrap th:last-child { position: sticky; right: 0; background: var(--eggshell); } /* 상태·버튼 열은 오른쪽에 고정 */
  .save-bar.dirty { margin: 8px -20px -20px; padding: 16px 20px 20px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { max-width: none; max-height: 100vh; border-radius: 22px 22px 0 0; }
  .toolbar input[type=search] { min-width: 0; width: 100%; flex: 1 1 100%; }
  .toast { width: calc(100% - 32px); text-align: center; }
}
@media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Frontend refinement: editorial hierarchy, purposeful motion and accessible controls. */
.sidebar { padding-top: 32px; }
.brand { margin-bottom: 28px; }
.brand-logo { border-radius: 50%; width: 38px; height: 38px; font-weight: 500; }
.brand-name { font-size: 18px; font-weight: 500; }
.nav-caption { font-family: Inter, var(--font); font-size: 12px; letter-spacing: .14em; color: var(--smoke); padding: 0 12px 12px; }
.nav { gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.nav-icon { font-size: 20px; line-height: 1; font-weight: 400; width: 22px; text-align: center; }
.sidebar-foot { overflow-wrap: anywhere; }
.main { padding-top: 48px; }
.page-head { margin-bottom: 32px; align-items: center; }
.page-head h1 { font-size: clamp(28px, 2.7vw, 42px); font-weight: 300; line-height: 1.25; }
.page-head p { line-height: 1.7; margin-top: 12px; }
.eyebrow { font-family: Inter, var(--font); font-size: 12px; letter-spacing: .13em; color: var(--smoke); margin-bottom: 16px; }
.stat { border: 1px solid var(--line); background: var(--eggshell); padding: 24px; }
.stat .value { font-size: 40px; margin: 16px 0 8px; font-variant-numeric: tabular-nums; }
.stat .hint { color: var(--smoke); }
.compose { grid-template-columns:minmax(0, 1fr) minmax(310px, 360px); gap:24px; }
.compose > div:last-child { position:sticky; top:24px; }
.card h2 { font-weight:500; }
.empty b { display:block; font-weight:500; color:var(--graphite); }
.empty p { font-size:13px; margin:8px 0 20px; }
.empty-icon { display:grid; place-items:center; width:44px; height:44px; background:var(--taupe); border-radius:50%; margin:0 auto 16px; font-size:22px; }
/* 빈 상태 카드 (emptyState, 2026-10-19): 한 덩어리로 가운데. 아이콘 → 제목 → 한 줄 안내 → 단추 */
.empty-box { display: flex; flex-direction: column; align-items: center; max-width: 440px; margin: 0 auto; }
.empty-box .empty-icon { width: 56px; height: 56px; margin: 0 0 16px; font-size: 24px; color: var(--graphite); background: var(--taupe); border: 1px solid var(--line); }
.empty-box b { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.empty-box p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--smoke); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.empty-actions .btn { padding: 12px 20px; font-size: 14px; }
.modal-open { overflow:hidden; }
:focus-visible { outline:2px solid var(--graphite); outline-offset:4px; }
[data-quiet-focus]:focus-visible { outline: none; box-shadow: none; } /* 창을 닫고 돌아온 단추 (app.js returnFocusQuietly) */
input[type=checkbox] { width:16px; height:16px; flex-shrink:0; }
.skip-link { position:fixed; left:16px; top:-100px; padding:12px 20px; background:var(--ink); color:var(--eggshell); border-radius:var(--r-pill); z-index:200; }
.skip-link:focus { top:16px; }
.toast { max-width:calc(100vw - 32px); overflow-wrap:anywhere; }
@media (max-width:1200px) { .compose { gap:16px; grid-template-columns:minmax(0,1fr) 320px; } }
@media (max-width:1050px) { .compose { grid-template-columns:1fr; } .compose > div:last-child { position:static; } }
@media (max-width:800px) {
  .sidebar { padding:12px 16px; }
  .brand { padding: 4px 40px 4px 4px; margin: 0; }
  .nav-caption { display:none; }
  .main { padding-top:28px; }
  .page-head h1 { font-size:30px; }
  .stat { padding:20px; }
  .stat .value { font-size:32px; }
  .modal { max-height:90dvh; }
  .btn, .icon-btn { min-height:40px; }
  .variant-tabs button { min-width:40px; min-height:40px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Login: an editorial workspace entrance, with a moving letter illustration. */
body.auth-checking .sidebar { display:none; }
body.auth-checking .main { padding:0; display:grid; place-items:center; min-height:100vh; }
.auth-loader { display:flex; gap:12px; align-items:center; color:var(--smoke); }
.auth-loader-dot { width:9px; height:9px; border-radius:50%; background:var(--ink); animation:pulse 1s ease-in-out infinite; }
body.login-mode .main { display:block; padding:0; min-height:100vh; }
.login-shell { min-height:100dvh; display:grid; grid-template-columns:1.08fr 1fr; padding:16px; gap:16px; }
.login-story { background:var(--taupe); border:1px solid var(--stone); border-radius:var(--r-card); padding:32px 44px 28px; overflow:hidden; display:flex; flex-direction:column; min-width:0; position:relative; }
.login-brand { display:flex; align-items:center; gap:12px; width:fit-content; color:var(--ink); font-family:Inter,var(--font); font-size:22px; letter-spacing:-.035em; }
.login-brand .brand-logo { width:36px; height:36px; font-size:17px; }
.login-brand-tag { font-size:12px; color:var(--smoke); letter-spacing:0; margin-left:2px; align-self:end; padding-bottom:4px; }
.login-story-copy { margin-top:clamp(35px,6vh,80px); position:relative; z-index:2; animation:page-in .6s var(--ease-out) both; }
.login-story-copy .eyebrow { font-size:12px; letter-spacing:.13em; margin-bottom:20px; }
.login-story h2 { font-size:clamp(36px,3.5vw,64px); line-height:1.22; letter-spacing:-.055em; font-weight:300; margin:0 0 20px; }
.login-story-copy p { color:var(--smoke); font-size:15px; line-height:1.9; margin:0; }
.story-art { position:relative; width:100%; max-width:660px; height:360px; min-height:310px; margin:20px auto 8px; flex:1; }
.login-story-foot { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line-strong); padding-top:20px; font-size:12px; color:var(--smoke); }
.login-story-foot b { font-family:Inter,var(--font); font-weight:400; margin-right:4px; color:var(--graphite); }
.login-entry { display:flex; flex-direction:column; min-width:0; padding:24px 40px 20px; }
.login-entry-top, .login-entry-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--smoke); font-size:12px; }
.login-entry-badge { font-family:Inter,var(--font); font-size:12px; letter-spacing:.08em; border:1px solid var(--stone); padding:4px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.login-form-wrap { width:100%; max-width:410px; margin:auto; padding:52px 0; animation:page-in .3s var(--ease-out) both; }
.login-form-wrap .eyebrow { font-size:12px; letter-spacing:.11em; margin-bottom:16px; }
.login-form-wrap h1 { font-size:clamp(30px,2.5vw,42px); font-weight:300; letter-spacing:-.045em; line-height:1.3; margin:0 0 12px; }
.login-lead { color:var(--smoke); font-size:13px; margin:0 0 32px; line-height:1.7; }
.login-form-wrap .field { margin-bottom:20px; gap:8px; }
.login-form-wrap .field label { font-size:12px; }
.login-form-wrap input { min-height:50px; padding:12px 16px; font-size:13px; }
.login-form-wrap input::placeholder { font-size:12px; }
.login-form-wrap .help { font-size:12px; line-height:1.7; }
.login-password-wrap { position:relative; }
.login-password-wrap input { padding-right:64px; }
.password-toggle { position:absolute; top:50%; right:10px; transform:translateY(-50%); border:0; background:transparent; color:var(--smoke); font-size:12px; padding:8px; border-radius:var(--r-pill); cursor:pointer; }
.password-toggle:hover { color:var(--ink); background:var(--taupe); }
.login-submit { width:100%; min-height:50px; margin-top:4px; justify-content:space-between; padding:12px 20px; font-size:13px; }
.login-submit > span:last-child { font-size:20px; }
.login-footnote { color:var(--smoke); text-align:center; font-size:12px; line-height:1.7; margin:16px 0 0; }
.login-error { color:var(--danger); background:var(--danger-soft); padding:12px 16px; border-radius:var(--r-input); font-size:12px; margin-bottom:16px; }
.login-connection-note { color:var(--graphite); background:var(--taupe); border:1px dashed var(--line-strong); padding:12px 16px; font-size:12px; line-height:1.7; border-radius:var(--r-input); margin-bottom:16px; }
.google-login-slot { display:flex; justify-content:center; }
@keyframes story-note-float { 0%,100% { transform:translateY(0) rotate(6deg); } 50% { transform:translateY(-10px) rotate(4deg); } }
@keyframes story-envelope-float { 0%,100% { transform:translateY(0) rotate(-10deg); } 50% { transform:translateY(8px) rotate(-7deg); } }
@keyframes story-turn { to { transform:rotate(360deg); } }
@media (min-width:1600px) { .login-story { padding:40px 64px 32px; } .story-art { max-height:420px; } .login-entry { padding:28px 56px 24px; } }
@media (max-width:1100px) { .login-shell { grid-template-columns:1fr 1fr; gap:8px; padding:12px; } .login-story { padding:28px; } .login-entry { padding:20px 28px; } .login-story h2 { font-size:38px; } .story-art { min-height:300px; } .login-story-foot { flex-wrap:wrap; font-size:12px; } }
@media (max-width:760px) {
  .login-shell { grid-template-columns:1fr; padding:12px; gap:0; }
  .login-story { border-radius:var(--r-card); padding:24px 24px; }
  .login-brand { font-size:20px; }
  .login-story-copy { margin-top:32px; }
  .login-story h2 { font-size:36px; margin-bottom:16px; }
  .login-story-copy p { font-size:12px; }
  .login-story-copy .eyebrow { font-size:12px; }
  .story-art { height:240px; min-height:240px; flex:none; width:100%; max-width:380px; margin:0 auto 12px; }
  .login-story-foot { font-size:12px; gap:8px; padding-top:16px; }
  .login-entry { padding:32px 12px 16px; }
  .login-entry-top { font-size:12px; }
  .login-form-wrap { max-width:440px; padding:32px 0; }
  .login-form-wrap h1 { font-size:32px; }
  .login-entry-foot { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .login-story-copy, .login-form-wrap, .auth-loader-dot { animation:none; } }

/* ---------- 설정 화면 (마케터용 리뉴얼) ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; background: var(--taupe-deep); color: var(--graphite); }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.ok { background: var(--ok-soft); color: var(--ok); }
.status-pill.warn { background: var(--warn-soft); color: var(--warn); }
/* 설정 폼 맨 아래 저장 줄: 왼쪽 상태 문구 + 오른쪽 저장 버튼. 저장 안 한 변경이 있으면 주황으로 */
.save-bar { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; border-radius: 0 0 14px 14px; transition: background var(--dur) var(--ease); }
.save-bar.dirty { background: linear-gradient(180deg, #fffaf0 0%, #fbf3e2 100%); margin: 8px -28px -28px; padding: 16px 28px 24px; border-top-color: var(--warn-line); border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: inset 0 1px 0 var(--white); }
.save-bar .btn.primary { padding: 12px 32px; font-size: 14px; }
.provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
@media (min-width: 1800px) { .provider-grid { grid-template-columns: repeat(6, 1fr); } } /* 큰 화면(사용자 모니터 약 2550px)에서는 메일 서비스 6개를 한 줄에. 1600px 에서는 이름이 꺾여 3열 유지 */
#sf .row { gap: 24px; } /* 메일 주소 칸의 링크와 옆 칸의 라벨이 붙어 보이지 않게 */
.provider { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .15s var(--ease); }
.provider:hover { border-color: var(--line-strong); }
.provider:active { transform: scale(.985); }
.provider input { position: absolute; opacity: 0; width: 0; height: 0; }
.provider.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.provider.active::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--eggshell); font-size: 12px; display: grid; place-items: center; }
.provider-name { font-weight: 600; font-size: 14px; padding-right: 24px; }
.provider-sub { font-size: 12px; color: var(--smoke); }
.guide-box { background: var(--eggshell); border: 1px dashed var(--line-strong); border-radius: var(--r-box); padding: 16px 16px; margin-top: 4px; font-size: 13px; animation: page-in .2s var(--ease-out) both; }
.guide-title { font-weight: 600; margin-bottom: 8px; }
.guide-box ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; color: var(--graphite); }
/* "자세한 설정" 접힘 상자: 누르면 아래로 펼쳐진다는 느낌이 나게 (2026-10-13 사용자 피드백) */
.advanced { border: 1px solid var(--line); border-radius: var(--r-box); padding: 0 16px; margin: 4px 0 8px; background: var(--eggshell); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.advanced:hover { border-color: var(--line-strong); }
.advanced[open] { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--stone); }
.advanced summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-radius: var(--r-box); transition: background var(--dur) var(--ease); user-select: none; }
.advanced summary:hover { background: var(--taupe); }
.advanced[open] summary { border-radius: 14px 14px 0 0; border-bottom: 1px dashed var(--line); background: var(--taupe); }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: none; }
.adv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adv-main b { font-size: 14px; font-weight: 600; }
.adv-sub { font-size: 13px; color: var(--graphite); line-height: 1.5; }
.adv-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.adv-now { font-size: 12px; color: var(--smoke); background: var(--taupe-deep); border-radius: var(--r-pill); padding: 4px 12px; white-space: nowrap; }
.advanced[open] .adv-now { display: none; }
.adv-hint { font-size: 13px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.advanced[open] .adv-open-text, .advanced:not([open]) .adv-close-text { display: none; }
.adv-chevron { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--eggshell); color: var(--ink); transition: transform .3s var(--ease-out), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.adv-chevron svg { display: block; }
.advanced summary:hover .adv-chevron { background: var(--ink); color: var(--eggshell); }
.advanced[open] .adv-chevron { transform: rotate(180deg); }
.advanced > .row { padding-top: 16px; animation: page-in .2s var(--ease-out) both; }
.advanced > .row:last-child { padding-bottom: 16px; }
@media (max-width: 600px) { .adv-now, .adv-hint { display: none; } .adv-sub { white-space: normal; } }
.speed-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.speed { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); cursor: pointer; font-size: 13px; transition: border-color var(--dur) var(--ease); }
.speed input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.speed.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.speed b { font-size: 14px; }
.speed span { color: var(--smoke); }
.scope-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.scope-switch button { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); cursor: pointer; font-size: 13px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.scope-switch button span { color: var(--smoke); }
.scope-switch button.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pw-state-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.pw-state { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.pw-state-row .btn { flex: 0 0 auto; }
.pw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; background: var(--taupe-deep); color: var(--graphite); }
.pw-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pw-chip.ok { background: var(--ok-soft); color: var(--ok); }
.pw-chip.bad { background: var(--danger-soft); color: var(--danger); }
.pw-chip.wait { background: var(--warn-soft); color: var(--warn); }
.pw-chip.none { background: var(--taupe-deep); color: var(--smoke); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; } /* 옆 칸의 라벨 줄(버튼 포함)과 높이를 맞춰 입력칸이 나란히 오게 */
.label-row label { margin: 0; }
/* 앱 비밀번호 칸: 라벨 오른쪽에 "저장됨 · 로그인 확인됨" 상태 + 「로그인 확인」 버튼 (2026-10-13 사용자 요청) */
.pw-label-row { flex-wrap: wrap; }
.pw-label-row .pw-state-row { margin-top: 0; justify-content: flex-end; flex: 1; }
.pw-label-row .pw-state { justify-content: flex-end; }
@media (max-width: 600px) { /* 좁은 화면: 라벨 아래 줄에 왼쪽 정렬로 */
  .pw-label-row .pw-state-row { flex-basis: 100%; justify-content: flex-start; }
  .pw-label-row .pw-state { justify-content: flex-start; }
}
.link-btn.dark { color: var(--graphite); opacity: 1; font-size: 12px; padding: 0; }
.link-btn.dark:hover { color: var(--ink); }
/* 기자 받은편지함 미리보기: 입력칸이 아니라 "화면 흉내"임이 바로 보이게 */
.inbox-preview { margin-top: 12px; user-select: none; cursor: default; }
.inbox-caption { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--smoke); margin-bottom: 8px; }
.inbox-tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--eggshell); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.inbox-window { background: var(--taupe-deep); border-radius: var(--r-box); padding: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); transform: perspective(900px) rotateX(1.5deg); transform-origin: top; }
.inbox-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; }
.inbox-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.inbox-bar span:nth-child(1) { background: var(--danger-line); } .inbox-bar span:nth-child(2) { background: var(--warn-line); } .inbox-bar span:nth-child(3) { background: var(--ok-line); }
.inbox-bar em { font-style: normal; font-size: 12px; color: var(--smoke); margin-left: 8px; }
.inbox-row { display: grid; grid-template-columns: 26px minmax(130px, 200px) 1fr auto; gap: 12px; align-items: center; background: var(--eggshell); padding: 8px 12px; font-size: 13px; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--line); pointer-events: none; }
.inbox-row:first-of-type { border-radius: 8px 8px 0 0; }
.inbox-row:last-child { border-radius: 0 0 8px 8px; border-bottom: 0; }
.inbox-row.dim { opacity: .5; filter: blur(.2px); }
.inbox-row.hot { background: var(--eggshell); box-shadow: inset 3px 0 0 var(--ink); animation: page-in .3s var(--ease-out) both; }
.inbox-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--eggshell); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.inbox-avatar.alt { background: var(--line-strong); color: var(--graphite); }
.inbox-from, .inbox-subject { overflow: hidden; text-overflow: ellipsis; }
.inbox-from { display: flex; flex-direction: column; line-height: 1.25; }
.inbox-addr { font-size: 12px; color: var(--smoke); }
.inbox-time { font-size: 12px; }
@media (max-width: 700px) { .inbox-row { grid-template-columns: 26px 1fr auto; } .inbox-subject { display: none; } }
/* ===== 설정 리뉴얼 (2026-10-14): 준비 점검표 + 번호 카드 ===== */
.status-pill.bad { background: var(--danger-soft); color: var(--danger); }
.ready-board { margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--eggshell); overflow: hidden; }
.ready-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ready-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ready-head b { font-size: 16px; }
.ready-head span:not(.ready-ic) { font-size: 13px; color: var(--smoke); }
.ready-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--white); }
.ready-head > div:not(.ready-side) { flex: 1 1 240px; }
.ready-head .ready-side { flex-direction: row; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.ready-head .ready-count { font-size: 13px; font-weight: 600; color: var(--graphite); background: rgba(255,255,255,.6); padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.ready-head .ready-unsaved-count { font-size: 13px; font-weight: 600; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); padding: 2px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.ready-toggle { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--eggshell); color: var(--ink); cursor: pointer; white-space: nowrap; }
.ready-toggle:hover { background: var(--white); }
.ready-toggle svg { transition: transform .2s var(--ease); }
.ready-board.folded .ready-toggle svg { transform: rotate(180deg); }
.ready-board.folded .ready-list { display: none; }
.ready-board.folded .ready-head { border-bottom: 0; }
.ready-head.ok { background: var(--ok-soft); } .ready-head.ok .ready-ic { background: var(--ok); }
.ready-head.todo { background: var(--warn-soft); } .ready-head.todo .ready-ic { background: var(--warn); }
.ready-list { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: 1fr; gap: 2px; }
.ready-row { width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(150px, 220px) 1fr auto auto; grid-template-areas: "n name desc unsaved mark"; gap: 2px 16px; align-items: center; text-align: left; padding: 12px 12px; border: 1px solid transparent; border-radius: var(--r-box); background: transparent; cursor: pointer; font: inherit; color: inherit; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ready-row:hover { background: var(--taupe); border-color: var(--line); }
.ready-n { grid-area: n; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--eggshell); font-size: 12px; font-weight: 700; }
.ready-row.idle .ready-n { background: var(--taupe-deep); color: var(--graphite); }
.ready-name { grid-area: name; font-weight: 600; font-size: 14px; }
.ready-name em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--smoke); margin-left: 4px; }
.ready-desc { grid-area: desc; font-size: 13px; color: var(--smoke); min-width: 0; overflow-wrap: anywhere; }
.ready-mark { grid-area: mark; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--white); background: var(--line); }
.ready-row.ok .ready-mark { background: var(--ok); }
.ready-row.warn .ready-mark { background: var(--warn); }
.ready-row.bad .ready-mark { background: var(--danger); }
.ready-row.bad .ready-desc { color: var(--danger); }
/* 저장 안 한 카드: 점검표 줄에 금색 "저장 안 됨", 카드 번호 동그라미가 금색으로 빛남 (2026-10-14) */
.ready-unsaved { grid-area: unsaved; display: none; font-size: 12px; font-weight: 600; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.ready-row.unsaved { background: var(--eggshell); border-color: var(--warn-line); }
.ready-row.unsaved .ready-unsaved { display: inline-block; }
.ready-row.unsaved .ready-n, .set-sec.unsaved .set-n { background: var(--gold); color: var(--white); animation: num-glow 1.8s ease-in-out infinite; }
@keyframes num-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,166,63,.55); } 50% { box-shadow: 0 0 0 7px rgba(212,166,63,0); } }
@media (prefers-reduced-motion: reduce) { .ready-row.unsaved .ready-n, .set-sec.unsaved .set-n { animation: none; box-shadow: 0 0 0 3px rgba(212,166,63,.4); } }
.set-sec.unsaved { box-shadow: inset 0 0 0 1px var(--warn-line); }
.sec-guide { flex-basis: 100%; order: 3; font-size: 13px; font-weight: 600; color: var(--warn-ink); }
.set-n.ping { animation: num-ping 1.1s cubic-bezier(.2,.8,.2,1) 2; }
@keyframes num-ping { 0% { box-shadow: 0 0 0 0 rgba(212,166,63,.7); transform: scale(1); } 40% { transform: scale(1.18); } 100% { box-shadow: 0 0 0 14px rgba(212,166,63,0); transform: scale(1); } }
.sec-save { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 20px; }
.sec-save .sec-save-btn:disabled { background: var(--taupe-deep); color: var(--smoke); cursor: default; }
/* 자동 저장 카드(2·3·4·5번, 2026-10-20 사용자): 아래 저장 줄은 아예 없고, 저장된 칸 근처에 잠깐 「✓ 저장되었습니다」(flashSaved) */
.save-bar.auto { display: none !important; }
.saved-anchor { position: relative; }
/* 미리보기 서명: 글자만 바로 고침 (2026-10-20) */
.pv-sig { margin: 0 0 16px; }
.pv-sig-links { display: inline-flex; gap: 12px; }
.pv-sig-links .link-btn { font-size: 12px; padding: 0; }
/* 서명을 바꾸면 어디까지 바뀌는지 안내 (2026-10-20 사용자) */
.sig-shelf-help b { color: var(--graphite); } /* 미리보기 위에 겹쳐 뜨는 서명 보관함 */
.pv-sig-ed { margin: 0 -8px; padding: 4px 8px; border: 1px dashed transparent; border-radius: var(--r-sm); outline: none; cursor: text; transition: border-color .15s, background .15s; }
.pv-sig-ed:hover { border-color: var(--line); background: rgba(0, 0, 0, .02); }
.pv-sig-ed:focus { border-style: solid; border-color: var(--ink); background: var(--white); }
/* 서명 속 이미지 고르기·지우기 도구 (2026-10-20) */
.sig-editor img { cursor: pointer; }
.sig-editor img.sig-img-picked { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs); }
.sig-img-pop { position: absolute; z-index: 30; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white);
  box-shadow: 0 10px 28px rgba(20,18,16,.16); animation: fade-in .15s var(--ease) both; }
.sig-img-pop[hidden] { display: none; }
.sig-img-pop button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.sig-img-pop button:hover { background: var(--taupe); }
.sig-img-pop button.on { background: var(--ink); color: var(--white); }
.sig-img-pop button.danger { color: var(--danger); font-weight: 600; }
.sig-img-pop i { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.sig-img-grip { position: absolute; z-index: 31; width: 14px; height: 14px; border: 2px solid var(--white); border-radius: var(--r-xs); background: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: nwse-resize; touch-action: none; }
.sig-img-grip[hidden] { display: none; }
.saved-flash { position: absolute; z-index: 5; right: 0; top: 0; padding: 2px 12px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok);
  font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(31, 107, 63, .12);
  animation: saved-in .2s cubic-bezier(.34,1.4,.64,1) both; }
.saved-flash.bottom { top: auto; bottom: 10px; right: 12px; }
.saved-flash.leaving { animation: saved-out .3s var(--ease) both; }
@keyframes saved-in { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes saved-out { to { opacity: 0; transform: translateY(-3px); } }
/* 1번만 직접 저장: 비밀번호 칸 바로 오른쪽에 칸과 같은 높이의 단추 (2026-10-20 사용자) */
.pw-line { display: flex; align-items: stretch; gap: 8px; }
.pw-line .pw-wrap { flex: 1 1 auto; min-width: 0; }
.sec-save.acct-save { display: flex; flex: none; margin: 0; padding: 0; border: 0; background: none; }
.sec-save.acct-save .sec-save-btn { height: 100%; min-height: 44px; padding: 0 24px; font-size: 14px; white-space: nowrap; }
.dock-jump { font: inherit; font-size: 12px; font-weight: 600; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--white); cursor: pointer; }
.dock-jump:hover { background: rgba(255,255,255,.18); }
body.dock-on .page { padding-bottom: 112px; }
.save-dock-key { font-size: 12px; font-weight: 500; color: rgba(28,26,23,.55); margin-left: 4px; }
@media (max-width: 600px) { body.dock-on .page { padding-bottom: 152px; } .save-dock-key { display: none; } }
/* 서명 편집기 (2026-10-14): 도구 줄 + 꾸민 모양이 보이는 입력 칸. 입력 칸과 미리보기는 줄 높이가 같다 */
.sig-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.sig-tools button { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-input); background: transparent; color: var(--graphite); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.sig-tools button:hover { background: var(--taupe); border-color: var(--line); }
.sig-tools button:active { transform: translateY(1px); }
.sig-tools button > b, .sig-tools button > i, .sig-tools button > u, .sig-tools button > s, .sig-tools button > span:first-child:not(:only-child) { font-size: 15px; color: var(--ink); }
.sig-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.sig-tools .sig-color { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--eggshell); box-shadow: 0 0 0 1px var(--line); }
.sig-tools .sig-color:hover { background: var(--c); transform: scale(1.12); box-shadow: 0 0 0 2px var(--ink); }
.sig-editor { flex: 1; min-height: 150px; font-family: var(--font); font-size: 15px; line-height: 1.6; padding: 12px 12px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--white); outline: none; overflow-wrap: anywhere; cursor: text; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sig-editor:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
.sig-editor a, .sig-preview-body a { color: inherit; text-decoration: underline; }
#sf .field.is-changed .sig-editor { border-color: var(--gold-bright); background: var(--eggshell); }
.sig-legend { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--warn); }
@media (max-width: 600px) { .sig-tools button span:not(:first-child) { display: none; } .sig-tools button { padding: 0 8px; } }
.set-form { display: contents; }
.set-sec { scroll-margin-top: 90px; }
.set-sec.flash-sec { animation: sec-flash 1.4s var(--ease-out); }
@keyframes sec-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--ink); } 100% { box-shadow: 0 0 0 0 transparent; } }
.set-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.set-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--eggshell); display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.set-n.alt { background: var(--taupe-deep); color: var(--graphite); }
.set-title { flex: 1 1 360px; min-width: 0; }
.set-title h2 { margin: 4px 0 8px; font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-title p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--graphite); }
.set-head > .status-pill { margin-top: 8px; }
.set-q { display: flex; gap: 12px; margin: 24px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.set-q > div { min-width: 0; }
.set-q b { font-size: 15px; }
.set-q p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--smoke); }
.set-q .step-points { margin: 8px 0 0; font-size: 13px; color: var(--smoke); }
.set-qn { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--eggshell); border: 1px solid var(--line); font-size: 12px; font-weight: 700; margin-top: 1px; }
.set-head + .set-q, .scope-switch + .set-q, .notice + .set-q { border-top: 0; padding-top: 0; margin-top: 0; }
.set-note { margin: 12px 0 0; font-size: 13px; color: var(--smoke); }
.speed-step.set-sec .speed-options { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .speed-step.set-sec .speed-options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .set-head { gap: 12px; }
  .set-title { flex-basis: calc(100% - 50px); }
  .set-head > .status-pill { margin: 0 0 0 44px; }
  .ready-head { padding: 16px; }
  .ready-row { grid-template-columns: auto 1fr auto auto; grid-template-areas: "n name unsaved mark" "n desc desc mark"; gap: 2px 8px; }
}
/* 설정 2번: 세 묶음(로그인 정보 / 기자에게 보이는 정보 / 서명) (2026-10-14) */
.req-chip, .opt-chip { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); line-height: 1.6; }
.req-chip { background: var(--ink); color: var(--white); }
.opt-chip { background: var(--taupe); color: var(--smoke); font-weight: 500; }
.pw-why { margin: 4px 0 8px; padding: 12px 16px; border-radius: var(--r-box); background: var(--eggshell); border: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: var(--graphite); }
.pw-why ul { margin: 0; padding-left: 20px; }
.pw-why li { margin: 2px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 설정 1번: 무엇을 고르는 단계인지 설명 + 메일 서비스 자동 확인 (2026-10-14) */
.step-points { padding-left: 20px; }
.step-points li { margin: 2px 0; }
.detect-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 16px; border-radius: var(--r-box); font-size: 13px; line-height: 1.65; background: var(--taupe); color: var(--graphite); animation: page-in .2s var(--ease-out) both; }
.detect-box > div { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.detect-box.ok { background: var(--ok-soft); color: var(--ok); }
.detect-box.unknown, .detect-box.wait { background: var(--eggshell); border: 1px solid var(--line); }
.detect-box.unknown code { background: var(--taupe); }
.detect-box.suggest { background: var(--warn-soft); color: var(--warn-ink); }
.detect-box.suggest .btn { background: var(--eggshell); }
.detect-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: currentColor; }
.detect-box.ok .detect-ic { background: var(--ok); color: var(--white); }
.detect-box.suggest .detect-ic { background: var(--warn); color: var(--white); }
.detect-hints { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0; }
.detect-hints code { font-size: 12px; background: var(--eggshell); padding: 1px 8px; border-radius: var(--r-sm); }
.spin-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--graphite); animation: spin .8s linear infinite; }
.empty-note { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--warn); }
.mismatch { margin-top: 8px; background: var(--warn-soft); color: var(--warn-ink); border-radius: var(--r-box); padding: 12px 12px; font-size: 13px; line-height: 1.6; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; animation: page-in .2s var(--ease-out) both; }
.mismatch .btn { background: var(--eggshell); }
textarea.autogrow { resize: none; overflow: hidden; min-height: 72px; }
/* 메일 보내기: "내용" 한 상자 안에 첫 문단 / 공통 본문 / 기사 초안 세 구간 (2026-10-13). 칩을 누르면 해당 구간이 노랗게 */
.doc { border: 1px solid var(--line); border-radius: var(--r-input); background: var(--eggshell); overflow: hidden; }
.doc:focus-within { border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
/* 읽기 전용 구간(서명·자동 안내문): 설정에서만 바꿈 */
/* 공통 본문 안쪽 구간(기사 초안·서명·수신 거부 안내): 실제 메일에서 들어가는 자리에 끼워 보여 준다 */
/* 4단계 칸 머리의 「바꾸기」 단추 (2026-10-20 사용자: 세련되게) — 흰 알약 + 아이콘, 올리면 검정으로 */
/* 4단계 배포·보도 일시 안내: 글자로 바로 고치는 칸 (2026-10-20) */
/* 4단계 서명 칸: 글자를 눌러 이번 메일에만 바로 고침 (2026-10-20) */ /* 4단계 서명 칸 위 꾸미기 도구 (2026-10-20) */
/* 4단계 서명 머리: 제목 + 큰 「서명 보관함 열기」 단추, 그 아래 안내 줄 (2026-10-20 사용자: 처음 쓰는 사람도 알게) */
/* 날짜 고르기 창: 확인 창(cdlg) 층이라 미리보기 위에도 뜸 */
.cdlg.relm-dlg { max-width: 600px; text-align: left; }
.cdlg.relm-dlg h3 { margin: 0 0 16px; }
.cdlg.relm-dlg .help { margin-top: 12px; }
/* 기사 초안 첨부 파일 줄 */
.seg-pick { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--eggshell); padding: 2px; position: relative; isolation: isolate; }
.seg-pick button { font: inherit; font-size: 13px; padding: 4px 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--graphite); cursor: pointer; white-space: nowrap; position: relative; z-index: 2; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
/* 미끄러지는 선택 표시 (2026-10-15 사용자): JS segSlide 가 고른 단추의 위치·너비를 .seg-ind 에 준다. 단추 자체는 투명, 글자만 밝게 */
.seg-ind { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: var(--r-pill); background: var(--ink); z-index: 1; pointer-events: none; transition: transform .3s cubic-bezier(.22,1,.36,1), width .3s cubic-bezier(.22,1,.36,1), opacity .2s var(--ease); }
.seg-ind.no-anim { transition: none; }
.seg-pick.slide button.active, .seg-pick.slide button.on { background: transparent; transition: color .3s var(--ease), background var(--dur) var(--ease); }
/* 호버는 단추 하나만 알약으로 밝아진다 (2026-10-15: 알약 전체 호버를 시험했다가 사용자 결정으로 원래 방식으로) */
.seg-pick button:not(.active):not(.on):hover { background: var(--taupe-deep); color: var(--ink); }
.seg-pick button.active, .seg-pick button.on { background: var(--ink); color: var(--eggshell); }
@media (max-width: 600px) { .seg-pick { display: flex; width: 100%; } .seg-pick button { flex: 1; padding: 8px 8px; } }
/* 기자 명단: 법적 주의 (접혀 있는 한 줄) */
/* 미리보기: 서명 아래 수신 거부, 첨부 파일 */
/* 미리보기: 첫 문단의 기자별 문장 자리 표시 + 안내줄 단추 (2026-10-15) */
/* 3단계 미리보기의 기사 초안 상자 = 실제 HTML 메일(mailer._article_box)과 같은 보도자료 느낌 (2026-10-15) */
.pv-article { margin: 28px 0; white-space: normal; }
.pv-article-cap { font-size: 12px; letter-spacing: .18em; font-weight: 700; color: var(--warn-ink); margin-bottom: 12px; }
.pv-article-cap.end { font-size: 12px; letter-spacing: 0; font-weight: 400; color: var(--smoke); margin: 8px 0 0; text-align: right; }
.pv-article-box { border: 1px solid var(--stone); border-top: 3px solid var(--primary-dark); border-radius: 0 0 14px 14px; background: var(--eggshell); padding: 28px 32px; color: var(--primary-dark); }
.pv-article-body { white-space: pre-wrap; line-height: 1.85; font-size: 15px; }
.pv-article-title { font-size: 20px; font-weight: 800; line-height: 1.45; letter-spacing: -.01em; margin-bottom: 16px; white-space: normal; }
.pv-article-subs { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--graphite); padding: 12px 0 16px; border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); margin-bottom: 20px; white-space: normal; }
.pv-article-subs div { position: relative; padding: 2px 0 2px 16px; }
.pv-article-subs div::before { content: "·"; position: absolute; left: 0; color: var(--gold); }
@media (max-width: 600px) { .pv-article-box { padding: 20px 16px; } }
.preview-attach { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--taupe); font-size: 14px; white-space: normal; }
/* 설정: 서명 칸 옆 미리보기 */
/* 설정: 보내는 속도 카드는 한 줄 전체. 속도 선택지는 가로로 넓게 */
.speed-step .speed-options { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .speed-step .speed-options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .speed-step .speed-options { grid-template-columns: 1fr 1fr; } }
.sig-row { align-items: stretch; margin-bottom: 0; }
.sig-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* 두 박스(입력·미리보기)가 같은 높이가 되게: 짧은 쪽이 긴 쪽을 따라 늘어난다 */
.sig-col > textarea, .sig-col > .sig-preview { flex: 1; }
/* 입력 칸과 미리보기의 글줄이 수평으로 딱 맞게: 같은 제목 줄 높이 + 같은 테두리·안쪽 여백·글자 크기·줄 간격 */
.sig-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 26px; margin-bottom: 8px; font-size: 12px; line-height: 1.5; color: var(--smoke); } /* 2026-10-14: 잘리지 않고 줄바꿈 */
.sig-row textarea { font-family: var(--font); font-size: 15px; line-height: 1.6; padding: 12px 12px; border: 1px solid var(--line); }
.sig-preview { border: 1px dashed var(--line-strong); border-radius: var(--r-input); background: var(--taupe); padding: 12px 12px; font-size: 15px; }
.sig-preview-body { white-space: pre-wrap; line-height: 1.6; color: var(--ink); }
/* 수신 거부 안내는 서명 바로 아래에 같은 글씨로 이어진다 (2026-10-13: 서명과 하나의 내용처럼) */
/* 서명을 고칠 때 "바뀌었다"가 보이게: 바뀐 줄은 노랗게 켜졌다 꺼지고, 상자는 한 번 빛나고, 화살표가 밀린다 */
.sig-arrow { flex: 0 0 34px; display: grid; place-items: center; color: var(--ash); font-size: 22px; align-self: center; }
.sig-arrow span { display: inline-block; transition: color var(--dur) var(--ease); }
.sig-arrow.flash span { animation: sig-arrow .55s var(--ease-out); color: var(--ink); }
@keyframes sig-arrow { 0% { transform: translateX(-8px) scale(1.15); } 60% { transform: translateX(3px); } 100% { transform: none; } }
.sig-preview { transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sig-preview.flash { animation: sig-flash 1s var(--ease-out); }
@keyframes sig-flash { 0% { box-shadow: 0 0 0 4px var(--warn-line); border-color: var(--gold-bright); border-style: solid; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes sig-mark { 0% { background: var(--hl); } 35% { background: var(--warn-soft); } 100% { background: transparent; } }
.sig-var { border-bottom: 1px dotted var(--ash); cursor: help; border-radius: var(--r-xs); transition: background var(--dur) var(--ease); }
.sig-var:hover, .sig-var.hover { background: var(--warn-soft); border-bottom-color: var(--gold-bright); }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin: 0 -4px 0 2px; animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (max-width: 800px) { .sig-row { flex-direction: column; gap: 0; } .sig-arrow { flex-basis: auto; height: 30px; transform: rotate(90deg); margin: 0; } }
/* 모든 입력칸은 손잡이로 크기 조절하지 않는다. 글 길이에 맞춰 자동으로 늘어난다 (autogrow) */
textarea { resize: none; }
textarea.body { overflow: hidden; }
/* 카드 바닥에 버튼을 오른쪽 정렬로 고정. 두 카드를 나란히 둘 때 버튼 높이가 맞는다 */
.grid-2 > .card, .card.fill { display: flex; flex-direction: column; }
textarea.footer-ta { min-height: 150px !important; line-height: 1.7; }
.speed-options { margin-top: 4px; }
.btn.attention { position: relative; overflow: hidden; isolation: isolate; animation: attention-ring 2.4s cubic-bezier(.4,0,.2,1) infinite; }
.btn.attention::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform: translateX(-120%); animation: attention-sheen 2.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes attention-ring { 0% { box-shadow: 0 0 0 0 rgba(201,162,74,.55); } 70% { box-shadow: 0 0 0 10px rgba(201,162,74,0); } 100% { box-shadow: 0 0 0 0 rgba(201,162,74,0); } }
@keyframes attention-sheen { 0%, 35% { transform: translateX(-120%); } 75%, 100% { transform: translateX(120%); } }
.speed-estimate { margin-top: 12px; background: var(--eggshell); border: 1px solid var(--line); border-radius: var(--r-box); padding: 12px 16px; font-size: 13px; line-height: 1.8; animation: page-in .2s var(--ease-out) both; }
.speed-estimate .est { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--taupe-deep); color: var(--graphite); font-size: 13px; }
.tips { padding-left: 20px; margin: 0; line-height: 1.75; }
.tips li { margin-bottom: 4px; }
.tips b { color: var(--graphite); }
@media (max-width: 900px) { .provider-grid { grid-template-columns: 1fr 1fr; } .speed-options { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .provider-grid { grid-template-columns: 1fr; } }

body.login-mode .main { place-items:normal; }
.login-shell { width:100%; }

@media (max-width:760px) { .story-art, .login-story-foot { display:none; } .login-story-copy { margin-top:24px; } .login-story h2 { font-size:30px; } .login-story-copy p { font-size:12px; } .login-story { padding:20px 24px; } }

/* ---------- 로그인 화면: 글자 키우고 여백 줄이기 (2026-10-12, 큰 모니터에서 글씨가 너무 작고 빈 공간이 과하다는 피드백) ---------- */
body.login-mode .main { display:grid; place-items:center; padding:0; }
.login-shell { max-width:1500px; min-height:0; height:auto; margin:0 auto; padding:24px; gap:20px; align-items:stretch; }
.login-story { padding:36px 48px 28px; min-height:0; }
.login-entry { padding:24px 44px 20px; justify-content:center; }
.login-brand { font-size:24px; }
.login-brand .brand-logo { width:40px; height:40px; font-size:20px; }
.login-brand-tag { font-size:12px; }
.login-story-copy { margin-top:clamp(28px,4vh,56px); }
.login-story-copy .eyebrow { font-size:12px; margin-bottom:16px; }
.login-story h2 { font-size:clamp(40px,3.4vw,62px); margin-bottom:20px; }
.login-story-copy p { font-size:17px; line-height:1.8; }
.story-art { height:340px; min-height:300px; margin:12px auto 8px; }
.login-story-foot { font-size:13px; padding-top:16px; }
.login-entry-top, .login-entry-foot { font-size:13px; }
.login-entry-badge { font-size:12px; }
.login-form-wrap { max-width:460px; padding:28px 0; }
.login-form-wrap .eyebrow { font-size:12px; margin-bottom:16px; }
.login-form-wrap h1 { font-size:clamp(34px,2.6vw,46px); margin-bottom:12px; }
.login-lead { font-size:15px; margin-bottom:28px; }
.login-form-wrap .field label { font-size:14px; }
.login-form-wrap input { min-height:52px; font-size:15px; }
.login-form-wrap input::placeholder { font-size:14px; }
.login-form-wrap .help { font-size:13px; }
.login-submit { min-height:54px; font-size:15px; }
.login-footnote { font-size:13px; }
.login-error, .login-connection-note { font-size:14px; }
@media (min-width:1900px) {
  .login-shell { max-width:1680px; padding:32px; gap:24px; }
  .login-story { padding:44px 60px 32px; }
  .login-entry { padding:32px 60px 24px; }
  .login-story-copy p { font-size:18px; }
  .story-art { height:380px; }
  .login-form-wrap { max-width:500px; }
  .login-form-wrap input { min-height:56px; font-size:16px; }
  .login-submit { min-height:58px; font-size:16px; }
}
@media (max-width:1100px) { .login-shell { padding:16px; gap:12px; } }
@media (max-width:760px) { .login-story-copy p { font-size:14px; } .login-form-wrap h1 { font-size:30px; } }

/* ---------- 로그인 화면 2차: 두 패널을 한 틀로 합치고, 그림 겹침·움직임 정리 (2026-10-12) ---------- */
body.login-mode .main { padding:20px; }
.login-shell { max-width:1760px; padding:0; gap:0; background:var(--eggshell); border:1px solid var(--stone); border-radius:var(--r-card); overflow:hidden; grid-template-columns:1.05fr 1fr; }
.login-story { border:0; border-right:1px solid var(--stone); border-radius:0; padding:44px 56px 36px; }
.login-entry { padding:40px 64px 32px; }
.login-form-wrap { max-width:520px; padding:20px 0; }
/* 그림: 떠다니는 움직임을 거의 없애고(겹침·가림 방지), 앞 카드가 뒤 카드를 확실히 덮게 */
@keyframes story-note-float { 0%, 100% { transform:rotate(6deg) translateY(0); } 50% { transform:rotate(6deg) translateY(-3px); } }
@keyframes story-envelope-float { 0%, 100% { transform:rotate(-10deg) translateY(0); } 50% { transform:rotate(-10deg) translateY(-3px); } }
.story-art { flex:none; height:440px; min-height:440px; max-height:none; max-width:720px; margin:28px auto 12px; }
.login-story-foot { margin-top:auto; padding-top:20px; font-size:14px; }
.login-story-copy { margin-top:clamp(20px,3vh,40px); }
@media (min-width:1900px) {
  .login-shell { max-width:2000px; }
  .login-story { padding:52px 68px 40px; }
  .login-entry { padding:48px 80px 36px; }
  .login-story h2 { font-size:68px; }
  .login-story-copy p { font-size:20px; }
  .story-art { height:500px; min-height:500px; max-width:820px; }
  .login-form-wrap { max-width:560px; }
  .login-form-wrap h1 { font-size:50px; }
  .login-lead { font-size:17px; }
  .login-form-wrap .field label { font-size:15px; }
  .login-form-wrap input { min-height:60px; font-size:17px; }
  .login-submit { min-height:62px; font-size:17px; }
  .login-footnote, .login-form-wrap .help { font-size:14px; }
}
@media (max-width:1100px) { .login-shell { border-radius:var(--r-card); } .login-story { padding:28px; border-right:0; border-bottom:1px solid var(--stone); } .login-entry { padding:28px; } .story-art { height:360px; min-height:360px; } }
@media (max-width:760px) { body.login-mode .main { padding:12px; } .login-shell { border-radius:var(--r-card); } }
/* 2026-10-14: 좁은 화면에서 두 칸으로 나뉘어 글자가 세로로 쪼개지던 문제 → 900px 이하는 위아래로 쌓는다 (위 1.05fr 1fr 규칙이 예전 한 칸 규칙을 덮고 있었음) */
@media (max-width:900px) {
  .login-shell { grid-template-columns:1fr; }
  .login-story { border-right:0; border-bottom:1px solid var(--stone); padding:28px 24px 24px; }
  .login-entry { padding:24px; }
}
@media (max-width:480px) { .login-story h2 { font-size:30px; } .login-entry-top { flex-wrap:wrap; gap:8px; } }

/* ---------- 로그인 그림 4차 (2026-10-12): 카드·봉투·글자를 SVG 한 장(assets/login-story.svg)으로 만들고 그림 전체가 천천히 떠다니게 ---------- */
.story-art-image { position:static; display:flex; align-items:center; justify-content:center; height:auto; min-height:0; max-height:none; max-width:700px; margin:16px auto 8px; flex:1; }

@keyframes story-float { 0%, 100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-10px) rotate(-0.6deg); } }
@media (min-width:1900px) { .story-art-image { max-width:820px; } }
@media (max-width:760px) { .story-art-image { display:none; } }
/* ---------- 로그인 그림 6차 (2026-10-15 사용자): transitions.dev 'card-tilt' 3D 틸트. 검정 프레스 카드가 마우스를 따라 기울고 빛이 스친다 ---------- */
:root { --tilt-perspective: 1100px; --tilt-return: 1000ms; --tilt-return-ease: cubic-bezier(.22,1,.36,1); --tilt-follow: 400ms; --tilt-follow-ease: cubic-bezier(.22,1,.36,1); --tilt-glare-opacity: .34; --tilt-glare-fade: 300ms; --tilt-glare-ease: cubic-bezier(.22,1,.36,1); }
.t-tilt { touch-action: none; }
.t-tilt-card { position: relative; border-radius: var(--r-box); overflow: hidden; transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)); transform-style: preserve-3d; transition: transform var(--tilt-return) var(--tilt-return-ease); will-change: transform; }
.t-tilt-card.is-tilting { transition: transform var(--tilt-follow) var(--tilt-follow-ease); }
.t-tilt-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgba(255,255,255,.48), rgba(255,255,255,.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%), rgba(255,255,255,.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease); }
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
@media (prefers-reduced-motion: reduce) { .t-tilt-card { transform: none !important; transition: none !important; } }
/* 프레스 카드: 검정 바탕에 크림 글씨, 금색 포인트, 안쪽 가는 틀. 뒤에 크림 카드가 비껴 깔림 */
.press-stack { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 32px 36px; user-select: none; -webkit-user-select: none; cursor: default; } /* 그림이므로 글자 선택·드래그 금지 (2026-10-15 사용자) */
.press-stack * { -webkit-user-drag: none; }
.press-card > * { pointer-events: none; } /* 마우스 추적은 바깥 .t-tilt 가 한다 */
.press-back { position: absolute; left: 12px; right: 48px; top: 6px; bottom: 54px; border-radius: var(--r-card); background: var(--eggshell); border: 1px solid var(--line-strong); transform: rotate(-5deg); transform-origin: 30% 60%; }
.press-tilt { position: relative; }
.press-card { aspect-ratio: 1.58 / 1; border-radius: var(--r-card); padding: 28px 32px 24px; color: var(--taupe-deep); display: flex; flex-direction: column; font-family: Inter, var(--font);
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(135deg, #2b2825 0%, #181614 55%, #0f0e0d 100%);
  box-shadow: 0 30px 60px -28px rgba(20,18,16,.45), 0 12px 24px -16px rgba(20,18,16,.35); } /* 3D 그림이라 바닥 그림자만 예외 */
.press-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.14) .6px, transparent .8px); background-size: 14px 14px; }
.pc-frame { position: absolute; inset: 11px; border: 1px solid rgba(239,233,223,.14); border-radius: var(--r-input); pointer-events: none; }
.pc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(239,233,223,.72); }
.pc-eyebrow { color: var(--gold); }
.pc-mono { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(207,174,99,.55); display: grid; place-items: center; font-weight: 500; font-size: 22px; color: var(--gold); letter-spacing: 0; }
.pc-title { margin-top: auto; font-family: var(--font); font-weight: 300; font-size: 30px; line-height: 1.22; letter-spacing: -.03em; color: var(--taupe); }
.pc-lines { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; }
.pc-lines i { display: block; height: 3px; border-radius: var(--r-xs); background: rgba(239,233,223,.16); }
.pc-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .08em; color: rgba(239,233,223,.6); border-top: 1px solid rgba(239,233,223,.14); padding-top: 16px; }
.pc-arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--taupe-deep); color: var(--ink); display: grid; place-items: center; font-size: 15px; transition: transform .3s var(--ease-out); }
.press-tilt.is-hover .pc-arrow { transform: translate(2px, -2px); }
@media (min-width: 1900px) { .press-stack { max-width: 680px; } .press-card { padding: 32px 36px 28px; } .pc-title { font-size: 38px; } .pc-top { font-size: 12px; } .pc-foot { font-size: 13px; } .pc-mono { width: 66px; height: 66px; font-size: 26px; } }
@media (max-width: 1100px) { .press-stack { max-width: 460px; } .pc-title { font-size: 26px; } }

/* ===== 4단계 받을 기자 (2026-10-14 단순화: 언론사별 체크 목록) ===== */
/* 4단계 내용 다듬기 머리: 제목 + 「미리보기」(첫 번째로 고른 기자 기준) (2026-10-15 순서 변경) */
.rp-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--eggshell); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.rp-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.rp-search span { color: var(--smoke); font-size: 17px; line-height: 1; }
.rp-search input { border: 0; background: transparent; padding: 0; height: 100%; box-shadow: none; font-size: 14px; }
.rp-search input:focus { box-shadow: none; outline: none; }
/* 표 (게시판처럼) + 쪽수 (2026-10-14) */ /* 높이 고정: 머리 줄 + 10명 (2026-10-14 사용자: 검색할 때 높이가 바뀌지 않게) */
/* 쪽수: 왼쪽 안내 · 가운데 버튼(항상 7칸, 같은 너비) · 오른쪽 쪽 이동 (2026-10-14 사용자 규칙) */
.rl-pager { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "info btns jump"; align-items: center; gap: 12px; margin-top: 12px; min-height: 36px; font-size: 13px; color: var(--smoke); }
.rl-pager-info { grid-area: info; justify-self: start; white-space: nowrap; }
.rl-pager-jump { grid-area: jump; justify-self: end; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rl-pager-jump input { width: 56px; height: 34px; padding: 0 8px; text-align: center; font-size: 14px; -moz-appearance: textfield; }
.rl-pager-jump input::-webkit-outer-spin-button, .rl-pager-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rl-pager-btns { grid-area: btns; justify-self: center; display: inline-flex; align-items: center; gap: 4px; }
.rl-pager-btns button { font: inherit; font-size: 13px; width: 36px; min-width: 36px; height: 34px; padding: 0; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--eggshell); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: all var(--dur) var(--ease); }
.rl-pager-btns button:hover:not(:disabled) { background: var(--taupe-deep); }
.rl-pager-btns button.active { background: var(--ink); border-color: var(--ink); color: var(--eggshell); }
.rl-pager-btns button:disabled { opacity: .4; cursor: not-allowed; }
.rl-pager-gap { display: inline-grid; place-items: center; width: 36px; height: 34px; }@media (max-width: 600px) {
  .rl-pager { grid-template-columns: 1fr 1fr; grid-template-areas: "btns btns" "info jump"; min-height: 80px; align-content: start; } /* 좁은 화면: 버튼 줄 + 안내/이동 줄. 버튼이 없어도 같은 높이 */
}/* ===== 확인 창 (가운데 모달, 2026-10-13) ===== */
.cdlg-back { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; background: rgba(20,18,16,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in .2s var(--ease) both; }
.cdlg-back.leaving { animation: cdlg-fade-out .15s var(--ease) both; }
.cdlg-back.leaving .cdlg { animation: cdlg-out .15s var(--ease) both; }
@keyframes cdlg-fade-out { to { opacity: 0; } }
@keyframes cdlg-out { to { opacity: 0; transform: scale(.96) translateY(6px); } }
.cdlg { width: 100%; max-width: 420px; background: var(--eggshell); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px 28px 24px; text-align: center; box-shadow: 0 24px 60px rgba(20,18,16,.22); animation: cdlg-in .3s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes cdlg-in { from { opacity: 0; transform: scale(.9) translateY(12px); } to { opacity: 1; transform: none; } }
.cdlg-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700; background: var(--taupe-deep); color: var(--ink); box-shadow: 0 0 0 8px var(--taupe); animation: cdlg-pop .3s .15s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes cdlg-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.cdlg.danger .cdlg-icon { background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 0 8px var(--danger-soft); }
.cdlg.warn .cdlg-icon { background: var(--warn-soft); color: var(--warn); box-shadow: 0 0 0 8px var(--eggshell); }
.cdlg h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.cdlg-msg { font-size: 14px; line-height: 1.65; color: var(--graphite); }
.cdlg-msg p { margin: 0; }
.cdlg-msg p + p { margin-top: 8px; }
.cdlg-foot { display: flex; gap: 8px; margin-top: 24px; }
/* 직접 적어서 확인 (전체 삭제, 2026-10-19). 다 적기 전에는 빨간 단추가 흐림 */
.cdlg-type { display: grid; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--graphite); text-align: left; }
.cdlg-type b { color: var(--danger); }
.cdlg-type input { height: 44px; font-size: 15px; }
.cdlg-foot .btn:disabled { opacity: .45; cursor: not-allowed; }
.cdlg-foot .btn { flex: 1; height: 44px; justify-content: center; font-size: 15px; }
.cdlg-foot .btn.ghost { border: 1px solid var(--line); }
.btn.danger-fill { background: var(--danger); border-color: var(--danger); color: var(--white); }
.btn.danger-fill:hover { background: var(--danger-dark); border-color: var(--danger-dark); }
@media (max-width: 480px) { .cdlg { padding: 24px 20px 20px; } .cdlg-foot { flex-direction: column-reverse; } }
/* ===== 3단계 고쳐 쓰기 상자 (버전 선택 + 고칠 부분, 2026-10-13) ===== */
/* ===== 메일 보내기: 고른 서비스 표시 (2단계부터, 2026-10-13) ===== */
.svc-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 8px 8px 8px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--eggshell); font-size: 14px; animation: svc-pill-in .3s var(--ease-out) both; }
.svc-pill[hidden] { display: none; }
@keyframes svc-pill-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.svc-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-ok); box-shadow: 0 0 0 3px rgba(127,216,166,.25); }
.svc-pill-lbl { color: var(--on-dark-muted); font-size: 13px; }
.svc-pill b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.svc-pill .link-btn { color: var(--line-strong); font-size: 13px; padding: 4px 12px; margin-left: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); text-decoration: none; transition: background var(--dur) var(--ease); }
.svc-pill .link-btn:hover { background: rgba(255,255,255,.2); color: var(--white); }
.svc-pill.busy .link-btn { opacity: .45; cursor: not-allowed; } /* AI 만드는 중·보내는 중: 누르면 안내만 */
.svc-pill.busy .link-btn:hover { background: rgba(255,255,255,.1); color: var(--line-strong); }
/* ===== 설정: 로그인 확인 결과 말풍선 (아래를 밀지 않고 떠 있다가 사라짐, 2026-10-13) ===== */
.pw-wrap { position: relative; }
.check-pop-anchor { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; height: 0; }
.check-pop { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 36px 16px 16px; border-radius: var(--r-box); font-size: 14px; line-height: 1.55; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(20,18,16,.14), 0 2px 6px rgba(20,18,16,.06); animation: check-pop-in .3s cubic-bezier(.34,1.4,.64,1) both; }
.check-pop::before { content: ""; position: absolute; top: -6px; left: 22px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.check-pop.ok { border-color: var(--ok-line); background: var(--ok-soft); }
.check-pop.ok::before { border-color: var(--ok-line); }
.check-pop.bad { border-color: var(--danger-line); background: var(--danger-soft); }
.check-pop.bad::before { border-color: var(--danger-line); }
.check-pop.leaving { animation: check-pop-out .2s var(--ease) both; }
@keyframes check-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes check-pop-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.check-pop-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--white); background: var(--ok); margin-top: 1px; }
.check-pop.bad .check-pop-icon { background: var(--danger); }
.check-pop-text { color: var(--graphite); }
.check-pop-text b { color: var(--ink); margin-right: 4px; }
.check-pop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--smoke); font-size: 18px; line-height: 1; cursor: pointer; }
.check-pop-x:hover { background: rgba(0,0,0,.06); color: var(--ink); }
/* 남은 시간 막대: 다 줄어들면 사라진다 (마우스와 상관없이) */
.check-pop-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; background: var(--ok); opacity: .45; animation: check-pop-bar linear both; }
.check-pop.bad .check-pop-bar { background: var(--danger); }
@keyframes check-pop-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ===== 저장 안내 (2026-10-13: 고급 웹페이지처럼) ===== */
.dirty-note { display: inline-flex; align-items: center; gap: 8px; color: var(--warn-ink); font-weight: 500; }
.dirty-note i, .save-dock-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.dirty-note i::after, .save-dock-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: dot-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes dot-ping { 0% { transform: scale(.6); opacity: .8; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
/* 화면 아래 떠오르는 독 */
.save-dock { position: fixed; left: 50%; bottom: 24px; z-index: 80; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 20px; max-width: calc(100vw - 32px);
  border-radius: var(--r-card); color: var(--taupe); background: rgba(24,22,20,.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(20,18,16,.32), 0 2px 8px rgba(20,18,16,.18), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22,1.2,.36,1), opacity .3s var(--ease); }
.save-dock.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.save-dock-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.save-dock-text b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.save-dock-text span { font-size: 12px; color: var(--ash); }
.save-dock-undo { font: inherit; font-size: 14px; height: 40px; padding: 0 16px; margin-left: 12px; border: 0; border-radius: var(--r-box); background: transparent; color: var(--line-strong); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.save-dock-undo:hover { background: rgba(255,255,255,.08); color: var(--white); }
.save-dock-save { font: inherit; position: relative; overflow: hidden; height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-box); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, #fffdf8 0%, #efe6d4 100%); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 14px rgba(212,166,63,.25); transition: transform .15s var(--ease), box-shadow .2s var(--ease); }
.save-dock-save::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%); transform: translateX(-120%); animation: attention-sheen 2.6s cubic-bezier(.4,0,.2,1) infinite; pointer-events: none; }
.save-dock-save span { position: relative; z-index: 1; }
.save-dock-save:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 20px rgba(212,166,63,.35); }
.save-dock-save:active { transform: translateY(0) scale(.98); }
@media (max-width: 600px) {
  .save-dock { left: 12px; right: 12px; bottom: 12px; max-width: none; transform: translateY(calc(100% + 30px)); flex-wrap: wrap; gap: 12px; padding: 12px 12px 12px 16px; }
  .save-dock.show { transform: none; }
  .save-dock-text { flex: 1 1 calc(100% - 30px); }
  .save-dock-undo { margin-left: 0; flex: 1; }
  .save-dock-save { flex: 2; }
}
@media (prefers-reduced-motion: reduce) { .save-dock { transition: opacity .2s; } }
/* 설정 3단계: 보내는 속도 (2026-10-13: 계정 폼 안으로 합쳐 저장 버튼 하나) */
#speed-current { transition: opacity var(--dur) var(--ease); }
#speed-current.changed { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
/* 자세한 설정을 3단계(보내는 속도)와 구분: 단계 사이와 같은 선 (2026-10-13) */
#sf > .advanced { position: relative; margin-top: 32px; }
#sf > .advanced::before { content: ""; position: absolute; left: -1px; right: -1px; top: -17px; height: 1px; background: var(--line); }

/* ===== 메일 보내기 단계 표시: 진행 트랙 (2026-10-13 리디자인) =====
   동그라미를 선으로 잇고, 지나온 구간은 선이 채워진다. 끝낸 단계 ✓, 지금 단계는 크게 + 퍼지는 링, 아래에 "완료/진행 중" */
@keyframes st-ring { 0% { transform: scale(.85); opacity: .35; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
/* 1단계 「바꾸기」로 왔을 때: 바로 돌아가는 버튼 */
.svc-return { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line); animation: svc-pill-in .3s var(--ease-out) both; }
.svc-return[hidden] { display: none; }
/* 준비 순서 상자: 접기 버튼 (2026-10-13) */
/* 홍보 서비스 바꾸기 모달 (2026-10-13) */
.svc-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc-choice { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.svc-choice b { font-size: 17px; font-weight: 600; color: var(--ink); }
.svc-choice span { font-size: 13px; color: var(--smoke); }
.svc-choice:hover { border-color: var(--ink); box-shadow: 0 6px 18px rgba(20,18,16,.08); transform: translateY(-1px); }
.svc-choice.current { background: var(--taupe); border-style: dashed; cursor: default; }
.svc-choice.current:hover { transform: none; box-shadow: none; border-color: var(--line); }
.svc-choice.current span { color: var(--ok); font-weight: 600; }
.svc-choice.picked { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.svc-confirm { margin-top: 16px; padding: 16px 20px; border-radius: var(--r-box); background: var(--warn-soft); border: 1px solid var(--warn-line); animation: svc-pill-in .2s var(--ease-out) both; }
.svc-confirm p { margin: 0 0 12px; line-height: 1.6; font-size: 14px; }
.svc-confirm-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) { .svc-confirm-btns .btn { flex: 1 1 100%; } }
/* ===== 창(모달)이 떠도 뒤 화면 너비가 그대로 (2026-10-13) =====
   창이 뜨면 페이지 스크롤을 잠그는데, 그때 스크롤바가 사라지며 화면 전체가 그만큼 넓어지던 문제 → 스크롤바 자리를 늘 비워 둔다 */
/* (스크롤바 너비 보정은 JS lockScroll 이 body 오른쪽 여백으로 처리) */
.modal-open .save-dock { margin-left: calc(var(--sbw, 0px) / -2); }
/* 창 안 버튼·카드의 포커스 표시는 바깥으로 튀어나오는 테두리 대신 같은 크기의 부드러운 링 (버튼끼리 크기가 달라 보이던 문제) */
.cdlg .btn:focus-visible, .modal .btn:focus-visible, .svc-choice:focus-visible, .seg-pick button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(20,18,16,.18); }
.cdlg .btn.danger-fill:focus-visible { box-shadow: 0 0 0 3px rgba(179,38,30,.25); }
.cdlg .btn, .modal .btn { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); }

/* ===== 설정: 저장 강조 강화 (2026-10-13) ===== */
/* 카드 제목 옆 "저장 안 됨" */
.unsaved-chip { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 13px; font-weight: 600; vertical-align: middle; animation: svc-pill-in .3s var(--ease-out) both; }
.unsaved-chip[hidden] { display: none; }
.unsaved-chip i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.unsaved-chip i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: dot-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
/* 바뀐 칸: 왼쪽 금색 막대 + 은은한 바탕 (어느 칸을 바꿨는지 한눈에) */
#sf .field.is-changed, #sf .provider-grid.is-changed, #sf .speed-options.is-changed { position: relative; }
#sf .field.is-changed::before, #sf .provider-grid.is-changed::before, #sf .speed-options.is-changed::before { content: ""; position: absolute; left: -12px; top: 2px; bottom: 2px; width: 3px; border-radius: var(--r-xs); background: linear-gradient(180deg, #e3c25a, #c9a24a); animation: changed-in .3s var(--ease-out) both; }
@keyframes changed-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#sf .field.is-changed > label, #sf .field.is-changed .label-row > label { color: var(--warn-ink); }
#sf .field.is-changed input:not([type=radio]):not([type=checkbox]), #sf .field.is-changed textarea, #sf .field.is-changed select { border-color: var(--gold-bright); background: var(--eggshell); }
/* 저장 줄 안내 문구 두 줄 */
.dirty-note > span { display: flex; flex-direction: column; gap: 2px; }
.dirty-note b { font-weight: 600; }
.dirty-names { font-size: 13px; font-weight: 400; color: var(--warn); }
/* 「머무르기」 뒤 저장 줄 비추기 */
.save-bar.spotlight { animation: spotlight 2.6s cubic-bezier(.4,0,.2,1); position: relative; z-index: 2; }
@keyframes spotlight {
  0% { box-shadow: 0 0 0 0 rgba(212,166,63,0), 0 0 0 9999px rgba(20,18,16,0); }
  15% { box-shadow: 0 0 0 4px rgba(212,166,63,.75), 0 0 0 9999px rgba(20,18,16,.28); }
  70% { box-shadow: 0 0 0 4px rgba(212,166,63,.75), 0 0 0 9999px rgba(20,18,16,.28); }
  100% { box-shadow: 0 0 0 0 rgba(212,166,63,0), 0 0 0 9999px rgba(20,18,16,0); }
}
.save-bar.spotlight .btn.primary { transform: scale(1.06); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
@media (max-width: 600px) { #sf .field.is-changed::before, #sf .provider-grid.is-changed::before, #sf .speed-options.is-changed::before { left: -8px; } .unsaved-chip { margin: 8px 0 0; } }
/* ===== 3단계: AI 편집장 검수 결과 (2026-10-13) ===== */

/* 메일 보내기 머리: 초기화는 오른쪽 위 하나만 (2026-10-13). 아래쪽 이전/다음 버튼과 같은 크기, 빨간 글씨 + 연한 빨강 hover */
/* 임시 저장 안내·초기화는 아래 줄(이전·단계 안내 … 다음)의 「다음」 왼쪽 (2026-10-19 사용자) */

/* 2026-10-14: 낱말이 두 줄로 쪼개지지 않게 — 표 제목·숫자·메일 주소·작은 버튼은 한 줄 */
th, td .num, td.num, .num { white-space: nowrap; }
td small, td .muted { overflow-wrap: normal; }
td small { white-space: nowrap; }
.save-dock-undo, .save-dock-save, .sec-save-btn, .btn { white-space: nowrap; }/* 2026-10-14: 서명 입력·미리보기 높이를 똑같이 고정하고, 길어지면 각 상자 안에서 스크롤(두 상자가 함께 움직임) */
.sig-row .sig-editor, .sig-row .sig-preview { flex: none; height: 280px; min-height: 0; overflow-y: auto; box-sizing: border-box; }
/* ===== 서명 편집기 2차 (2026-10-14, Gmail 서명 참고): 보관함·정렬·목록·인용구·들여쓰기·글꼴·이미지 ===== */
/* 서명 보관함 = 카드 줄 (2026-10-20 사용자): 카드를 누르면 편집 칸으로, ⋯ 메뉴, 마지막 「+」 카드로 보관 */
.sig-shelf { margin: 0 0 16px; }
.sig-shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.sig-shelf-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.sig-shelf-help { font-size: 13px; color: var(--smoke); }
/* 「+ 새 서명 만들기」: 카드 줄 밖, 제목 줄 오른쪽 끝에 늘 보이게 (2026-10-20 사용자) */
.sig-shelf-head { align-items: center; }
.sig-new-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--white);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.sig-new-btn span { font-size: 17px; line-height: 1; }
.sig-new-btn:hover { opacity: .88; }
.sig-new-btn:active { transform: scale(.96); }
@media (max-width: 600px) { .sig-new-btn { width: 100%; justify-content: center; } }
/* 기본 서명을 고른 동안: 입력 칸·도구 잠금 */
#sig-cap-text.locked { color: var(--warn); font-weight: 500; }
#sig-cap-text:empty { display: none; }
.sig-cap-vars { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.sig-cap-vars[hidden] { display: none; }
.sig-cap-vars button { height: 26px; padding: 0 8px; font-size: 12px; }
.sig-cap-btn { margin-left: auto; height: 26px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sig-cap-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.sig-cap-btn[hidden] { display: none; }
.sig-editor.locked { background: var(--taupe); color: var(--graphite); cursor: not-allowed; }
.sig-tools.locked { opacity: .45; pointer-events: none; }
.sec-save[hidden] { display: none !important; }
/* 카드 크기 고정 (2026-10-20 사용자: 높이·너비가 바뀌는 게 불편) — 220×180, 표시 줄이 생겨도 그대로.
   카드가 많아도 아래 줄로 내려가지 않고 옆으로 한 줄(사용자): 마우스 휠로 좌우 이동(app.js), 넘치는 쪽 끝은 흐리게 */
.sig-cards { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; margin: -4px -4px 0; scroll-behavior: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sig-cards::-webkit-scrollbar { height: 6px; }
.sig-cards::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-sm); }
.sig-cards.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.sig-cards.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px); }
.sig-cards.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.sig-card { position: relative; flex: none; width: 220px; min-width: 0; height: 180px; }
/* 메일 보내기 4단계 서명 창: 같은 카드를 여러 줄로 (창 안이라 옆 스크롤 대신 줄바꿈) */
.sig-cards.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 0; }
.sig-card-main { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; overflow: hidden; padding: 12px 16px 12px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.sig-card-main:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.sig-card-main:active { transform: scale(.985); }
.sig-card.open .sig-card-main { border-color: var(--ink); }
.sig-card.in-use .sig-card-main { border-color: var(--ok-line); background: var(--ok-soft); }
.sig-card.in-use.open .sig-card-main { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.sig-card-name { display: flex; flex-direction: column; gap: 1px; padding-right: 28px; font-size: 14px; font-weight: 700; }
/* 기본 서명 카드 (2026-10-20 사용자: 누가 봐도 기본값으로) — 맨 앞, 토프 바탕 + 「기본값」 표 (테두리는 다른 카드와 같게, 사용자) */
.sig-card.fixed .sig-card-main { background: var(--taupe); }
.sig-card.fixed .sig-card-prev::after { background: linear-gradient(transparent, var(--taupe)); }
/* 기본 서명도 골랐을 때는 다른 카드처럼 초록 (2026-10-20 사용자). 안 골랐을 때는 토프 그대로 */
.sig-card.fixed.in-use .sig-card-main { background: var(--ok-soft); border-color: var(--ok-line); }
.sig-card.fixed.in-use .sig-card-prev::after { background: linear-gradient(transparent, #f6fbf8); }
/* 「기본값」 표는 오른쪽 위 모서리(다른 카드의 ⋯ 자리)에 — 이름·미리보기 줄 높이가 다른 카드와 같게 (2026-10-20 사용자) */
.sig-card-badge { position: absolute; top: 10px; right: 10px; padding: 2px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 1px 4px rgba(20,18,16,.18); } /* 더 눈에 띄게 검정 알약 (2026-10-20 사용자) */
.sig-card-name { flex: none; }
.sig-card-tags { flex: none; }
.sig-card-prev { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; font-size: 12px; line-height: 1.5; color: var(--graphite); white-space: normal; }
.sig-card-prev::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(transparent, #fff); }
.sig-card.in-use .sig-card-prev::after { background: linear-gradient(transparent, #f6fbf8); }
.sig-card-prev img { max-width: 100%; height: auto; }
.sig-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sig-tag { font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 2px 8px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-tag.use { background: var(--ok-soft); color: var(--ok); }
.sig-tag.use.saved { animation: saved-in .2s cubic-bezier(.34,1.4,.64,1) both; }
.sig-tag.open { background: var(--taupe); color: var(--graphite); font-weight: 500; }
.sig-card-more { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--graphite); font-size: 18px; line-height: 1; cursor: pointer; transition: background var(--dur) var(--ease); }
.sig-card-more:hover, .sig-card-more[aria-expanded="true"] { background: var(--taupe-deep); color: var(--ink); }
.sig-card-menu { position: absolute; top: 42px; right: 8px; z-index: 20; display: flex; flex-direction: column; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); box-shadow: 0 12px 32px rgba(20,18,16,.14); animation: fade-in .15s var(--ease) both; }
.sig-card-menu button { padding: 8px 12px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.sig-card-menu button:hover { background: var(--taupe); }
.sig-card-menu button.danger { color: var(--danger); }
.sig-card.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 180px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-box); background: transparent;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--graphite); text-align: center; line-height: 1.4; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
.sig-card.add:hover { border-color: var(--ink); color: var(--ink); background: var(--white); }
@media (max-width: 600px) { .sig-card { width: 170px; } .sig-card-menu { left: 6px; right: 6px; min-width: 0; } }
.sig-tools select { width: auto; height: 34px; padding: 0 28px 0 12px; font-size: 13px; border-radius: var(--r-input); }
.sig-tools .sig-font { max-width: 120px; } .sig-tools .sig-size { max-width: 84px; }
.sig-tools { gap: 4px; } .sig-tools button { padding: 0 8px; }
.sig-tools button { min-width: 34px; justify-content: center; }
.sig-tools button.on { background: var(--ink); color: var(--eggshell); border-color: var(--ink); }
.sig-tools button.on > b, .sig-tools button.on > i, .sig-tools button.on > u, .sig-tools button.on > s, .sig-tools button.on > span { color: var(--eggshell); }
.sig-color-wrap { position: relative; display: inline-flex; }
#sig-color-btn { flex-direction: column; gap: 1px; padding: 4px 8px; }
.sig-color-a { font-size: 15px; line-height: 1; color: var(--ink); }
.sig-color-bar { display: block; width: 16px; height: 3px; border-radius: var(--r-xs); background: var(--accent); }
.sig-color-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); box-shadow: 0 10px 30px rgba(20,18,15,.12); }
.sig-color-pop[hidden] { display: none; }
/* 편집 칸과 미리보기가 같은 모양·같은 줄 높이 */
.sig-editor, .sig-html { line-height: 1.6; }
.sig-editor div, .sig-html div, .sig-editor p, .sig-html p { margin: 0; }
.sig-editor ul, .sig-editor ol, .sig-html ul, .sig-html ol { margin: 0; padding-left: 28px; }
.sig-editor blockquote, .sig-html blockquote { margin: 0 0 0 0.8ex; border-left: 1px solid var(--line-strong); padding-left: 1ex; }
.sig-editor img, .sig-html img { max-width: 100%; height: auto; vertical-align: middle; }
.sig-editor img { cursor: default; }
.sig-preview-body.sig-html { white-space: normal; }
.sig-dead { text-decoration: line-through; text-decoration-color: var(--gold); color: var(--smoke); }
.sig-var.empty { border-bottom: 0; background: transparent; color: var(--smoke); }
@media (max-width: 600px) { .sig-color-pop { left: auto; right: 0; } }/* 점검표 머리 전체가 접기/펼치기 버튼 (2026-10-14) */

.ready-head[role=button]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }/* 접기 표시는 화살표만, 머리에 마우스를 올리면 뚜렷하게 (2026-10-14) */
.ready-head .ready-toggle { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform .2s var(--ease), box-shadow var(--dur) var(--ease); }
/* 점검표 머리 호버 = 「전문가용 설정」과 같은 느낌(테두리가 진해지고 머리 바탕이 한 단계 진해짐), 화살표는 검은 원으로 (2026-10-14 사용자) */
.ready-board { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ready-board:has(.ready-head:hover) { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--stone); }
.ready-head[role=button] { cursor: pointer; user-select: none; transition: background-color var(--dur) var(--ease); }
.ready-head.todo[role=button]:hover { background: var(--warn-soft); }
.ready-head.ok[role=button]:hover { background: color-mix(in srgb, var(--ok-soft) 65%, var(--ok-line)); }
.ready-head[role=button]:hover .ready-toggle { background: var(--ink); color: var(--eggshell); border-color: var(--ink); transform: scale(1.1); }
.ready-head[role=button]:active .ready-toggle { transform: scale(.96); }
/* 2026-10-14 사용자: 설명 글이 카드 폭을 다 쓰지 않고 중간에서 꺾인다 → 설명 글의 최대 폭 제한을 모두 없앰 */

/* 2026-10-14: 교차검증을 뒤에서 돌림 → 3단계 위 "검수 중" 상자와 [적용]/[그대로] 버튼 *//* 검색 형광펜 + 검색 중 표시 (2026-10-14) */
/* 기자 명단: 10명씩 쪽수 + 고정 높이 (2026-10-14). 4단계 표(.rl-)와 같은 숫자 */
.jl-wrap { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); } /* 높이는 빈 줄(.ghost)로 10줄 채움 (2026-11-03); 비었을 때만 고정 높이 */
.jl-wrap table { width: 100%; border-collapse: collapse; }
.jl-wrap table th { height: 41px; box-sizing: border-box; padding: 0 12px; background: var(--taupe); }
.jl-wrap table td { height: 56px; box-sizing: border-box; padding: 8px 12px; }
.jl-wrap .empty { display: grid; place-items: center; min-height: calc(10 * 56px); }
/* 4단계: 열 순서를 기자 명단과 같게 (이름 / 언론사 / 부서·분야 / 이메일 / 최근 기사 / 상태) */
/* ===== 기자 표 열 너비 고정 (2026-10-14 사용자: 쪽마다 열 너비가 달라진다) — 기자 명단(.jl-table)·받을 기자(.rl-table) 공통 ===== */
/* 열 (2026-10-16 사용자): 이름 100 / 언론사 130 / 이메일 220 / 검색어 110 / [날짜] 기사 제목(남는 폭) / 상태 88 / 추가 방법 118 / 단추 84 */
.table-wrap table.jl-table { table-layout: fixed; width: 100%; min-width: 980px; } /* 고정 열 합 832 + 최근 기사 최소 148. 상자가 1000px 이하면 카드로 바뀜 */ /* 고정 열 합 850 + 기사 제목 최소 150. .table-wrap table 의 720px보다 우선 */ /* 2026-10-19 기자 명단과 같은 열: 고정 열 합 744 + 최근 기사 최소 156. 상자가 1000px 이하면 카드 */
.jl-table col.c-name { width: 100px; }
.jl-table col.c-outlet { width: 130px; }
.jl-table col.c-status { width: 88px; }
.jl-table col.c-actions { width: 84px; }
.jl-table col.c-posted { width: 150px; } .jl-table col.c-link { width: 100px; } /* 올린 날짜·기사 링크 (2026-10-19, 기자 명단·받을 기자 같은 열) */
.jl-table td.nowrap { white-space: nowrap; }
/* 기자 명단 상자 맨 위 줄 (2026-10-19 사용자): 왼쪽 상태 칩, 오른쪽 단추(파일로 관리·기자 찾기·직접 추가), 세로 가운데. 좁으면 단추가 아래 줄로 */
.jl-card { position: relative; } /* 찾는 중 덮개(#disc-card-ov, .ai-overlay)가 이 회색 상자만 덮음 — 메일 보내기와 같은 방식 */
.jl-card > .ai-overlay .send-done .ai-working-foot { gap: 12px; }
.jl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.jl-top .filter-chips { margin-bottom: 0; }
.jl-top .actions { margin-left: auto; align-items: center; }
/* 목록 기능 (2026-10-19): 검색·언론사·정렬 줄, 고른 기자 줄, 맨 앞 고르기 칸 */
.jl-tools { display: grid; grid-template-columns: minmax(0, 1fr) 200px 180px 150px; gap: 8px; margin: 0 0 12px; } /* 검색 / 언론사 / 검색어 / 정렬 (2026-10-22) */
.jl-tools input, .jl-tools select { height: 42px; font-size: 14px; }
.jl-tools .rp-search { height: 42px; flex: none; }
.jl-table col.c-kw2 { width: 170px; } .jl-table col.c-sent { width: 120px; } /* 검색어 · 보낸 기록 (2026-10-22, 명단 = 보낸 기자 목록) */
.jl-table td.j-recent .jl-art { color: inherit; text-decoration: none; display: block; max-width: 100%; }
.jl-table td.j-recent .jl-art:hover .cell-clip { text-decoration: underline; }
.jl-table td.j-recent .jl-art-date { font-size: 12px; line-height: 1.3; margin-top: 1px; }
.jl-kw { display: flex; flex-wrap: wrap; gap: 4px 4px; max-width: 100%; } .jl-kw .au-kw { max-width: 100%; } /* 그 기자의 검색어 전부, 좁으면 줄바꿈 (2026-10-22) */
.jl-table td.j-kw { white-space: normal; line-height: 1.25; }
.jl-table col.c-unsub { width: 84px; } .jl-table td.j-unsub { white-space: nowrap; } /* 수신 거부 열 (2026-10-22) */
.jl-sent { white-space: nowrap; color: var(--graphite); } .jl-sent b { color: var(--ink); font-variant-numeric: tabular-nums; }
.jl-bar { min-height: 34px; margin-bottom: 12px; }
.jl-table col.c-chk { width: 48px; }
.jl-table th:first-child, .jl-table td.j-chk { text-align: center; }
.jl-table td.j-chk { cursor: pointer; }
.jl-table input[type=checkbox] { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--ink); cursor: pointer; }
.jl-table tr.jl-row.on { background: var(--taupe); }
/* 개발용 시험 기자 단추 (2026-10-19, 임시): 점선 테두리 + 「개발용」 꼬리표로 진짜 기능과 구별 */
.dev-tools { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px dashed var(--ash); border-radius: var(--r-pill); }
.dev-tag { font-size: 12px; font-weight: 600; color: var(--warn-ink); letter-spacing: .02em; }
.btn.dev-btn { background: transparent; border-color: transparent; color: var(--warn-ink); }
.btn.dev-btn:hover { background: var(--taupe-deep); }
.src-chip.dev { color: var(--warn-ink); background: var(--taupe-deep); border-color: var(--warn-line); }
.btn.danger-line { color: var(--danger); border: 1px solid var(--danger-line); background: transparent; }
.btn.danger-line:hover { background: var(--danger-soft); border-color: var(--danger); }
.jl-table col.c-actions-wide { width: 190px; }
/* 줄을 누르면 수정 창 (2026-10-15 사용자: 「수정」 단추 제거). 손 모양 + 살짝 밝아짐 */
.jl-table tr.jl-row { cursor: pointer; transition: background var(--dur) var(--ease); }
.jl-table tr.jl-row:hover { background: var(--taupe); }
.jl-table tr.jl-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.jl-table tr.jl-row .jl-actions .btn { cursor: pointer; }
.jl-table col.c-mail { width: 220px; }
.jl-table col.c-kw { width: 110px; }
/* 나머지([날짜] 기사 제목)가 남은 너비를 가진다 */
.jl-table td { overflow: hidden; }
.cell-clip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-actions { text-align: right; white-space: nowrap; }
.jl-actions .btn.sm { padding: 4px 12px; }
.jl-table thead th:last-child { text-align: right; }
.table-wrap.jl-wrap { overflow-x: auto; }/* 넓은 화면: 남는 폭을 기사 제목 한 열에만 몰지 않고 언론사·이메일·검색어도 함께 넓힘 (표가 충분히 넓어 최소 너비 걱정 없음) */
@media (min-width: 1600px) {
  .jl-table col.c-outlet { width: 12%; }
  .jl-table col.c-mail { width: 22%; }
  .jl-table col.c-kw { width: 11%; }
}
/* 1000~1700px(노트북): 고정 열 합이 표보다 커서 유일하게 늘어나는 「관련 기사」 열이 0px 로 접히던 것 (2026-10-29 점검) → 고정 열을 줄여 관련 기사에 150px 이상 남김 */
@media (max-width: 1700px) {
  .jl-table col.c-outlet { width: 100px; } .jl-table col.c-mail { width: 150px; } .jl-table col.c-kw2 { width: 110px; } .jl-table col.c-sent { width: 100px; } .jl-table col.c-by { width: 90px; } .jl-table col.c-posted { width: 120px; } .jl-table col.c-link { width: 84px; }
}
/* 발송 기록 기자별 결과 (2026-10-16 같은 열 순서) */
.hr-table td, .hr-table th { white-space: nowrap; }
.hr-table td .cell-clip { max-width: 260px; }
/* ===== 2단계 배포 일시 · 보도 일시(엠바고) — 같은 너비의 줄 카드 3장, 부드러운 날짜 칸 (2026-10-14) ===== */ /* 바깥 상자 없음: 줄 카드 3장이 아래 홍보 내용 상자(.ai-box)와 같은 끝선·같은 틀 (2026-10-14 사용자: 픽셀 단위로 맞출 것) */
/* 줄 카드: 머리(아이콘·제목·오른쪽 칩) / 내용 / 설명 — 세 장 모두 같은 틀·같은 너비 */ /* = .wizard .ai-box 와 같은 값(22px 24px, 16px, 헤어라인, 크림) */
/* 내용 칸: 모두 높이 44px, 연한 바탕, 얇은 선 (딱딱한 검정 테두리 없음) */
.release-date { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.release-date-cap { font-size: 12px; font-weight: 500; color: var(--smoke); }
.release-seg { display: flex; width: 100%; height: 44px; box-sizing: border-box; position: relative; isolation: isolate; }
.release-seg button { flex: 1; height: 100%; padding: 0 8px; white-space: nowrap; position: relative; z-index: 1; }
/* 2026-10-15 사용자: 선택 표시(검정 알약)가 바로 바뀌지 않고 좌우로 미끄러지고, 반대쪽에 마우스를 올리면 그쪽 절반(큰 알약에서 선택된 부분을 뺀 나머지)이 밝아진다.
   검정 알약은 ::before 하나를 translate 로 옮긴다(단추 2개가 같은 너비라 50% 단위) */
.release-seg::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: var(--r-pill); background: var(--ink); z-index: 1; transition: transform .3s cubic-bezier(.22,1,.36,1); } /* ::after(호버 바닥) 위, 단추 아래 */
.release-seg:has(button:nth-child(2).active)::before { transform: translateX(100%); }
.release-seg button, .release-seg button.active, .release-seg button.active:hover { background: transparent; transition: color .3s var(--ease), background var(--dur) var(--ease); }
.release-seg button.active { color: var(--eggshell); }
.release-seg button:not(.active):hover { background: var(--taupe-deep); color: var(--ink); } /* 단추 하나만 (검정 알약 ::before 는 그대로 미끄러짐) */
@media (prefers-reduced-motion: reduce) { .release-seg::before { transition: none; } }
.release-pick { position: relative; display: grid; align-items: center; }
.release-pick > * { grid-area: 1 / 1; }
.release-pick input[type=date] { width: 100%; height: 44px; box-sizing: border-box; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.release-pick input[type=date]:hover { border-color: var(--line-strong); }
.release-pick input[type=date]:focus { outline: none; border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(212,166,63,.18); }
.release-pick input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.release-pick input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.release-pick-none { display: flex; align-items: center; height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-box); background: var(--white); font-size: 13px; color: var(--smoke); }
.release-pick-when { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); height: 22px; line-height: 20px; box-sizing: border-box; font-size: 12px; font-weight: 600; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn-line); padding: 0 8px; border-radius: var(--r-pill); white-space: nowrap; pointer-events: none; }
.release-pick-when:empty, .release-pick.off .release-pick-when { display: none; }
.release-pick.off input[type=date] { visibility: hidden; }
.release-pick:not(.off) .release-pick-none { visibility: hidden; }
/* 미리보기 줄: 내용 칸도 같은 모양 */
.release-preview:empty { display: none; }
.release-mail-body { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); font-size: 14px; line-height: 1.75; color: var(--ink); min-height: 44px; box-sizing: border-box; }
.release-warn { display: flex; gap: 12px; align-items: center; min-height: 44px; box-sizing: border-box; padding: 12px 16px; border-radius: var(--r-box); background: var(--warn-soft); color: var(--warn-ink); font-size: 13px; }
.release-bad { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--white); background: var(--warn); }
@media (max-width: 700px) { .release-mail-body { min-height: 124px; } /* 4줄(■ 포함 25px) + 여백: 즉시/엠바고 높이 동일 */ }
/* 좁은 화면: 세로로 쌓으면 44px 칸을 넘쳐 아래 날짜 칸과 겹치므로(2026-10-15 확인) 가로 배치를 유지하고 글자만 작게·두 줄 허용 */
@media (max-width: 480px) { .release-seg button { padding: 0 8px; font-size: 12px; white-space: normal; line-height: 1.2; } .release-date { height: auto; min-height: 44px; padding: 8px 16px; } .release-date-cap { flex-basis: 100%; } }
/* ===== 사진 여러 장 (2026-10-14) ===== */ /* 빼기(×) 단추가 썸네일 모서리 밖으로 나가므로 그만큼 여백 */
/* ===== 3단계에서 바로 바꾸기 모달: 배포·보도 일시 / 서명 (2026-10-14) ===== */
.relm-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; margin-bottom: 12px; }
.relm-k { font-size: 13px; font-weight: 600; color: var(--graphite); }
.relm-date { height: 44px; }
.relm-prev { align-items: start; margin-top: 4px; }
.relm-prev .relm-k { padding-top: 12px; }
.relm .release-pick-none { color: var(--smoke); }
@media (max-width: 480px) { .relm-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; } .relm-prev .relm-k { padding-top: 0; }
  .relm-date { height: auto; min-height: 44px; padding: 8px 16px; } } /* 좁으면 설명이 줄바꿈되어 상자 밖으로 나가던 것 (2026-10-20) */
/* 발송 기록 상세 제목 + 이름 바꾸기 연필 (2026-10-15) */
.hd-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hd-title h1 { margin: 0; }
/* 발송 기록 상세 머리 (2026-10-21 사용자): 「발송 기록 목록」은 제목 위 왼쪽, 이름 바꾸기는 글자 단추, 고칠 때 제목 글꼴·자리 그대로 */
.hd-back { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 12px; margin-bottom: 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--eggshell); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hd-back:hover { background: var(--taupe-deep); border-color: var(--line-strong); }
.hd-back span { transition: transform var(--dur) var(--ease); }
.hd-back:hover span { transform: translateX(-3px); }
.hd-head .hd-main { min-width: 0; max-width: 100%; }
.hd-title h1 { min-width: 0; overflow-wrap: anywhere; border-radius: var(--r-input); outline: none; margin-left: -12px; padding: 0 12px; } /* 여백을 늘 두어 고칠 때 테두리가 생겨도 글자가 안 움직임 */
.hd-title h1.editing { box-shadow: 0 0 0 2px var(--eggshell), 0 0 0 4px var(--ink); background: var(--eggshell); cursor: text; }
.hd-acts { display: inline-flex; gap: 8px; flex: none; }
.hd-rename { height: 36px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--eggshell); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hd-rename:hover { background: var(--taupe-deep); border-color: var(--line-strong); }
.hd-rename.primary { background: var(--ink); border-color: var(--ink); color: var(--eggshell); }
.hd-rename.primary:hover { background: var(--primary-dark); }
/* 기자가 들어온 경로 칩: 직접 / 파일 / AI (2026-10-15 사용자). 이름 옆, 12px */
.src-chip { display: inline-block; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; line-height: 18px; color: var(--smoke); background: var(--taupe); border: 1px solid var(--line); white-space: nowrap; }
.src-chip.ai_discover { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--warn-line); }
.src-chip.crawl { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.jl-table col.c-src { width: 118px; } /* 「추가 방법」 열 (2026-10-15 사용자: 이름 옆이 아니라 따로). 검색어는 따로 열(2026-10-16) */
td.c-src-td { white-space: nowrap; }
.seg-pick button[data-off] { opacity: .5; cursor: not-allowed; }
.seg-pick button[data-off] .muted { font-size: 12px; }
/* ===== 기자 명단 머리: 파일 메뉴(접힘) + AI로 기자 찾기 + 직접 추가 (2026-10-15) ===== */
.disc-spark { color: var(--gold); margin-right: 2px; }
/* AI로 기자 찾기 창 */
/* 크롤러 도우미 연결 상태 (2026-10-16): 꺼짐 = 빨강, 켜짐 = 초록 */
/* 코드 크롤링 최종 결과 = 기사 링크 목록 (2026-10-16 사용자: 단계는 보여 주지 말고 결과만) */
/* 코드 크롤링 단계 기록 (2026-10-16): 접힌 <details>, 보고 싶은 사람만 편다. 실패했을 때만 펼쳐진 채로 */ /* 진행 중은 금색 */
/* 칸 너비 고정(2026-10-19): 연락처·이름이 길어도 표가 넓어지지 않아 「기사 링크」가 밖으로 밀리지 않음. 남는 폭은 최근 기사 칸, 넘치는 글자는 … */
.disc-head-sp { flex: 1; } /* 발송 기록 이름 + 「↺ 자동 이름」 (2026-10-19) */
/* 미리보기 기자 고르기 (2026-10-19): ‹ [1. 이름 · 언론사 · A 버전 ▾] › n / N명 */ /* 미리보기 안 「이 기자 메일만 고치기」·「되돌리기」 (2026-10-20) */
/* 미리보기에서 바로 고치기 (2026-10-20): 평소엔 메일 글자처럼 보이고, 올리면 점선 테두리, 누르면 고치는 칸 */
.pv-editable { white-space: normal; }
.pv-ed { display: block; width: calc(100% + 16px); margin: 0 -8px 16px; padding: 4px 8px; border: 1px dashed transparent; border-radius: var(--r-sm); background: transparent;
  font: inherit; color: inherit; line-height: inherit; resize: none; overflow: hidden; white-space: pre-wrap; transition: border-color .15s, background .15s; cursor: text; }
.pv-ed:hover { border-color: var(--line); background: rgba(0, 0, 0, .02); }
.pv-ed:focus { outline: none; border-style: solid; border-color: var(--ink); background: var(--white); }
.pv-ed::placeholder { color: var(--smoke); }
/* 제목: 보내는/받는 사람(작은 회색)과 달리 크고 굵은 글자. 다른 칸처럼 평소 테두리 없음 */
.pv-article-body .pv-ed { margin-bottom: 0; }
.pv-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.pv-pick-label { font-size: 13px; font-weight: 600; color: var(--graphite); margin-right: 2px; }
.pv-pick select { flex: 1 1 260px; min-width: 0; height: 40px; font-size: 14px; }
.pv-pick .btn.sm { width: 40px; height: 40px; padding: 0; font-size: 18px; } /* 이 기자 문장을 아직 받는 중(처음 한 번) — 앞 기자 화면을 흐리게 두었다가 바로 바꿈 */
/* 진행 상자의 「중단하기」 (2026-10-19 사용자): AI 다듬기·보내기·기자 찾기 모두 오른쪽 아래, 빨간 느낌 */
.ai-working-foot.stop-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.ai-working-foot.stop-foot > .muted { flex: 1 1 220px; }
.btn.stop-btn { margin-left: auto; color: var(--danger); background: var(--white); border: 1px solid var(--danger-line); font-weight: 600; }
.btn.stop-btn:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.stop-btn:disabled { opacity: .6; cursor: progress; } /* 결과가 있으면 「다시 찾기」는 왼쪽, 「고른 n명 명단에 넣기」는 오른쪽 */
.dp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 14px; }
.dp-count { margin-right: 8px; }
/* ===== 반응형: 좁으면 표 → 기자 카드 (2026-10-19 사용자 "반응형으로, 앞으로 디자인할 때도") =====
   화면 폭이 아니라 표가 놓인 상자의 폭(컨테이너 쿼리)으로 바꾼다 — 창(모달) 안에서도, 사이드바가 있어도 같은 기준.
   카드에서는 가로 스크롤 없이 이름·언론사 → 연락처 → 최근 기사 → 날짜·링크 순서. 넓으면 원래 표 그대로 */
.dp-head-t { display: none; }
.dp-head-l { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
@container dres (max-width: 860px) {
  .dp-head-l { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .dp-head-t { display: inline; font-size: 13px; color: var(--graphite); }
}
/* 좁은 화면 머리: 제목·설명은 왼쪽 정렬, 단추 줄은 꽉 차게 (뒤쪽 .page-head { align-items: center } 가 세로 배치에서 제목을 가운데로 밀던 것) */
@media (max-width: 800px) { .page-head { align-items: stretch; } }
@media (max-width: 760px) { .jl-tools { grid-template-columns: 1fr 1fr; } .jl-tools .rp-search { grid-column: 1 / -1; } }
@media (min-width: 761px) and (max-width: 1100px) { .jl-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .jl-tools .rp-search { grid-column: 1 / -1; } }
#list { container: jlist / inline-size; }
@container jlist (max-width: 1000px) {
  .table-wrap.jl-wrap { overflow: visible; min-height: 0; border: 0; background: transparent; }
  .table-wrap.jl-wrap table.jl-table { min-width: 0; table-layout: auto; display: block; }
  .jl-table colgroup { display: none; }
  .jl-table thead { display: block; margin-bottom: 8px; }
  .jl-table thead tr { display: flex; }
  .jl-table thead th { display: none; }
  .table-wrap.jl-wrap .jl-table thead th:first-child { display: flex; width: 100%; height: auto; padding: 12px 16px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-box); position: static; }
  .jl-table .dp-head-t { display: inline; font-size: 13px; color: var(--graphite); }
  .jl-table tbody { display: grid; gap: 8px; }
  .table-wrap.jl-wrap .jl-table tr.jl-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "chk name act" "chk outlet unsub" "chk mail mail" "chk recent recent" "chk c5 c6" "chk by by"; gap: 4px 12px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
  .jl-table td.j-unsub { grid-area: unsub; justify-self: end; }
  .table-wrap.jl-wrap .jl-table tr.jl-row.on { background: var(--taupe); }
  .table-wrap.jl-wrap .jl-table tr.jl-row > td.j-chk { grid-area: chk; padding-top: 2px; text-align: left; }
  .table-wrap.jl-wrap .jl-table tr.jl-row > td { display: block; height: auto; padding: 0; border: 0; max-width: none; position: static; background: none; white-space: normal; }
  .jl-table td.j-name { grid-area: name; font-size: 15px; } .jl-table td.jl-actions { grid-area: act; align-self: start; }
  .jl-table td.j-outlet { grid-area: outlet; color: var(--graphite); font-size: 13px; }
  .jl-table td.j-mail { grid-area: mail; } .jl-table td.j-recent { grid-area: recent; }
  .jl-table td.j-recent .cell-clip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .jl-table td.j-c5 { grid-area: c5; color: var(--smoke); } .jl-table td.j-c6 { grid-area: c6; justify-self: end; }
  .jl-table td.j-by { grid-area: by; color: var(--smoke); } .table-wrap.jl-wrap .jl-table .j-by-l { display: inline; }
  .jl-wrap .empty { min-height: 240px; }
} /* 목록(select) 자리에 그대로 들어섬 — 높이 같음 */
/* 기자 찾기 창 배치 (2026-10-19 사용자): 위 칸·안내·결과 머리·아래 단추는 늘 보이고, 기자 목록(표 상자)만 스크롤. 표 머리글은 상자 안에서 위에 붙음.
   화면이 낮거나 좁으면(휴대폰) 창 전체가 스크롤되는 원래 방식 — 위 칸만으로 화면이 차서 목록 자리가 없기 때문 */
/* ===== 서명 보관함 관리 창 (2026-10-15): 한 줄에 하나, 이름을 누르면 아래에 미리보기 ===== */
/* ===== 첨부 파일 목록 (미리보기·발송 기록, 2026-10-14) ===== */
.attach-head { font-weight: 600; margin-bottom: 8px; }
.attach-list { display: flex; flex-wrap: wrap; gap: 12px; }
.attach-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); min-width: 0; max-width: 100%; }
.attach-item img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); margin: 0; display: block; }
.attach-doc { display: grid; place-items: center; width: 64px; height: 48px; border-radius: var(--r-sm); background: var(--taupe-deep); color: var(--graphite); font-size: 12px; font-weight: 600; }
.attach-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attach-name b { font-size: 13px; font-weight: 600; word-break: break-all; }
/* ===== 5단계 보내는 중 / 완료 (2026-10-14) ===== */
.send-box { width: min(100%, 680px); }
.send-scene { display: flex; align-items: center; gap: 16px; padding: 20px 12px 12px; }
.send-end { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 600; min-width: 56px; }
.send-end svg { width: 44px; height: 44px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--white); border: 1px solid var(--line); }
.send-to svg { animation: send-bob 2.2s var(--ease) infinite; }
.send-path { position: relative; flex: 1; height: 60px; overflow: hidden; }
.send-trail { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--line-strong); animation: send-dash 1.2s linear infinite; }
.send-env { position: absolute; left: -26px; top: 50%; width: 22px; height: 22px; margin-top: -12px; color: var(--ink); opacity: 0; animation: send-fly 2.75s cubic-bezier(.4,.1,.6,.9) infinite; }
.send-env svg { display: block; width: 22px; height: 22px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08)); }
@keyframes send-fly {
  0% { left: 0; transform: translateY(0) rotate(-8deg) scale(.7); opacity: 0; }
  10% { opacity: 1; transform: translateY(-4px) rotate(-6deg) scale(1); }
  50% { transform: translateY(-16px) rotate(4deg); }
  92% { opacity: 1; }
  100% { left: calc(100% - 22px); transform: translateY(2px) rotate(-4deg) scale(.7); opacity: 0; } /* 길 끝에서 작아지며 사라짐 (잘리지 않게) */
}
@keyframes send-dash { from { background-position: 0 0; transform: translateX(0); } to { transform: translateX(-12px); } }
@keyframes send-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.send-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.send-title > b { font-size: 18px; }
.send-count { font-size: 14px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.send-count b { font-size: 20px; color: var(--ink); }
.send-progress { margin-top: 12px; } /* 높이·색은 아래 .au-eta-bar 와 같은 규칙 (2026-11-03) */
.au-time.send-eta { margin: 12px 0 4px; } /* 지난 시간 · % · 예상 남은 시간 세 칸 — .au-time 과 같은 격자 (2026-11-03) */
.bar-note { min-height: 1.5em; margin: 2px 0 8px; font-size: var(--fs-sm); color: var(--smoke); line-height: 1.5; } /* 막대 아래 문구 한 줄(없으면 빈 줄로 높이 유지) */
.ai-overlay .send-done, .send-done, .send-done-title, .send-done-stats { text-align: center; } /* .ai-overlay .ai-working 의 왼쪽 정렬보다 우선 (2026-10-14 사용자: 완료 문구 가운데) */
.send-done-mark { position: relative; width: 84px; height: 84px; margin: 8px auto 0; }
.send-done-ring { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--eggshell); font-size: 34px; font-weight: 700; animation: send-pop .3s var(--ease-out) both; }
.send-done.bad .send-done-ring { background: var(--danger); }
.send-done-ring svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: send-draw .3s .2s var(--ease-out) forwards; }
.send-spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -4px; border-radius: 50%; background: var(--gold); transform: rotate(var(--a)) translateX(0); opacity: 0; animation: send-spark .9s .2s var(--ease-out) both; }
.send-spark:nth-child(odd) { background: var(--ink); width: 5px; height: 5px; }
@keyframes send-pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes send-draw { to { stroke-dashoffset: 0; } }
@keyframes send-spark { 0% { transform: rotate(var(--a)) translateX(14px); opacity: 0; } 25% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(62px); opacity: 0; } }
.send-done-title { font-size: 22px; font-weight: 700; margin-top: 16px; letter-spacing: -.01em; }
.send-done-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-size: 15px; color: var(--graphite); }
.send-done-stats b { font-size: 18px; color: var(--ink); }
.send-done-stats .ok b { color: var(--ok); }
.send-done-stats .fail b { color: var(--danger); }
.send-done .ai-working-note { text-align: center; }
.send-done .ai-working-foot { justify-content: center; gap: 12px; margin-top: 28px; } /* 안내 글과 단추 사이를 띄움 */
.send-done .ai-working-note { margin-top: 12px; }
@media (max-width: 480px) { .send-scene { gap: 8px; padding: 12px 0 8px; } .send-end { min-width: 48px; font-size: 12px; } .send-end svg { width: 38px; height: 38px; padding: 8px; } .send-title { flex-direction: column; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .send-env, .send-trail, .send-to svg, .send-spark { animation: none; } .send-env { opacity: .6; left: 40%; } }
/* 사진: 넣고 빼는 대상(버전) 고르기 + 썸네일의 버전 표시 (2026-10-14) */
/* ===== 작은 효과들 (transitions.dev 참고, 2026-10-14) ===== */
.nav a { position: relative; }
/* 진행 수 숫자가 바뀔 때 흐림과 함께 떠오른다 (number-pop-in) */
.send-count b.pop { display: inline-block; animation: num-pop .3s var(--ease-out) both; }
@keyframes num-pop { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* AI 단계 문구에 은은한 빛 쓸기 (shimmer-text / thinking-states) */
.ai-working-head b { background: linear-gradient(100deg, var(--ink) 0 42%, #b8902c 50%, var(--ink) 58% 100%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: text-shimmer 2.4s linear infinite; }
.ai-working-head b.swap { animation: ai-swap .35s var(--ease-out), text-shimmer 2.4s linear infinite; }
@keyframes text-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* 완료 체크: 흐림·회전과 함께 들어온다 (success-check) */
.send-done-ring svg { animation: check-in .55s .15s var(--ease-out) both; }
@keyframes check-in { from { opacity: 0; transform: rotate(-25deg) scale(.5); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* 다음/이전 단추: 마우스를 올리면 화살표 방향으로 살짝 (learn-more-hover) */
@media (prefers-reduced-motion: reduce) { .send-count b.pop, .ai-working-head b, .send-done-ring svg { animation: none; } .ai-working-head b { color: var(--ink); background: none; } }
/* ===== 「메일 보내기」 옆 진행 표시 (2026-10-15 사용자): 진행 중인 것이 있으면 이름 옆에 작은 점 매트릭스가 반짝이고,
   마우스를 올리면 "2단계 진행 중 · 홍보 내용 적기" 같은 말풍선. 메뉴 높이는 다른 항목과 같다.
   점 매트릭스 = transitions.dev 'matrix-loader' 스니펫(.t-matrix, 4×4 2px 점, 공용 색 펄스) 그대로, 색만 테마에 맞춤 ===== */
:root { --matrix-cycle: 1200ms; --matrix-base: #d2ccc3; --matrix-active: #6b6b75; --matrix-ease: ease-in-out; }
.t-matrix { display: grid; grid-template-columns: repeat(4, 2px); grid-auto-rows: 2px; gap: 2px; }
.t-matrix i { display: block; background: var(--matrix-base); animation: t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes t-matrix-pulse { 0%, 45%, 100% { background-color: var(--matrix-base); } 15% { background-color: var(--matrix-active); } }
@media (prefers-reduced-motion: reduce) { .t-matrix i { animation: none !important; } }
/* 오른쪽 묶음: 점 매트릭스(작업 중에만) + 상태 글자(늘 보임: 시작 가능 / 진행 중 / AI 작성 중 / 보내는 중 / 보내기 완료) (2026-10-15 사용자) */
.nav-right { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.nav-mx { position: static; margin: 0; }
.nav-mx[hidden] { display: none; }
.nav-state { font-size: 12px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--smoke); transition: color var(--dur) var(--ease); }
.nav-state:empty { display: none; }
.nav-state.free, .nav-state.done { color: var(--ok); }
.nav-state.draft, .nav-state.work { color: var(--warn); }
.nav-state.fail { color: var(--danger); }
.nav a.active .nav-state { color: rgba(253,252,252,.7); }
.nav a.active .nav-state.free, .nav a.active .nav-state.done { color: var(--ok-line); }
.nav a.active .nav-state.draft, .nav a.active .nav-state.work { color: var(--on-dark-gold); }
.nav a.active .nav-state.fail { color: var(--on-dark-danger); }
.nav-state.swap { animation: nav-sub-in .3s var(--ease-out) both; }
/* transitions.dev 'shimmer-text' 그대로 (2026-10-15 사용자: 진행 중·AI 작성 중·보내는 중·보내기 완료 글자에 빛 쓸기). 색은 상태별 변수로 */
:root { --shimmer-dur: 2000ms; --shimmer-base: #7c7c7c; --shimmer-highlight: #0d0d0d; --shimmer-band: 400%; --shimmer-ease: linear; }
.t-shimmer { position: relative; display: inline-block; color: var(--shimmer-base); }
.t-shimmer::before { content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--shimmer-highlight) 50%, transparent 60%, transparent 100%);
  background-size: var(--shimmer-band) 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite; }
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .t-shimmer::before { animation: none !important; } }
.nav-state.t-shimmer.draft, .nav-state.t-shimmer.work { --shimmer-base: var(--warn); --shimmer-highlight: #4a2c00; }
.nav-state.t-shimmer.done { --shimmer-base: var(--ok); --shimmer-highlight: #0f4a2c; }
.nav a.active .nav-state.t-shimmer.draft, .nav a.active .nav-state.t-shimmer.work { --shimmer-base: #e3b341; --shimmer-highlight: #fff3c4; }
.nav a.active .nav-state.t-shimmer.done { --shimmer-base: #8fd6a4; --shimmer-highlight: #ffffff; }
.nav-state.t-shimmer { color: var(--shimmer-base); }
@keyframes nav-sub-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.nav a[data-page="compose"] { white-space: nowrap; gap: 12px; } /* 이름 뒤 남는 자리에 오른쪽 묶음이 들어간다 (236px 사이드바 기준 "AI 작성 중"+점까지 여유 약 4px) */
.nav-right { gap: 4px; } .nav-state { letter-spacing: -.02em; }
.nav-mx.work { --matrix-base: #e9d9a8; --matrix-active: #c7901a; } /* AI 만드는 중·보내는 중은 금색 */
.nav a.active .nav-mx { --matrix-base: rgba(253,252,252,.28); --matrix-active: #fdfcfc; }
.nav a.active .nav-mx.work { --matrix-base: rgba(255,217,107,.35); --matrix-active: var(--on-dark-gold); }
/* 작업 중(AI 만드는 중·보내는 중) 테두리: 금색 빛 한 줄기가 알약 테두리를 따라 천천히 돈다 (2026-10-15 사용자) */
@property --nav-ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.nav a.working::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 4px; pointer-events: none;
  background: conic-gradient(from var(--nav-ring), #d9b35a 0 8%, rgba(227,179,65,.42) 22% 78%, #ffd98a 92%, #d9b35a 100%); /* 링은 항상 보이고(연한 금색), 밝은 구간이 그 위를 돈다 (2026-10-15 사용자) */
  -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: nav-ring 2.6s linear infinite; }
.nav a.working.active::before { background: conic-gradient(from var(--nav-ring), #e6c35e 0 8%, rgba(255,217,107,.45) 22% 78%, #fff0b8 92%, #e6c35e 100%); }
/* 완료(초안 완성·보내기 완료)는 초록 링, 실패는 빨간 링 (2026-10-15: 진행 중·완료에도 링을 늘 보이게 하면서 색으로 구분) */
.nav a.working[data-state="done"]::before { background: conic-gradient(from var(--nav-ring), #4caf72 0 8%, rgba(76,175,114,.4) 22% 78%, #b9f0cc 92%, #4caf72 100%); }
.nav a.working.active[data-state="done"]::before { background: conic-gradient(from var(--nav-ring), #7fd49b 0 8%, rgba(159,227,178,.45) 22% 78%, #ffffff 92%, #7fd49b 100%); }
.nav a.working[data-state="fail"]::before { background: conic-gradient(from var(--nav-ring), #e5484d 0 8%, rgba(229,72,77,.4) 22% 78%, #ffc9cb 92%, #e5484d 100%); }
@keyframes nav-ring { to { --nav-ring: 360deg; } }
@media (prefers-reduced-motion: reduce) { .nav a.working::before { animation: none; background: rgba(227,179,65,.6); } }
.nav a.working::before { padding: 4px; inset: -1px; } /* 링이 항상 보이므로 살짝 두껍게. 1px 바깥까지 그려 검정 알약 가장자리를 덮음 (2026-11-03 사용자: 링 밖으로 검정이 삐져나옴) */
/* 말풍선: 메뉴 오른쪽에 붙어 나온다 (좁은 화면은 아래) */
.nav-tip { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); z-index: 30; padding: 8px 12px; border-radius: var(--r-input); background: var(--ink); color: var(--eggshell); font-size: 13px; font-weight: 500; line-height: 1.35; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease-out); }
.nav-tip::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--ink); transform: rotate(45deg); border-radius: var(--r-xs); }
.nav-tip:empty { display: none; }
.nav a:hover .nav-tip, .nav a:focus-visible .nav-tip { opacity: 1; transform: translate(0, -50%); transition-delay: .12s; }
.nav-tip.free { background: var(--ok); } .nav-tip.free::before { background: var(--ok); }
.nav-tip.work { background: var(--warn); } .nav-tip.work::before { background: var(--warn); }
@media (max-width: 800px) {
  .nav-tip { left: 46px; top: auto; bottom: calc(100% - 4px); transform: translate(0, -2px); }
  .nav-tip::before { left: 14px; top: auto; bottom: -3px; margin-top: 0; }
  .nav a:hover .nav-tip, .nav a:focus-visible .nav-tip { transform: translate(0, -6px); }
}

/* 받을 기자(2단계)·발송 기록 기자별 결과도 좁으면 카드 (2026-10-19, 기자 명단과 같은 반응형 규칙) */
.hr-card { container: hrc / inline-size; }
/* 발송 기록 상세 (2026-10-21 사용자): 왼쪽 기자별 결과(누르면 고름/한 번 더 누르면 풂) · 오른쪽 보낸 내용. 표는 10줄 높이 고정 */
.hd-grid { align-items: start; }
@media (max-width: 1200px) { .hd-grid { grid-template-columns: minmax(0, 1fr); } } /* 1024px 처럼 두 칸이 300px 씩이면 기자 카드·쪽수 줄이 다 넘침 → 위아래 한 칸 (2026-11-02 점검) */
.hr-hint { margin: -4px 0 12px; }
/* 왼쪽 칸이 좁을 때(1000~1700px 두 칸 배치) 쪽수 줄이 칸보다 넓어 「쪽 이동」이 잘림 (2026-11-02 점검, 실측 613px > 490px) → 좁은 화면과 같은 두 줄 배치 */
@container hrc (max-width: 660px) { #hr-pager { grid-template-columns: 1fr 1fr; grid-template-areas: "btns btns" "info jump"; min-height: 80px; align-content: start; } }
.hr-wrap table { width: 100%; }
.hr-table th { height: 41px; box-sizing: border-box; }
.hr-table td { height: 56px; box-sizing: border-box; }
.hr-table td.h-mail { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.hr-table td .h-err { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hr-table tr.hr-row { cursor: pointer; transition: background var(--dur) var(--ease); }
.hr-table tr.hr-row:hover > td { background: var(--taupe); }
.hr-table tr.hr-row.on > td { background: var(--taupe); }
.hr-table tr.hr-row.on > td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.hr-table tr.hr-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.hr-table .empty { height: calc(10 * 56px); text-align: center; }
@container hrc (max-width: 760px) {
  .hr-card .table-wrap { overflow: visible; border: 0; background: transparent; min-height: 0; }
  .hr-card table.hr-table { min-width: 0; display: block; }
  .hr-table thead { display: none; }
  .hr-table tbody { display: grid; gap: 8px; }
  .hr-card .hr-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name st" "outlet var" "mail at"; gap: 4px 12px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
  .hr-card .hr-table tr.hr-row:hover { background: var(--taupe); }
  .hr-card .hr-table tr.hr-row.on { background: var(--taupe); border-color: var(--ink); }
  .hr-card .hr-table tr > td { display: block; height: auto; padding: 0; border: 0; max-width: none; position: static; background: none !important; box-shadow: none !important; white-space: normal; text-align: left; }
  .hr-table td.h-name { grid-area: name; } .hr-table td.h-st { grid-area: st; justify-self: end; text-align: right; } .hr-table td.h-outlet { grid-area: outlet; color: var(--graphite); }
  .hr-table td.h-var { grid-area: var; justify-self: end; } .hr-table td.h-mail { grid-area: mail; overflow-wrap: anywhere; } .hr-table td.h-at { grid-area: at; justify-self: end; color: var(--smoke); }
  .hr-table .empty { height: auto; min-height: 120px; }
  .hr-card .hr-table tr { grid-template-areas: "name st" "outlet var" "mail at" "rb rb"; }
  .hr-table td.h-rb { grid-area: rb; } .hr-table td.h-rb.none { display: none; }
}
.hr-table td.h-rb { white-space: nowrap; }
/* ───────── 원버튼 보내기 (2026-10-21 사용자): 홍보 내용 → AI 검색어·기자·메일 → 확인 → 보내기 ───────── */
.au-card { position: relative; container: auc / inline-size; }
.au-card > .ai-overlay { border-radius: inherit; } /* 두 단추를 같은 너비로 — 검정 선택 알약(::before)이 절반 너비라 글자 길이가 달라도 겹치지 않게 */
.au-stages { list-style: none; margin: 16px 0 4px; padding: 0; display: grid; gap: 8px; }
.au-stages li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--smoke); min-width: 0; white-space: nowrap; } /* 한 줄로 (2026-10-21 사용자): 뒤 설명은 … 으로 */
.au-stages li > span:nth-child(2) { flex: none; }
.au-stages li .au-st-mark { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; flex: none; background: var(--eggshell); }
.au-stages li.done { color: var(--graphite); }
.au-stages li.done .au-st-mark { background: var(--ok); border-color: var(--ok); color: var(--white); }
.au-stages li.now { color: var(--ink); font-weight: 600; }
.au-stages li.now .au-st-mark { border-color: var(--ink); animation: au-pulse 1.2s ease-in-out infinite; }
@keyframes au-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(20,18,16,.25); } 50% { box-shadow: 0 0 0 7px rgba(20,18,16,0); } }
.au-stages li .au-st-sub { font-size: 13px; font-weight: 400; color: var(--smoke); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.au-head h2 { margin: 0; }
.au-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-n { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; padding: 4px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--eggshell); font-size: 14px; font-weight: 500; vertical-align: middle; transition: background var(--dur) var(--ease); } /* 「82명 선택 · 찾은 82명」 검정 알약 (2026-10-22 사용자: 몇 명 골랐는지 잘 보이게) */
.au-n b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.au-n .au-n-of { color: rgba(253,252,252,.6); font-size: 13px; }
.au-n.none { background: var(--taupe-deep); color: var(--danger); } .au-n.none .au-n-of { color: var(--danger); opacity: .7; }
.au-table td, .au-table th { white-space: nowrap; }
.au-table tr.au-row { cursor: pointer; transition: background var(--dur) var(--ease); }
.au-table tr.au-row:hover > td { background: var(--taupe); }
.au-table tr.au-row.on > td { background: var(--taupe); }
.au-table tr.au-row.off { opacity: .55; cursor: not-allowed; }
.au-table td.au-chk, .au-table th.au-chk { width: 36px; text-align: center; }
.au-table td.a-why { white-space: normal; min-width: 220px; max-width: 320px; line-height: 1.45; }
.au-table td.a-title .cell-clip { max-width: 260px; display: inline-block; vertical-align: bottom; }
.au-table td.a-mail { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.au-score { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--taupe-deep); margin-right: 8px; vertical-align: middle; }
.au-score.sh { background: var(--ok-soft); color: var(--ok); }
.au-score.sm { background: var(--warn-soft); color: var(--warn-ink); }
.au-last { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-ink); font-size: 12px; }
.badge.kn { background: var(--eggshell); border: 1px solid var(--line); color: var(--graphite); font-size: 12px; }
#au-send .btn.lg { height: 52px; font-size: 16px; margin-top: 4px; }
#au-send .btn.ai.lg { padding: 0 32px; } /* 「n명에게 보내기」도 「기자 찾고 메일 만들기」와 같은 AI 단추 (2026-10-22 사용자) */
.btn.ai:disabled { animation: none; box-shadow: none; }
/* 보내는 중·완료 창: 04번 상자가 아니라 본문 전체를 흐리게 덮고(메뉴는 그대로 눌림) 창은 화면 가운데에 붙어 있음 — 구버전 5단계처럼 (2026-10-21 사용자) */
.main { position: relative; }
.main > #au-sent { position: absolute; inset: 0; border-radius: 0; z-index: 20; padding: 36px 48px; }
.main > #au-sent .ai-working { top: max(16px, calc(50vh - 180px)); }
@media (max-width: 760px) { .main > #au-sent { padding: 24px 16px; } }
@container auc (max-width: 860px) {
  .au-card .table-wrap { overflow: visible; border: 0; background: transparent; }
  .au-card table.au-table { min-width: 0; display: block; }
  .au-table thead { display: none; }
  .au-table tbody { display: grid; gap: 8px; }
  .au-card .au-table tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "chk name" "chk media" "chk mail" "chk title" "chk why" "chk kw" "chk last"; gap: 4px 12px; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
  .au-card .au-table tr.au-row.on { background: var(--taupe); border-color: var(--ink); }
  .au-card .au-table tr > td { display: block; padding: 0; border: 0; max-width: none; min-width: 0; background: none !important; white-space: normal; text-align: left; }
  .au-table td.au-chk { grid-area: chk; width: auto; } .au-table td.a-name { grid-area: name; } .au-table td.a-media { grid-area: media; color: var(--graphite); }
  .au-table td.a-mail { grid-area: mail; overflow-wrap: anywhere; } .au-table td.a-why { grid-area: why; } .au-table td.a-title { grid-area: title; }
  .au-table td.a-title .cell-clip { max-width: none; white-space: normal; display: inline; } .au-table td.a-last { grid-area: last; }
}

/* 메일 보내기 신버전/구버전 고르기 (2026-10-21 사용자): 두 화면 머리 오른쪽 알약 + 제목 옆 표 */

/* 신버전 메일 보내기 — 글쓰기 도구(컴포저) 어법 (2026-10-21 사용자: "가운데에 목매지 말고 자연스럽고 이쁘고 고급스럽게").
   구역마다 작은 번호 라벨(.eyebrow) + 제목, 1번은 큰 글쓰기 면 + 아래 도구막대(왼쪽 설정·오른쪽 단추). 그림자 없음, 헤어라인, 둥근 알약 */
.au-card { padding: 32px 36px 28px; }
.au-sec-head .eyebrow { margin-bottom: 8px; }
.au-sec-head h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.au-sec-head p { margin: 8px 0 0; max-width: 560px; }
.au-composer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 20px; } /* 왼쪽 제목과 오른쪽 서비스 칸의 윗선을 맞춤 (2026-10-22 사용자) */
.au-svc-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.au-composer-head .au-sec-head { padding-top: 4px; } /* 제목 글자 윗선 = 오른쪽 라벨 윗선 */
.au-sheet textarea { width: 100%; padding: 24px 24px; border-radius: var(--r-card); font-size: 15px; line-height: 1.8; background: var(--eggshell); border: 1px solid var(--line); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.au-sheet textarea:focus { background: var(--white); border-color: var(--line-strong); }
.au-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 16px; }
.au-tools-left { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.au-opt2 { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.au-opt2-k { font-size: 13px; color: var(--smoke); white-space: nowrap; }
.au-opt2-v { font-size: 13px; color: var(--graphite); white-space: nowrap; }
.au-today { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-pill); background: var(--eggshell); border: 1px solid var(--line); }
.seg-pick.mini { padding: 2px; }
.seg-pick.mini button { height: 28px; padding: 0 12px; font-size: 13px; }
/* 숫자·날짜 칸: 자리는 늘 두고(옆이 밀리지 않게, 2026-10-21 사용자) 안 고르면 흐리게·잠금, 고르면 또렷하게 */
.au-in { display: inline-flex; opacity: .38; transition: opacity .3s var(--ease); }
.au-in.on { opacity: 1; }
.au-in-body { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.au-in:not(.on) .au-date { cursor: default; }
.au-in:not(.on) .au-date:hover { background: var(--eggshell); }
.au-svc-hint { font-weight: 400; color: var(--smoke); }
/* 서비스 이름 직접 적는 칸 (2026-10-22 사용자: 알약 없이 칸 하나, 자주 쓰는 이름은 자동완성) */
.au-svc-row { display: flex; width: 100%; justify-content: flex-end; }
.au-svc-in { height: 44px; width: 360px; max-width: 100%; padding: 0 20px; border-radius: var(--r-pill); font-size: 15px; background: var(--eggshell); }
.au-svc-in:focus { background: var(--white); }
@media (max-width: 760px) { .au-svc-wrap { width: 100%; align-items: stretch; } .au-svc-in { width: 100%; } .au-svc-head .au-opt2-k { white-space: normal; } }
.au-opt2 input[type=number] { width: 64px; height: 32px; text-align: center; font-size: 14px; padding: 0 8px; border-radius: var(--r-pill); -moz-appearance: textfield; }
.au-opt2 input[type=number]::-webkit-outer-spin-button, .au-opt2 input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 날짜 칸을 알약으로: 달력 아이콘 + 네모 테두리 없는 입력 (브라우저 달력은 그대로) */
.au-date { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 12px; border-radius: var(--r-pill); background: var(--eggshell); border: 1px solid var(--line); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.au-date:hover { background: var(--taupe-deep); }
.au-date:focus-within { border-color: var(--ink); background: var(--white); }
.au-date-ic { display: inline-grid; place-items: center; color: var(--graphite); }
.au-date-ic svg { width: 15px; height: 15px; }
.au-date input[type=date] { height: 30px; border: 0; background: transparent; padding: 0; font-size: 14px; color: var(--ink); width: 150px; outline: none; cursor: default; } /* 숫자 뒤 빈 자리를 두어 거기를 눌러도 달력 */
.au-date .au-date-ic { cursor: pointer; }
.au-date input[type=date]::-webkit-calendar-picker-indicator { opacity: 0; width: 0; margin: 0; }
.au-when { font-size: 12px; color: var(--warn-ink); background: var(--warn-soft); padding: 4px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.au-toolbar .btn.ai.lg { height: 50px; padding: 0 32px; font-size: 15px; flex: none; }
.au-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-top: 12px; }
.au-notice { min-height: 18px; }
.au-notice.bad { color: var(--danger); }
.au-send-row { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.au-send-row .field { flex: 1 1 360px; margin: 0; }
.au-send-row .btn.lg { height: 48px; padding: 0 32px; font-size: 15px; flex: none; }
@media (max-width: 800px) {
  .au-card { padding: 24px 20px; }
  .au-svc-wrap { align-items: flex-start; width: 100%; }
  .au-toolbar .btn.ai.lg { width: 100%; }
  .au-send-row .btn.lg { width: 100%; }
}
@media (max-width: 600px) {
  .au-tools-left { flex-direction: column; align-items: stretch; gap: 12px; }
  .au-opt2 { justify-content: space-between; flex-wrap: wrap; }
  .seg-pick.mini { display: inline-flex; width: auto; }
}
/* 신버전 3번 메일(눌러서 바로 고침)·4번 보내기 전 확인 창 (2026-10-21 사용자) */
.au-mailpv { padding: 24px 28px; }
.au-mailpv .pv-line { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.au-mailpv .pv-k { font-size: 12px; color: var(--smoke); white-space: nowrap; }
.au-mailpv .pv-line .pv-ed { flex: 1; margin-bottom: 0; font-weight: 600; }
.au-mailpv .pv-article .pv-ed { margin-left: 0; margin-right: 0; width: 100%; }
.au-mailpv .pv-article-title.pv-ed { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.au-vtabs { margin: 0; }
.au-name-row { display: flex; gap: 8px; align-items: center; }
.au-name-row input { flex: 1; min-width: 0; }
.au-name-row .btn.sm { flex: none; white-space: nowrap; }
.au-confirm-top { font-size: 14px; color: var(--graphite); margin: -4px 0 12px; }
.au-confirm-pv { max-height: min(62vh, 760px); overflow: auto; padding: 20px 24px; } /* 눌러서 고치는 칸(.pv-ed)이라 pre-wrap 아님 */
.au-confirm-pv .pv-line { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.au-confirm-pv .pv-k { font-size: 12px; color: var(--smoke); white-space: nowrap; }
.au-confirm-pv .pv-line .pv-ed { flex: 1; margin-bottom: 0; font-weight: 600; }
.au-confirm-pv .pv-article .pv-ed { margin-left: 0; margin-right: 0; width: 100%; }
.au-confirm-pv .pv-article-title.pv-ed { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.au-confirm .modal-foot { margin-top: 16px; }

/* 신버전: 보도 일시 글자·날짜로 고치기, 서명 글자만 고치기, 기자 표 10명씩 (2026-10-21 사용자) */
.au-notice-state { font-size: 12px; color: var(--warn-ink); }
.au-sig-name { font-weight: 600; color: var(--ink); } /* 지금 서명의 보관함 이름 (2026-10-22) */
.au-sig-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 12px; color: var(--smoke); margin-bottom: 4px; }
.au-sig-cap .btn.sm { height: 28px; padding: 0 12px; font-size: 12px; }
#au-sig.pv-sig-ed { min-height: 40px; }
.au-table th { height: 41px; box-sizing: border-box; }
.au-table td { height: 60px; box-sizing: border-box; }
.au-table .empty { height: calc(10 * 60px); text-align: center; }
@container auc (max-width: 860px) { .au-wrap { min-height: 0; } .au-table .empty { height: auto; min-height: 120px; } .au-card .au-table tr > td { height: auto; } .au-table td.a-why { min-width: 0; max-width: none; } } /* 카드 모양에서는 칸 높이 60px 고정을 풀어 줄이 벌어지지 않게 (2026-10-22) */

/* 신버전 02번: 배포·보도 일시 머리 줄(날짜로 고르기는 칸 바깥 오른쪽) + 첨부 줄(기사 파일 형식·사진) — 2026-10-21 사용자 */
.au-notice-cap { margin-top: 2px; }
.au-attach-top { margin-top: 12px; } /* 첨부는 1번 글쓰기 면 바로 아래 한 줄 (2026-10-21 사용자) */
.au-attach-row { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.au-photos { margin-top: 12px; }
.au-photos:empty { display: none; }
.au-photos .attach-name .au-photo-x { font-size: 12px; padding: 0; color: var(--danger); text-align: left; }
@media (max-width: 600px) { .au-attach-row { flex-direction: column; align-items: stretch; } }

/* 신버전: 결과가 있으면 1번은 숨고 02 위에 작은 줄(입력한 내용·설정 보기 / 다시 만들기) (2026-10-21 사용자) */
.au-topbar { display: flex; justify-content: flex-end; gap: 8px; margin: -8px 0 12px; }
.au-info { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.au-info-k { font-size: 13px; color: var(--smoke); padding-top: 4px; white-space: nowrap; }
.au-info-brief { white-space: pre-wrap; line-height: 1.7; max-height: 40vh; overflow: auto; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.au-info .modal-foot { grid-column: 1 / -1; }
.au-info .preview-attach { margin: 0; }
@media (max-width: 600px) { .au-info { grid-template-columns: 1fr; gap: 4px 0; } .au-info-k { padding-top: 8px; } .au-topbar { justify-content: stretch; } .au-topbar .btn { flex: 1; } }
/* 02 「AI가 쓴 메일」 위 검색어 줄 (2026-11-03 사용자: 어떤 검색어로 만들었는지 보이게) */
.au-kws { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.au-kws-k { font-size: 13px; color: var(--smoke); margin-right: 4px; white-space: nowrap; } .au-kws-k b { color: var(--ink); font-weight: 600; }
.au-kws .au-kw { font-size: 13px; padding: 4px 10px; }
.au-info-kws { display: flex; flex-wrap: wrap; gap: 6px 8px; padding-top: 2px; } .au-info-kws .au-kw { font-size: 13px; padding: 4px 10px; }
.au-attach-slot { margin-top: 16px; }
/* ===== 목록 높이 10줄 고정 (2026-11-03 사용자): 모자란 줄은 빈 줄 — 같은 간격의 선만 있어 '빈 공책' 느낌, 글자·효과 없음 (JS padRows) ===== */
tr.fill-row { pointer-events: none; }
tr.fill-row:hover { background: transparent; }
tr.fill-row > td { padding: 0 !important; height: auto !important; border-bottom: 1px solid var(--line); background: transparent; }
tr.fill-row:last-child > td { border-bottom: 0; }
div.fill-row { border: 1px solid var(--line); border-radius: var(--r-box); opacity: .45; pointer-events: none; }
/* 0건: 표 머리·빈 줄은 그대로 두고 안내 글만 표 몸통 위 가운데에 (2026-11-04 사용자 "표가 사라지지 않게"; JS padRows) */
.table-wrap { position: relative; }
.tw-empty { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--smoke); }
.tw-empty > .empty, .tw-empty > .adm-empty { margin: 0; padding: 0; }
.jl-wrap .tw-empty > .empty { min-height: 0; }
.jl-table tr[hidden], .hist-table tr[hidden], .hr-table tr[hidden], .au-table tr[hidden], .adm-mtable tr[hidden], .cvx-table tr[hidden] { display: none; }
/* 쪽을 넘겨도 열 위치·줄 높이가 안 바뀜 (2026-11-03 사용자): 표는 고정 배치(table-layout: fixed) + 열 너비 지정, 칸은 한 줄(…)로 잘라 줄 높이를 통일(전체 글은 마우스를 올리면). 카드 모드는 아래에서 다시 풀어 줌 */
.hist-table, .hr-table, .adm-actable, .adm-lgtable { table-layout: fixed; width: 100%; }
/* 열 너비는 비율로 — px 로 두면 넓은 화면에서 첫 열만 커지고 나머지가 오른쪽에 몰림 (2026-11-03 사용자 "더 이상해짐") */
.hist-table col.c-name { width: 23%; } .hist-table col.c-svc { width: 12%; } .hist-table col.c-st { width: 7%; } .hist-table col.c-n { width: 6%; } .hist-table col.c-by { width: 9%; } .hist-table col.c-at { width: 13%; } .hist-table col.c-del { width: 6%; }
.hist-table th, .hist-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-table th.num, .hist-table td.num { padding-left: 6px; padding-right: 6px; } /* 숫자 열은 좁아도 머리글(대상·성공…)이 안 잘리게 */
.hist-table td { height: 56px; box-sizing: border-box; }
.hr-table col.c-name { width: 20%; } .hr-table col.c-outlet { width: 14%; } .hr-table col.c-mail { width: 26%; } .hr-table col.c-var { width: 7%; } .hr-table col.c-st { width: 9%; } .hr-table col.c-rb { width: 11%; } .hr-table col.c-at { width: 13%; }
.hr-table th, .hr-table td { overflow: hidden; text-overflow: ellipsis; } .hr-table td.h-mail { max-width: none; }
.adm-actable col.c-at { width: 150px; } .adm-actable col.c-who { width: 22%; } .adm-actable col.c-kind { width: 150px; } /* 시각·한 일은 글 길이가 정해져 있어 px, 「내용」이 나머지를 다 씀 — 「한 일」 옆에 빈 띠가 생기던 것 (2026-11-03 사용자) */
.adm-lgtable col.c-at { width: 15%; } .adm-lgtable col.c-who { width: 35%; } .adm-lgtable col.c-res { width: 12%; } .adm-lgtable col.c-how { width: 14%; } .adm-lgtable col.c-ip { width: 24%; }
.adm-actable td, .adm-lgtable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 72px; box-sizing: border-box; } /* 「누가」 두 줄(이름+이메일 ≈ 69px)보다 크게 잡아 모든 줄이 같은 높이 (2026-11-03 사용자: 줄 선 높이가 조금씩 다름) */
.adm-lg-who { line-height: 1.4; } .adm-lg-who > b { font-size: 14px; } .adm-lg-who > .adm-mail { font-size: 12px; } .adm-lg-who > .muted { font-size: 13px; }
.adm-ac-sum { white-space: nowrap; max-width: none; } /* 「내용」은 td 자체에 이 클래스가 있음 — display 를 바꾸면 칸이 표에서 떨어져 나가 줄 선이 어긋난다 (2026-11-03 사용자) */
.adm-lg-who { max-width: 100%; } .adm-lg-who > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-table td.j-kw .jl-kw { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 검색어 칩은 한 줄, 넘치면 … (전부는 마우스를 올리면) */
/* 보낸 기자 표: 모든 칸 한 줄(관련 기사만 제목+날짜 두 줄 고정) → 줄 높이 늘 56px. 이름 옆 「수정됨」 배지는 이름과 같은 줄에 (2026-11-03 사용자: 다른 목록은 쪽마다 줄 선 높이가 바뀜) */
.jl-table td { white-space: nowrap; text-overflow: ellipsis; }
.jl-table td.j-name .cell-clip { display: inline-block; max-width: 100%; vertical-align: middle; } .jl-table td.j-name .j-edited { vertical-align: middle; }
.jl-table td.j-name:has(.j-edited) .cell-clip { max-width: calc(100% - 48px); } /* 배지 자리(약 44px)를 남기고 이름만 줄임 — 배지가 통째로 잘리지 않게 */
.jl-table td.j-recent { white-space: normal; } .jl-table td.j-recent .jl-art-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container jlist (max-width: 1000px) { .jl-table td { white-space: normal; } .jl-table td.j-name .cell-clip { display: block; } }
.au-table td.a-why .a-why-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 「왜 골랐나」는 두 줄까지 */
@container (max-width: 800px) { .hist-table td { height: auto; white-space: normal; } }
@container (max-width: 820px) { .adm-actable td, .adm-lgtable td { height: auto; white-space: normal; } .adm-ac-sum { white-space: normal; } .adm-lg-who > * { white-space: normal; } }
@container auc (max-width: 860px) { .au-table td.a-why .a-why-t { display: inline; -webkit-line-clamp: unset; } }
@container hrc (max-width: 760px) { .hr-table th, .hr-table td { overflow: visible; } }
/* ===== 인터랙션 층 (2026-11-03 사용자: 어색하지 않은 곳에 움직임을 더해 더 인터랙티브하게) ===== */
/* 숫자가 올라가는 동안은 회색빛으로 흐리게, 끝값이 되면 진하게 (2026-11-04 사용자; JS countUpIn 이 .counting 을 붙였다 뗌) */
[data-count], .counting, .counted { transition: opacity .35s var(--ease), filter .35s var(--ease); }
.counting { opacity: .45; filter: blur(.6px); }
.counting, .counted { animation: none !important; } /* .stat .value 의 등장 효과(num-in, fill both — 선택자가 더 구체적이라 !important)가 흐림을 덮거나 끝난 뒤 다시 튀지 않게 */
@media (prefers-reduced-motion: reduce) { .counting { opacity: 1; filter: none; } }
/* 표 줄이 위에서부터 차례로 나타남 (쪽을 넘기거나 검색해도 같은 효과, 10줄 기준 0.25초 안에 끝) */
@keyframes row-in { from { opacity: 0; } to { opacity: 1; } } /* 움직임 없이 나타나기만 — translateY 는 마지막 줄이 잠깐 문서 밖으로 나가 스크롤 막대를 깜빡이게 했음 (2026-11-03) */
.jl-table tbody tr, .hist-table tbody tr, .hr-table tbody tr, .au-table tbody tr, .adm-mtable tbody tr, .au-sendm-table tbody tr, .jh-ev { animation: row-in .28s var(--ease-out) both; }
.jl-table tbody tr:nth-child(2), .hist-table tbody tr:nth-child(2), .hr-table tbody tr:nth-child(2), .au-table tbody tr:nth-child(2), .adm-mtable tbody tr:nth-child(2), .au-sendm-table tbody tr:nth-child(2), .jh-ev:nth-child(2) { animation-delay: .025s; }
.jl-table tbody tr:nth-child(3), .hist-table tbody tr:nth-child(3), .hr-table tbody tr:nth-child(3), .au-table tbody tr:nth-child(3), .adm-mtable tbody tr:nth-child(3), .au-sendm-table tbody tr:nth-child(3), .jh-ev:nth-child(3) { animation-delay: .05s; }
.jl-table tbody tr:nth-child(4), .hist-table tbody tr:nth-child(4), .hr-table tbody tr:nth-child(4), .au-table tbody tr:nth-child(4), .adm-mtable tbody tr:nth-child(4), .au-sendm-table tbody tr:nth-child(4), .jh-ev:nth-child(4) { animation-delay: .075s; }
.jl-table tbody tr:nth-child(5), .hist-table tbody tr:nth-child(5), .hr-table tbody tr:nth-child(5), .au-table tbody tr:nth-child(5), .adm-mtable tbody tr:nth-child(5), .au-sendm-table tbody tr:nth-child(5), .jh-ev:nth-child(5) { animation-delay: .1s; }
.jl-table tbody tr:nth-child(6), .hist-table tbody tr:nth-child(6), .hr-table tbody tr:nth-child(6), .au-table tbody tr:nth-child(6), .adm-mtable tbody tr:nth-child(6), .au-sendm-table tbody tr:nth-child(6), .jh-ev:nth-child(6) { animation-delay: .125s; }
.jl-table tbody tr:nth-child(7), .hist-table tbody tr:nth-child(7), .hr-table tbody tr:nth-child(7), .au-table tbody tr:nth-child(7), .adm-mtable tbody tr:nth-child(7), .au-sendm-table tbody tr:nth-child(7), .jh-ev:nth-child(7) { animation-delay: .15s; }
.jl-table tbody tr:nth-child(8), .hist-table tbody tr:nth-child(8), .hr-table tbody tr:nth-child(8), .au-table tbody tr:nth-child(8), .adm-mtable tbody tr:nth-child(8), .au-sendm-table tbody tr:nth-child(8), .jh-ev:nth-child(8) { animation-delay: .175s; }
.jl-table tbody tr:nth-child(9), .hist-table tbody tr:nth-child(9), .hr-table tbody tr:nth-child(9), .au-table tbody tr:nth-child(9), .adm-mtable tbody tr:nth-child(9), .au-sendm-table tbody tr:nth-child(9), .jh-ev:nth-child(9) { animation-delay: .2s; }
.jl-table tbody tr:nth-child(n+10), .hist-table tbody tr:nth-child(n+10), .hr-table tbody tr:nth-child(n+10), .au-table tbody tr:nth-child(n+10), .adm-mtable tbody tr:nth-child(n+10), .au-sendm-table tbody tr:nth-child(n+10), .jh-ev:nth-child(n+10) { animation-delay: .225s; }
tbody tr.fill-row { animation: none; } /* 빈 줄은 움직이지 않음 */
tbody.no-anim tr, .no-anim > .jh-ev, tbody.no-anim input[type=checkbox]:checked { animation: none; } /* 같은 줄을 다시 그린 것이면 등장·체크 효과 없음 (JS padRows 가 표시) */
/* 메일 보내기 결과: 02 메일 → 03 기자 → 04 보내기 카드가 차례로 */
#au-result > * { animation: page-in .3s var(--ease-out) both; }
#au-result > :nth-child(2) { animation-delay: .06s; } #au-result > :nth-child(3) { animation-delay: .14s; } #au-result > :nth-child(4) { animation-delay: .22s; } #au-result > :nth-child(n+5) { animation-delay: .3s; }
/* 거르기 칩을 고르면 살짝 튀고, 표 안 네모를 켜면 살짝 커졌다 돌아옴 */
@keyframes chip-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.filter-chips button.active { animation: chip-pop .22s var(--ease-out); }
@keyframes check-tick { 0% { transform: scale(.9); } 50% { transform: scale(1.22); } 100% { transform: none; } }
td input[type=checkbox]:checked, th input[type=checkbox]:checked, .checkbox input[type=checkbox]:checked { animation: check-tick .2s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .jl-table tbody tr, .hist-table tbody tr, .hr-table tbody tr, .au-table tbody tr, .adm-mtable tbody tr, .au-sendm-table tbody tr, .jh-ev, #au-result > *, .filter-chips button.active, td input[type=checkbox]:checked, th input[type=checkbox]:checked, .checkbox input[type=checkbox]:checked { animation: none; }
  .nav-ind, .db-dn, .db-legend li { transition: none; }
}
.au-attach-slot .au-attach-top { margin-top: 8px; }

/* 「메일 보내기」 메뉴의 말풍선(새로 작성 가능 · n단계 …)은 안 띄움 (2026-10-21 사용자). 상태 글자·점은 그대로 */
.nav a[data-page="compose"] .nav-tip { display: none !important; }

/* 신버전 03 기자 표: 열 고정(쪽 넘겨도 안 움직임)·검색·검색어 열 / 보내기 확인 창 (2026-10-21 사용자) */
.au-table { table-layout: fixed; width: 100%; }
.au-table th, .au-table td { overflow: hidden; text-overflow: ellipsis; }
.au-table td.a-why { white-space: normal; min-width: 0; max-width: none; }
.au-table td.a-title .cell-clip { max-width: 100%; }
.au-kw { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: var(--r-pill); background: var(--eggshell); border: 1px solid var(--line); font-size: 12px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.au-who-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-jl-tools { margin: 12px 0 12px; } /* 기자 명단과 같은 도구 줄 (2026-10-22) */
@container auc (max-width: 1100px) { .au-jl-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .au-jl-tools .rp-search { grid-column: 1 / -1; } }
@container auc (max-width: 700px) { .au-jl-tools { grid-template-columns: 1fr 1fr; } }
.au-sendm-wrap { max-height: 46vh; overflow: auto; }
.au-sendm-table { width: 100%; }
.au-sendm-table th, .au-sendm-table td { padding: 8px 12px; white-space: nowrap; }
.au-again { margin: 12px 0 12px; line-height: 1.6; } /* 이미 보낸 기자 경고 (2026-10-21) */
.au-again-foot { display: flex; justify-content: flex-end; margin-top: 8px; } /* 「이 n명 빼고 보내기」는 경고 상자 오른쪽 아래 (2026-10-22 사용자) */
.au-again-foot .btn { background: var(--white); border-color: var(--warn-line); }
.au-again-row td { background: var(--gold-soft); }
/* 보내기 창 「기자별 첫 문장 모두 보기」 (2026-11-02): 접힘 목록, 줄 = 번호·이름/언론사·문장, 누르면 그 기자 미리보기 */
.au-hooks { margin-top: 12px; }
.au-hooks .link-btn { font-size: 13px; padding: 4px 0; min-height: var(--h-sm); }
.au-hooks-help { margin: 6px 0 8px; line-height: 1.5; }
#au-sm-hooks { max-height: 36vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.au-hk-row { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr); gap: 8px 12px; align-items: start; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: background var(--dur) var(--ease); }
.au-hk-row:last-child { border-bottom: 0; }
.au-hk-row:hover { background: var(--taupe); }
.au-hk-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.au-hk-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .au-hk-who b, .au-hk-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-hk-text { line-height: 1.5; overflow-wrap: anywhere; }
.au-hk-own { color: var(--graphite); }
@container (max-width: 560px) { .au-hk-row { grid-template-columns: 24px minmax(0, 1fr); } .au-hk-text { grid-column: 1 / -1; padding-left: 36px; } }
.au-sendm-foot { align-items: center; margin-top: 16px; flex-wrap: wrap; } /* 기자별 미리보기(왼쪽) · 취소 · 보내기(오른쪽) 한 줄, 같은 높이 (2026-10-22 사용자) */
.au-sendm-left { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.au-sendm-foot .btn { height: 44px; }
@media (max-width: 600px) { .au-sendm-left .muted { display: none; } }
@container auc (max-width: 860px) { .au-table { table-layout: auto; } .au-table td.a-kw { grid-area: kw; } }

/* 개발용 「내 메일로 받기」 (2026-10-21 사용자) + 끊김 안내 상자 */
.au-dev { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); font-size: 13px; color: var(--graphite); cursor: pointer; white-space: nowrap; }
.au-dev input { margin: 0; }
.au-dev-tag { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn-ink); }
.au-dev-mail { color: var(--warn-ink); }
.au-dev-note { color: var(--warn-ink); font-weight: 600; }
.au-error { margin-bottom: 16px; }

/* 1번 머리 오른쪽: 「홍보할 서비스」 라벨 + 「↺ 초기화」 (2026-10-21 사용자) */
.au-svc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }

/* ───────── 나온 기사 (2026-10-22): 우리 메일로 쓴 기사 + 초안 반영도 ───────── */
.cov-scan-note { display: flex; align-items: center; gap: 12px; }
.cov-cands { margin-bottom: 20px; border: 1px solid var(--warn-line); background: var(--eggshell); }
.cov-cand { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cov-cand:first-of-type { border-top: 0; }
.cov-cand-main { min-width: 0; flex: 1 1 320px; } .cov-cand-main a { color: inherit; text-decoration: none; } .cov-cand-main a:hover b { text-decoration: underline; }
.cov-cand-btns { display: flex; gap: 8px; flex: none; }
/* 「아니요」로 넘긴 기사 접힘 목록 (2026-11-02): 확인 상자 아래 작은 글자 한 줄, 펼치면 흐린 줄들 */
.cov-rejected { margin: -8px 0 20px; }
.cov-rejected .link-btn { font-size: 13px; padding: 4px 0; min-height: var(--h-sm); }
.cov-rej { opacity: .75; } .cov-rej:first-of-type { border-top: 1px solid var(--line); margin-top: 4px; }
.cov-score { display: inline-flex; align-items: center; gap: 8px; width: 100%; } .cov-score i { flex: 1; height: 6px; border-radius: var(--r-xs); background: linear-gradient(90deg, #e9c25a, #1f5f3f); max-width: 80px; display: block; } .cov-score b { font-variant-numeric: tabular-nums; }
.cov-big { display: flex; flex-direction: column; } .cov-big b { font-size: 34px; line-height: 1; letter-spacing: -.02em; } .cov-big span { font-size: 13px; color: var(--smoke); margin-top: 4px; } .cov-big.sub b { font-size: 24px; color: var(--graphite); }
.cov-lesson { flex: 1 1 280px; padding: 12px 16px; border-radius: var(--r-box); background: var(--gold-soft); border: 1px solid var(--warn-line); } .cov-lesson b { font-size: 13px; color: var(--warn-ink); } .cov-lesson p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.cov-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.cov-list b { font-size: 13px; color: var(--smoke); } .cov-list ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; } .cov-list li + li { margin-top: 4px; }
.cov-col-cap { font-size: 13px; color: var(--smoke); margin-bottom: 8px; }
@media (max-width: 900px) { .cov-score { width: auto; } }
/* 설정 맨 위 회사 이름 (2026-10-22) */
.co-card { padding: 20px 24px; margin-bottom: 20px; }
.co-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
.co-card-row label { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 420px; } .co-card-row label b { font-size: 16px; }
.co-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 1 auto; } .co-name-row input { width: 320px; max-width: 100%; height: 44px; }
@media (max-width: 760px) { .co-name-row, .co-name-row input { width: 100%; } }
/* 로그인·회원가입·비밀번호 찾기 (2026-10-22) */
.login-code-row { display: flex; gap: 8px; align-items: stretch; } .login-code-row input { flex: 1; min-width: 0; } .login-code-row .btn { white-space: nowrap; min-height: 50px; }
#code-send { width: 150px; flex: none; justify-content: center; padding-left: 0; padding-right: 0; font-variant-numeric: tabular-nums; } /* 「다시 보내기 (59초)」 숫자가 바뀌어도 너비 고정 → 왼쪽 입력 칸도 안 움직임 (2026-10-22 사용자) */
.login-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .login-links .link-btn { font-size: 12px; color: var(--graphite); }
.login-step2 { animation: page-in .3s var(--ease-out) both; }
.login-form-wrap .help[data-tone="ok"], #pw2-help[data-tone="ok"], #code-state[data-tone="ok"] { color: var(--ok); } #pw2-help[data-tone="bad"], #code-state[data-tone="bad"] { color: var(--danger); }
#code-check { min-width: 76px; }
.login-form-wrap input[readonly] { color: var(--graphite); background: var(--taupe); }
/* 안내(튜토리얼) + 「?」 도움말 (2026-10-22) */
.help-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--eggshell); color: var(--graphite); font-weight: 600; font-size: 15px; cursor: pointer; display: inline-grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); flex: none; }
.help-btn:hover { background: var(--ink); color: var(--eggshell); border-color: var(--ink); }
#tour { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
#tour .tour-dim { position: absolute; inset: 0; background: rgba(20,18,16,.32); pointer-events: auto; }
.tour-ring { position: absolute; border-radius: var(--r-box); box-shadow: 0 0 0 9999px rgba(20,18,16,.32), 0 0 0 3px var(--gold-bright); background: transparent; transition: top .2s var(--ease), left .2s var(--ease), width .2s var(--ease), height .2s var(--ease); pointer-events: none; }
#tour .tour-dim { background: transparent; }
#tour .tour-card { position: absolute; pointer-events: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 20px 16px; box-shadow: 0 24px 60px rgba(20,18,16,.18); animation: modal-in .2s var(--ease-out) both; }
#tour .tour-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--smoke); margin-bottom: 8px; } #tour .tour-title { color: var(--warn-ink); font-weight: 600; }
#tour .tour-card b { font-size: 15px; } #tour .tour-card p { margin: 8px 0 12px; font-size: 14px; line-height: 1.6; color: var(--graphite); }
#tour .tour-foot { display: flex; align-items: center; gap: 8px; } #tour .tour-sp { flex: 1; }
#tour .tour-skip { background: var(--taupe); border: 1px solid var(--line-strong); color: var(--graphite); } #tour .tour-skip:hover { background: var(--taupe-deep); color: var(--ink); } /* 단추처럼 보이게 (2026-10-22 사용자) */
/* 안내 중에도 스크롤 가능 (2026-10-23 사용자: 창이 작으면 안내 대상이 다 안 보임). 테두리·말풍선은 스크롤을 따라감 */ body.touring { overflow: auto; } #tour .tour-card { overflow: visible; } #tour .tour-inner { max-height: calc(100vh - 64px); overflow: auto; } /* 스크롤은 안쪽 글 상자만 — 바깥 테두리 효과가 스크롤바를 만들지 않게 */
/* 설정 「내 계정」 가로 카드 (2026-10-22) */
#ai-status-foot { font-size: 12px; color: var(--graphite); display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* 내 계정 카드: 왼쪽 비밀번호 바꾸기 · 오른쪽 계정 탈퇴 (2026-10-22). 좁으면 세로로 */

/* 팀이 함께 보는 자료 표시 (2026-10-22 사용자): 기자 명단·발송 기록·나온 기사 제목 옆 알약 + 줄마다 '○○ 넣음' */
.shared-pill { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; margin-left: 12px; padding: 4px 12px 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--taupe); font-size: 13px; font-weight: 500; color: var(--graphite); letter-spacing: 0; cursor: default; }
.shared-pill .shared-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
@media (max-width: 600px) { .shared-pill { margin-left: 0; margin-top: 8px; display: inline-flex; } }

/* 화면 전환·안내 말풍선 움직임 (2026-10-22 사용자: 부드럽고 자연스럽게) */
.page.leaving { animation: page-out .15s var(--ease) forwards; pointer-events: none; }
@keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }
.tour-ring { transition: top .3s var(--ease-out), left .3s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out); animation: ring-in .3s var(--ease-out) both; }
#tour .tour-card { transition: top .3s var(--ease-out), left .3s var(--ease-out), width .3s var(--ease-out); }
#tour.tracking .tour-card { transition: none; }
#tour .tour-inner { animation: tour-swap .3s var(--ease-out) both; }
@keyframes tour-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ring-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page.leaving { animation: none; opacity: 0; } .tour-ring, #tour .tour-card { transition: none; } }

/* 메일 회사 상자 안 「✓ 저장되었습니다」: 고른 상자의 오른쪽 위, 체크 표시 왼쪽 (2026-10-22 사용자: 직접 입력 쪽에 뜨던 것을 누른 상자로) */
.provider .saved-flash.bottom { bottom: auto; top: 10px; right: 40px; }

/* 메일 회사 알림 상자(초록 ✓ / 주황 !)는 단추가 있든 없든 같은 높이 — 고를 때마다 아래가 들썩이지 않게 (2026-10-22 사용자) */
.detect-box.ok, .detect-box.suggest { min-height: 66px; box-sizing: border-box; animation: none; }

/* 설정 탭 둘: 메일 설정 / 계정 설정 (2026-10-23 사용자). data-stab 이 맞지 않는 것은 숨김 */
.set-tabs { display: inline-flex; width: fit-content; margin: 12px 0 12px; } .set-tabs button { padding: 8px 20px; font-size: 14px; } /* 알약 둘 크기만큼만 — 안내 테두리가 한 줄 전체를 비추지 않게 (2026-10-23 사용자) */
.page[data-stab='mail'] [data-stab]:not([data-stab='mail']), .page[data-stab='account'] [data-stab]:not([data-stab='account']), .page[data-stab='trash'] [data-stab]:not([data-stab='trash']) { display: none !important; } /* 탭 셋 (휴지통 2026-10-29) */
body.set-account-tab #save-dock, body.set-account-tab #unsaved-chip { display: none !important; }
.page[data-stab='account'] #sec-account-me { margin-top: 4px; }

/* 계정 설정 탭 (2026-10-23 사용자: 고급스럽게, 높이·너비 정리): 프로필 머리 → 비밀번호 / 함께 쓰는 사람 두 칸 → 탈퇴 */
.acct-wrap { max-width: none; } /* 2026-10-23 사용자: 좌우 꽉 채우기 */
.acct-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 340px); gap: 24px 28px; align-items: center; padding: 28px 32px; }
.acct-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--eggshell); display: grid; place-items: center; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.acct-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acct-name-in { font-size: 22px; font-weight: 600; letter-spacing: -.01em; border: 0; background: transparent; padding: 4px 8px; margin-left: -8px; border-radius: var(--r-input); min-width: 160px; width: min(100%, 420px); color: var(--ink); font-family: inherit; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.acct-name-in::placeholder { color: var(--ash); font-weight: 500; } .acct-name-in:hover { background: var(--taupe-deep); } .acct-name-in:focus { background: var(--eggshell); outline: none; box-shadow: 0 0 0 2px var(--ink); }
#acct-name-state[data-tone='ok'] { color: var(--ok); } #acct-name-state[data-tone='bad'] { color: var(--danger); }
.acct-mail { font-size: 14px; color: var(--graphite); margin-top: 2px; } .acct-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acct-hero-side { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; } .acct-hero-side p { margin: 0; max-width: 320px; line-height: 1.55; }
.acct-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.acct-card2 { margin-bottom: 0; display: flex; flex-direction: column; } .acct-card2 h2 { margin: 0 0 4px; font-size: 17px; } .acct-card2 > p { margin: 0 0 20px; line-height: 1.55; max-width: 560px; }
.acct-pf { display: flex; flex-direction: column; flex: 1; } .acct-pf .field { margin-bottom: 12px; } .acct-pf-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 8px; } .acct-pf-foot .btn { min-width: 160px; height: 44px; }
.member-list { display: flex; flex-direction: column; gap: 8px; }
.member-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--r-box); background: var(--eggshell); border: 1px solid var(--line); }
.member-row.me { border-color: var(--line-strong); }
.member-av { width: 40px; height: 40px; border-radius: 50%; background: var(--taupe-deep); color: var(--graphite); display: grid; place-items: center; font-weight: 600; font-size: 15px; } .member-row.me .member-av { background: var(--ink); color: var(--eggshell); }
.member-id { min-width: 0; } .member-id b { font-size: 14px; } .member-id .badge { margin-left: 8px; vertical-align: 1px; } .member-id .small { overflow-wrap: anywhere; } .member-meta { white-space: nowrap; }
.acct-danger2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--eggshell); border: 1px solid var(--danger-soft); margin-bottom: 16px; } .acct-danger2 h2 { margin: 0 0 4px; font-size: 16px; color: var(--danger); } .acct-danger2 p { margin: 0; max-width: 760px; line-height: 1.55; } .acct-danger2 .btn { flex: none; height: 44px; padding: 0 24px; }
@media (max-width: 1000px) { .acct-grid2 { grid-template-columns: 1fr; } .acct-hero { grid-template-columns: auto minmax(0, 1fr); } .acct-hero-side { grid-column: 1 / -1; justify-self: start; align-items: flex-start; text-align: left; } }
@media (max-width: 600px) { .acct-hero { padding: 24px 20px; gap: 16px 16px; } .acct-avatar { width: 56px; height: 56px; font-size: 22px; } .acct-name-in { font-size: 20px; } .member-row { grid-template-columns: 36px minmax(0, 1fr); } .member-meta { grid-column: 2; white-space: normal; } .acct-danger2 { flex-direction: column; align-items: stretch; } .acct-danger2 .btn, .acct-pf-foot .btn { width: 100%; } }
input.acct-name-in { width: auto; max-width: 420px; min-width: 160px; height: auto; border: 0; }
.acct-hero-side p, .acct-card2 > p, .acct-danger2 p { max-width: 900px; }

/* 가입 화면: 칸을 처음부터 모두 보여 주고 앞 단계가 끝나야 열림 — 상자 높이가 안 바뀜 (2026-10-23 사용자) */
.login-step { transition: opacity .2s var(--ease); } .login-locked { opacity: .42; pointer-events: none; } .login-locked input { background: var(--taupe); }
#code-help { min-height: 3em; } #code-state, #pw2-help { min-height: 1.5em; }
.login-form-wrap .help.err { color: var(--danger); } /* 오류는 그 칸 아래 안내 줄에 (2026-10-29 사용자: 아래 오류 상자 대신) */

/* 로그인 상자 높이 고정 (2026-10-23 사용자: 회원가입·비밀번호 찾기로 바꿀 때 높이가 변하는 게 싫다). 두 칸 배치에서는 상자 높이를 화면에 맞춰 고정하고 오른쪽 칸만 안에서 스크롤 */
@media (min-width: 1101px) { .login-shell { height: min(1120px, calc(100vh - 48px)); min-height: 0; } .login-story, .login-entry { min-height: 0; } .login-entry { overflow-y: auto; overscroll-behavior: contain; } }
/* 가입·비밀번호 찾기 폼은 칸이 많아 간격을 조금 좁혀 같은 높이 안에 들어가게 */
#lf[data-step] .field { margin-bottom: 12px; } #lf[data-step] .help { font-size: 12px; line-height: 1.45; margin-top: 4px; } #lf[data-step] #code-help { min-height: 2.5em; } #lf[data-step] .login-submit { margin-top: 8px; }
@media (min-width: 1101px) { .login-form-wrap:has(#lf[data-step]) { padding: 8px 0; } .login-form-wrap:has(#lf[data-step]) .login-lead { margin-bottom: 20px; } }
/* 가입·찾기 폼 촘촘하게: 칸 48px, 간격 8px, 제목 작게 — 두 칸 배치의 고정 높이 안에 들어가게 (2026-10-23) */
#lf[data-step] .field { margin-bottom: 8px; } #lf[data-step] input:not([type='checkbox']) { height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; } #lf[data-step] .login-code-row .btn { min-height: 48px; } #lf[data-step] .login-password-wrap .password-toggle { top: 50%; transform: translateY(-50%); }
.login-form-wrap:has(#lf[data-step]) { padding: 0; } .login-form-wrap:has(#lf[data-step]) #login-title { font-size: 34px; margin-bottom: 8px; } .login-form-wrap:has(#lf[data-step]) .login-lead { margin-bottom: 16px; }
@media (min-width: 1101px) { .login-entry { padding-top: 28px; padding-bottom: 20px; } } /* 세 화면 모두 같은 여백 — 전환할 때 위·아래 글줄이 안 움직이게 (2026-10-23 사용자) */

/* 로그인 오른쪽 칸: 세로 가운데 정렬을 grid 의 safe center 로 — 창이 낮아 내용이 넘칠 때 위(제목)가 잘리지 않고 스크롤됨 (2026-10-23 사용자: 창 높이를 줄이면 '회원가입'이 잘림) */
.login-entry { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: start; } .login-form-wrap { align-self: safe center; justify-self: center; margin: 0; width: 100%; }

/* ===== 창 크기 전수 점검 (2026-10-23 사용자: 모든 메뉴·창에서 어떤 크기라도 잘리거나 어색하지 않게) ===== */
/* 로그인 오른쪽 칸: 가운데 줄이 내용보다 작아지지 않게(내용이 아래 footer 를 덮던 것) → 넘치면 칸 전체가 스크롤 */
.login-entry { grid-template-rows: auto minmax(0, 1fr) auto; } .login-form-wrap { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* 가운데 줄만 안에서 스크롤 → 위·아래 글줄은 어느 화면이든 같은 자리 (2026-10-23) */
/* 스크롤 막대는 입력 칸에 딱 붙지 않고 오른쪽 칸 끝에 (2026-10-29 사용자): 스크롤하는 상자는 칸 폭 전체, 안의 내용만 460px 가운데 */
@media (min-width: 1101px) { .login-entry .login-form-wrap { max-width: none; justify-self: stretch; } .login-form-wrap > * { max-width: 460px; margin-left: auto; margin-right: auto; } }
/* 창이 낮을 때(두 칸 배치): 왼쪽 그림을 숨겨 글이 겹치지 않게, 위 머리 줄 간격 줄임 */
@media (min-width: 1101px) and (max-height: 780px) { .story-art { display: none; } .login-story-copy { margin-top: 12px; } .login-story { padding-top: 28px; padding-bottom: 20px; } .login-entry { padding-top: 20px; padding-bottom: 16px; } }
@media (min-width: 1101px) and (max-height: 620px) { .login-story h2 { font-size: 34px; margin-bottom: 12px; } .login-story-copy p { font-size: 14px; line-height: 1.6; } .login-entry-top, .login-entry-foot { display: none; } }
/* 저장 독: 숨겨져 있을 때는 visibility 도 꺼서 화면 밖 요소가 포커스·점검에 잡히지 않게 */
.save-dock { visibility: hidden; transition: transform .3s cubic-bezier(.22,1.2,.36,1), opacity .3s var(--ease), visibility 0s linear .3s; } .save-dock.show { visibility: visible; transition: transform .3s cubic-bezier(.22,1.2,.36,1), opacity .3s var(--ease), visibility 0s; }
/* 「?」 도움말 단추만 있는 머리글: 좁은 창에서 제목 아래로 내려가지 않고 오른쪽 위에 고정 */
.page-head { position: relative; } .page-head:has(> .actions > .help-btn:only-child) > div:first-child { padding-right: 56px; } .page-head > .actions:has(> .help-btn:only-child) { position: absolute; top: 0; right: 0; margin: 0; }
/* 확인 창도 창이 낮으면 안에서 스크롤 */
.cdlg { max-height: calc(100vh - 40px); overflow: auto; }
@media (max-width: 800px) { .page-head > .actions:has(> .help-btn:only-child) { width: auto; left: auto; right: 0; top: 2px; justify-content: flex-end; } }

/* 안내 말풍선 숨쉬기: 가만히 있지 않고 위아래로 살짝 떠다님 (2026-10-23 사용자). 처음 뜰 때 modal-in 뒤에 시작 */
#tour .tour-card { animation: modal-in .2s var(--ease-out) both; position: absolute; }
@keyframes tour-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { #tour .tour-card::after, .tour-ring { animation: none; } }
/* 위아래로 움직이는 대신 테두리만 숨쉬듯 번짐 — 안의 글·단추는 가만히 (2026-10-23 사용자) */
#tour .tour-card::after { content: ''; position: absolute; inset: -3px; border-radius: var(--r-card); border: 3px solid rgba(222,176,52,.95); pointer-events: none; } /* 퍼지는 효과는 뺌 (2026-10-26 사용자) */
@keyframes tour-pulse { 0% { inset: -3px; opacity: 1; box-shadow: 0 0 0 0 rgba(222,176,52,.45); } 70% { inset: -13px; opacity: 0; box-shadow: 0 0 0 10px rgba(222,176,52,0); } 100% { inset: -13px; opacity: 0; box-shadow: 0 0 0 10px rgba(222,176,52,0); } }
.tour-ring { animation: ring-in .3s var(--ease-out) both; } /* 테두리가 퍼지는 효과는 뺌 — 단계 사이 미끄러지는 움직임만 (2026-10-26 사용자) */
@keyframes ring-pulse { 0% { outline-offset: 2px; outline-color: rgba(222,176,52,.9); } 70% { outline-offset: 14px; outline-color: rgba(222,176,52,0); } 100% { outline-offset: 14px; outline-color: rgba(222,176,52,0); } }
/* 말풍선이 위↔아래로 자리를 바꾸는 순간은 스크롤 중이어도 미끄러지게 */
#tour.tracking.flip .tour-card { transition: top .3s var(--ease-out), left .3s var(--ease-out); }

/* 강조 테두리 층: 문서 좌표(absolute)에 붙어 스크롤과 함께 움직임 (2026-10-23). #tour(400) 보다 아래라 어둡게 하는 그림자가 말풍선을 덮지 않음 */
#tour-ring-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 399; pointer-events: none; }
body.touring { position: relative; }

/* 왼쪽 메뉴 위 WORKSPACE 줄의 「?」 = 메뉴 둘러보기 (2026-10-23 사용자) */
.nav-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .help-btn.nav-help { width: 24px; height: 24px; font-size: 12px; margin-right: 2px; }

/* 메일 보내기 입력 카드 줄 순서 (2026-10-23 사용자): 글쓰기 면 → 설정 줄(기자 수·버전·보도 일시) → 첨부 줄 → 맨 아래 안내 + 「기자 찾고 메일 만들기」 */
.au-tools-row { margin-top: 16px; } .au-go-row { margin-top: 20px; align-items: center; } .au-foot.au-foot-in { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 0; flex: 1 1 320px; min-width: 0; }
@media (max-width: 760px) { .au-go-row { flex-direction: column; align-items: stretch; } .au-go-row #au-go { width: 100%; } }
@media (max-width: 800px) { .nav-caption { display: none; } .au-go-row .au-foot.au-foot-in { flex: 0 0 auto; } } /* 좁은 화면: 접힌 메뉴에선 WORKSPACE 줄 숨김(메뉴 둘러보기는 넓은 화면에서), 안내 글이 세로 배치에서 320px 로 늘어나던 것 */
/* 「?」 묶음(.help-acts)은 늘 오른쪽 위에 따로; 다른 단추 묶음은 그만큼 오른쪽을 비움 */

/* 로그인 폼 교체 애니메이션: 사라짐(.swap-out) → 교체 → 떠오름(.swap-in) */
#login-form-slot { transition: opacity .15s var(--ease), transform .15s var(--ease); } #login-form-slot.swap-out { opacity: 0; transform: translateY(8px); } #login-form-slot.swap-in { animation: page-in .34s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { #login-form-slot { transition: none; } #login-form-slot.swap-in { animation: none; } }

/* 로그인 그림: 검정 카드만 (뒤의 하얀 카드는 뺌, 2026-10-23 사용자) */
.press-back { display: none !important; }

/* 전환 애니메이션 중에는 가운데 칸을 overflow hidden 으로 — 떠오르는 움직임 때문에 스크롤바가 깜빡이지 않게. 스크롤바 자리는 늘 확보(폭이 안 변함) (2026-10-23 사용자) */
.login-form-wrap { scrollbar-gutter: stable; } .login-form-wrap:has(> #login-form-slot.swap-out), .login-form-wrap:has(> #login-form-slot.swap-in) { overflow: hidden; }
.login-entry-top, .login-entry-foot { position: relative; z-index: 2; }

/* 로그인 오른쪽 칸의 grid 가 justify-content:center 라 열이 내용 폭으로 줄어 로그인 폼(372px)과 가입 폼(560px) 폭이 달랐음 → 열을 꽉 채우고 폼은 max-width 로 같은 폭 (2026-10-23 사용자: 세 화면 폭 고정) */
.login-entry { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }

/* 로그인 아래 보조 링크 (2026-10-23 사용자 권장안): 안내 문장 + 14px 링크, 밑줄은 올렸을 때만, 누르기 쉬운 높이 */
.login-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 20px; font-size: 14px; color: var(--smoke); line-height: 1.6; }
.login-link-row { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.login-links .link-btn { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 8px; margin: 0; border-radius: var(--r-sm); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.login-links .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; background: var(--taupe); }
#lf[data-step] + .login-links { margin-top: 12px; }

/* 왼쪽 메뉴 아래 (2026-10-23 사용자: 가독성 있고 예쁘게): 상태 두 줄 + 내 계정 카드 */
.sidebar-foot { gap: 12px; padding: 16px 8px 4px; color: var(--graphite); }
.sf-status { display: flex; flex-direction: column; gap: 2px; }
.sf-row { display: grid; grid-template-columns: 8px auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-input); font-size: 13px; color: var(--graphite); text-decoration: none; }
a.sf-row:hover { background: var(--taupe-deep); }
.sf-row .dot { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--ash); } .sf-row[data-tone='ok'] .dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(31,122,77,.15); } .sf-row[data-tone='warn'] .dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(212,160,63,.18); }
.sf-k { color: var(--smoke); white-space: nowrap; } .sf-v { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; } .sf-row[data-tone='warn'] .sf-v { color: var(--warn); }
.sf-me { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 8px; border-radius: var(--r-box); background: var(--eggshell); border: 1px solid var(--line); }
.sf-me-link { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; color: inherit; border-radius: var(--r-input); }
.sf-av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ink); color: var(--eggshell); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.sf-me-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .sf-me-id b { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-me-id span { font-size: 12px; color: var(--smoke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-out { flex: none; width: 32px; height: 32px; border-radius: var(--r-input); border: 0; background: transparent; color: var(--smoke); display: grid; place-items: center; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .sf-out:hover { background: var(--taupe-deep); color: var(--ink); }
#ai-status-foot.sf-row { display: grid; margin-top: 0; font-size: 13px; }

/* 메일 주소·비밀번호 저장 줄: 두 칸 아래 오른쪽 (2026-10-23 사용자) */
.acct-save-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px 16px; flex-wrap: wrap; margin: 4px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line); }
.acct-save-row .sec-save-btn { min-width: 210px; height: 44px; }
@media (max-width: 600px) { .acct-save-row { justify-content: stretch; } .acct-save-row .sec-save, .acct-save-row .sec-save-btn { width: 100%; } }

/* 「✓ 저장되었습니다」는 어디서나 같은 모양 — 상자 안 글자 규칙(.speed span 회색 등)이 덮어쓰지 않게 (2026-10-23 사용자: 보내는 속도에서 색이 다름) */
.saved-flash, .speed .saved-flash, .provider .saved-flash { background: var(--ok-soft) !important; color: var(--ok) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.6 !important; }

/* 보내는 속도 (2026-10-23 사용자): 상자 오른쪽 그림, '기본' 표시, 고르지 않으면 보통 안내 */
.speed { padding-right: 56px; min-height: 64px; justify-content: center; }
.speed .speed-ic { position: absolute; right: 12px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); color: var(--ash); transition: color var(--dur) var(--ease); }
.speed.active .speed-ic, .speed:hover .speed-ic { color: var(--ink); }
.speed b .speed-rec { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--taupe-deep); color: var(--graphite); vertical-align: 1px; }
.speed-default-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-box); background: var(--eggshell); border: 1px solid var(--line); font-size: 13px; color: var(--graphite); }
.speed-default-note .sd-ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--eggshell); font: 600 12px/18px Inter, var(--font); text-align: center; font-style: italic; }
.speed .saved-flash.bottom { right: 54px; } .speed-default-note { align-items: flex-start; line-height: 1.55; } .speed-default-note .sd-ic { margin-top: 1px; }

/* 비밀번호 바꾸기 확인 글자 (2026-10-23 사용자) */
.acct-pf .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-msg { font-size: 13px; font-weight: 600; } .pf-msg[data-tone='bad'] { color: var(--danger); } .pf-msg[data-tone='ok'] { color: var(--ok); }
.acct-pf input.pf-bad { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(179,38,30,.12); } .acct-pf input.pf-ok { border-color: var(--ok) !important; }
/* 계정 탈퇴 카드: 위 카드들의 회색 배경처럼 옅은 붉은색으로 채움 (2026-10-23 사용자) */
.acct-danger2 { background: var(--danger-soft); border-color: transparent; }

/* 보낼 기자 수 직접 정하기 안내 (2026-10-23 사용자) */

#au-cnt-n.shake { animation: shake .3s; } #au-cnt-n.shake { border-color: var(--danger) !important; }
/* 진행 창의 목표 기자 수 (2026-10-23 사용자) */
.au-target { margin: 4px 0 16px; padding: 12px 16px; border-radius: var(--r-box); background: var(--taupe); text-align: left; }
.au-target-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .au-target-n { color: var(--graphite); font-weight: 600; }
.au-target-bar { height: 6px; margin: 8px 0; border-radius: var(--r-pill); background: var(--taupe-deep); overflow: hidden; } .au-target-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%); border-radius: var(--r-pill); transition: width 1.2s cubic-bezier(.22, .61, .36, 1); } /* 같은 창의 진행 막대와 같은 금색 (2026-11-03) */
.au-target-note { font-size: 12px; color: var(--smoke); line-height: 1.5; }

/* 왼쪽 아래 진행 상자 (2026-10-23 사용자): 로딩 그림은 왼쪽 위에 따로 두고 글·안내·단추를 모두 같은 왼쪽 선에 맞춤, 아래 줄 = 왼쪽 「중단하기」 · 오른쪽 「진행 보기」 */
.work-dock .ai-bar { position: relative; padding: 12px 16px 12px 40px; }
.work-dock .ai-bar > .thinking, .work-dock .ai-bar > .ai-bar-check, .work-dock .ai-bar > .t-matrix { position: absolute; left: 13px; top: 15px; margin: 0; }
.work-dock .ai-bar .ai-bar-text { flex: 1 1 100%; }
.work-dock .ai-bar [id$='-stop'], .work-dock .ai-bar .stop-btn, .work-dock .ai-bar .dock-stop { order: 2; margin: 2px auto 0 0; }
.work-dock .ai-bar .ai-bar-link, .work-dock .ai-bar .dock-go { order: 3; margin: 2px 0 0 auto; }
.work-dock .ai-bar .dock-go { text-decoration: none; background: var(--ink); color: var(--eggshell); border-color: var(--ink); }
.work-dock .ai-bar .ai-bar-x { order: 3; position: absolute; top: 8px; right: 8px; margin: 0; }
.ai-bar:not(.work-dock .ai-bar) .dock-go { margin-left: 8px; }
/* 위치 보정(relative 로 바뀌며 왼쪽으로 밀리던 것) + 어두운 진행 상자에 맞는 단추 색, 두 단추 한 줄 */
.work-dock .ai-bar { left: auto; right: auto; top: auto; bottom: auto; transform: none; padding-left: 36px; }
.work-dock .ai-bar > .thinking, .work-dock .ai-bar > .ai-bar-check, .work-dock .ai-bar > .t-matrix { left: 12px; }
.work-dock .ai-bar .dock-stop, .work-dock .ai-bar [id$='-stop'], .work-dock .ai-bar .stop-btn { margin-left: -24px; padding: 4px 12px; font-size: 12px; min-height: 0; background: transparent; color: var(--danger-line); border: 1px solid rgba(242,201,197,.45); }
.work-dock .ai-bar .dock-stop:hover, .work-dock .ai-bar [id$='-stop']:hover { background: rgba(242,201,197,.15); color: var(--white); }
.work-dock .ai-bar .ai-bar-link, .work-dock .ai-bar .dock-go { padding: 4px 12px; font-size: 12px; min-height: 0; background: var(--eggshell); color: var(--ink); border: 1px solid var(--eggshell); border-radius: var(--r-pill); text-decoration: none; font-weight: 600; }
.work-dock .ai-bar.done .ai-bar-link, .work-dock .ai-bar.error .ai-bar-link { background: var(--ink); color: var(--eggshell); border-color: var(--ink); }
.work-dock .ai-bar .small.muted { margin-bottom: 4px; }

/* 발송 완료 창 오른쪽 위 × = 닫고 새로 작성하기 (2026-10-23 사용자) */
.send-done { position: relative; }
.send-done-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--smoke); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.send-done-x:hover { background: var(--taupe-deep); color: var(--ink); }

/* 왼쪽 아래 진행 상자의 로딩 그림 (2026-10-23 사용자: ... 점 대신 더 예쁘게): 금색 호가 도는 작은 원 + 글 위로 빛이 지나감 */
.work-dock .ai-bar > .thinking { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--gold-bright); border-right-color: var(--gold-bright); animation: dock-spin .9s linear infinite; display: block; top: 15px; }
.work-dock .ai-bar > .thinking i { display: none; }
@keyframes dock-spin { to { transform: rotate(360deg); } }
.work-dock .ai-bar.running .ai-bar-text b { background: linear-gradient(90deg, #fff 0%, #fff 40%, #f3d37a 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dock-shine 2.4s linear infinite; }
@keyframes dock-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .work-dock .ai-bar > .thinking, .work-dock .ai-bar.running .ai-bar-text b { animation: none; } .work-dock .ai-bar.running .ai-bar-text b { color: var(--white); background: none; } }
/* 글자 좌우 여백 같게 (2026-10-23 사용자): 상자 안쪽 여백 좌우 16px, 도는 원은 첫 줄 앞자리에만(제목 첫 줄만 들여씀) */
.work-dock .ai-bar { padding: 12px 16px; }
.work-dock .ai-bar > .thinking, .work-dock .ai-bar > .ai-bar-check, .work-dock .ai-bar > .t-matrix { left: 16px; top: 14px; }
.work-dock .ai-bar .ai-bar-text { text-indent: 24px; }
.work-dock .ai-bar .dock-stop, .work-dock .ai-bar [id$='-stop'], .work-dock .ai-bar .stop-btn { margin-left: 0; }
.work-dock .ai-bar.done .ai-bar-text, .work-dock .ai-bar.error .ai-bar-text { padding-right: 20px; }
/* 발송 기록 목록: 행 전체가 눌림 (2026-10-23 사용자) */
tr.hist-row { cursor: pointer; transition: background var(--dur) var(--ease); } tr.hist-row:hover td { background: var(--taupe-deep); } tr.hist-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ===== 홈 대시보드 (2026-10-23 사용자 · 2026-10-26 꾸미기) — 2026-10-29 재배치안은 사용자가 되돌림, 「메일이 만들어지는 과정」 카드만 뺌 ===== */
.db-status { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.db-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--eggshell); border: 1px solid var(--line); font-size: 13px; color: var(--graphite); text-decoration: none; max-width: 100%; } .db-chip .k { color: var(--smoke); } .db-chip b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.db-chip:hover { background: var(--taupe); }
.db-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(31,122,77,.15); flex: none; } .db-chip.warn i { background: var(--gold); box-shadow: 0 0 0 3px rgba(212,160,63,.2); } .db-chip.warn b { color: var(--warn); }
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.db-kpi { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; border-radius: var(--r-card); background: var(--eggshell); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); animation: page-in .3s var(--ease-out) both; }
.db-kpi:nth-child(2) { animation-delay: .05s; } .db-kpi:nth-child(3) { animation-delay: .1s; } .db-kpi:nth-child(4) { animation-delay: .15s; }
.db-kpi:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 10px 28px rgba(20,18,16,.06); }
.db-kpi-k { font-size: 13px; color: var(--smoke); }
.db-kpi-v { display: flex; align-items: baseline; gap: 4px; } .db-kpi-v b { font-size: 40px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .db-kpi-v small { font-size: 15px; color: var(--smoke); }
.db-kpi-s { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--smoke); }
.db-delta { font-weight: 600; color: var(--graphite); } .db-delta.up { color: var(--ok); } .db-delta.down { color: var(--danger); }
.db-ring-wrap { align-items: center; gap: 12px; } .db-ring { width: 44px; height: 44px; transform: rotate(-90deg); flex: none; } .db-ring circle { fill: none; stroke-width: 5; } .db-ring .bg { stroke: var(--taupe-deep); } .db-ring .fg { stroke: var(--ok); stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out); }
.db-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } .db-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-grid > .card { margin: 0; }
.db-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .db-card-head h2 { margin: 0; } .db-card-head p { margin: 4px 0 0; }
.db-sum { display: flex; align-items: baseline; gap: 4px; } .db-sum b { font-size: 28px; font-weight: 300; letter-spacing: -.02em; } .db-sum span { color: var(--smoke); font-size: 13px; }
.db-chart-card { position: relative; display: flex; flex-direction: column; } /* 옆 카드(기자 상태+언론사)가 더 높으면 그래프가 카드 아래까지 늘어나 빈 공간이 없게 (2026-11-04 사용자: 그래프가 위쪽에 몰려 정렬이 안 된 느낌) */
.db-chart-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.db-chart-body .db-bars { flex: 1; height: auto; min-height: 190px; }
.db-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 4px; height: 190px; padding-bottom: 2px; border-bottom: 1px solid var(--line); background-image: linear-gradient(to top, var(--line) 1px, transparent 1px); background-size: 100% 33.33%; }
.db-bar { height: 100%; display: flex; align-items: flex-end; cursor: default; } .db-bar i { display: block; width: 100%; max-width: 22px; margin: 0 auto; height: var(--h, 0%); min-height: 0; border-radius: 4px 4px 0 0; background: var(--ink); transition: height .7s var(--ease-out) var(--d, 0ms), background .15s; }
.db-bar.zero i { min-height: 2px; height: 2px !important; background: var(--taupe-deep); } .db-bar.today i { background: var(--gold); } .db-bar.hov i { background: var(--graphite); } .db-bar.today.hov i { background: var(--warn-ink); }
.db-tip { position: absolute; transform: translate(-50%, -100%); padding: 4px 12px; border-radius: var(--r-sm); background: var(--ink); color: var(--eggshell); font-size: 13px; white-space: nowrap; pointer-events: none; z-index: 3; }
.db-hbars { display: flex; flex-direction: column; gap: 12px; } .db-hbar { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; } .db-hbar-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-hbar b { font-variant-numeric: tabular-nums; }
.db-hbar-track { height: 10px; border-radius: var(--r-pill); background: var(--taupe-deep); overflow: hidden; } .db-hbar-track i, .db-mini i { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--ink); transition: width .8s var(--ease-out) var(--d, 0ms); }
.db-list { display: flex; flex-direction: column; } .db-li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px; margin: 0 -12px; border-radius: var(--r-box); color: inherit; text-decoration: none; transition: background .15s; } .db-li:hover { background: var(--taupe-deep); } .db-li + .db-li { border-top: 1px solid var(--line); }
.db-li-main { display: flex; flex-direction: column; min-width: 0; } .db-li-main b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-li-side { display: flex; align-items: center; gap: 12px; flex: none; }
.db-mini { width: 64px; height: 6px; border-radius: var(--r-pill); background: var(--taupe-deep); overflow: hidden; } .db-mini.gold i { background: var(--gold); } .db-fail { color: var(--danger); font-weight: 600; } .db-empty { margin: 4px 0 0; }
@media (max-width: 1100px) { .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-grid, .db-grid.two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .db-kpis { grid-template-columns: minmax(0, 1fr); } .db-kpi-v b { font-size: 34px; } .db-bars { gap: 2px; height: 150px; } .db-li { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .db-bar i, .db-hbar-track i, .db-mini i, .db-ring .fg { transition: none; } .db-kpi { animation: none; } }
/* 홈 대시보드 꾸미기 (2026-10-26 사용자) */
.db-head h1 { font-size: clamp(26px, 2.4vw, 34px); }
.db-todos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.db-todo { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-box); border: 1px solid var(--line); background: var(--eggshell); color: inherit; text-decoration: none; transition: transform .2s var(--ease), border-color .2s var(--ease); }
a.db-todo:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.db-todo-i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: var(--taupe); color: var(--graphite); }
.db-todo.gold .db-todo-i { background: var(--warn-soft); color: var(--warn-ink); } .db-todo.red .db-todo-i { background: var(--danger-soft); color: var(--danger); } .db-todo.quiet .db-todo-i { background: var(--ok-soft); color: var(--ok); }
.db-todo-t { display: grid; gap: 2px; min-width: 0; } .db-todo-t b { font-size: 14px; } .db-todo-t span { font-size: 13px; color: var(--smoke); }
.db-todo-go { color: var(--smoke); font-size: 18px; }
.db-chart-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.db-week { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--taupe); font-size: 13px; } .db-week .k { color: var(--smoke); } .db-week b { font-size: 16px; font-variant-numeric: tabular-nums; }
.db-days { margin: 0; } .db-days button { height: 32px; padding: 0 12px; font-size: 13px; }
.db-donut-wrap { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; }
.db-donut { width: 120px; height: 120px; transform: rotate(-90deg); } .db-donut .db-dn { stroke-dasharray: 0 100; transition: stroke-dasharray .9s var(--ease-out), opacity var(--dur) var(--ease); }
.db-donut .db-dn.dim { opacity: .22; } /* 범례에 마우스를 올리면 다른 조각은 흐리게 (2026-11-03) */
.db-legend li { transition: opacity var(--dur) var(--ease); cursor: default; } .db-legend:hover li:not(:hover) { opacity: .45; }
.db-donut-mid { position: absolute; left: 0; width: 120px; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; } .db-donut-mid b { display: block; font-size: 26px; font-weight: 300; letter-spacing: -.02em; line-height: 1; } .db-donut-mid span { font-size: 12px; color: var(--smoke); }
.db-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .db-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 13px; } .db-legend i { width: 10px; height: 10px; border-radius: 50%; } .db-legend b { font-variant-numeric: tabular-nums; } .db-legend small { color: var(--smoke); font-size: 12px; min-width: 32px; text-align: right; }
.db-bars.n90 { gap: 2px; } .db-bars.n90 .db-bar i { max-width: 10px; border-radius: 3px 3px 0 0; }
@media (max-width: 600px) { .db-donut-wrap { grid-template-columns: 1fr; justify-items: center; } .db-donut-mid { width: 120px; left: 50%; transform: translate(-50%, -50%); } .db-chart-tools { justify-content: flex-start; } }
/* 홈 그래프 축: 날짜 글자는 칸에 가두지 않고 자리만 잡는다(잘리지 않게), 좁으면 처음·끝 날짜만 양 끝에 (2026-10-26 전수 점검) */
.db-axis { position: relative; height: 18px; margin-top: 8px; font-size: 12px; color: var(--smoke); }
.db-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .db-axis span.first { transform: none; } .db-axis span.last { transform: translateX(-100%); }
@media (max-width: 600px) { .db-axis span.mid { display: none; } }
/* 할 일 카드: 넓으면 3칸·보통 2칸·좁으면 1칸, 마지막 줄에 하나만 남으면 그 줄을 채움 */
.db-todos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-todos > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.db-todos > :last-child:nth-child(3n+2) { grid-column: span 2; }
@media (max-width: 1280px) { .db-todos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-todos > :last-child:nth-child(n) { grid-column: auto; } .db-todos > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 700px) { .db-todos { grid-template-columns: minmax(0, 1fr); } .db-todos > :last-child:nth-child(n) { grid-column: auto; } }
.db-kpi:hover, .db-todo:hover { box-shadow: none; }
@media (max-width: 600px) {
  .db-li > .db-li-main { align-self: stretch; max-width: 100%; }
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .db-kpi { padding: 16px; } .db-kpi-v b { font-size: 28px; }
}
/* 홈: 「메일 보내기」 는 상태 알약 줄 끝 */
.db-status { align-items: center; }
.db-status > .db-go { margin-left: auto; }
@media (max-width: 800px) { .db-status > .db-go { margin-left: 0; flex-basis: 100%; } }

/* 발송 기록 목록 이름: 밑줄 없이 굵게 (2026-10-23 사용자) */
a.hist-name { color: var(--ink); font-weight: 600; text-decoration: none; } /* 밑줄 효과 없음 (2026-10-26 사용자) */
/* 결과 화면 위 작은 줄: 단추 둘 크기만 (안내 테두리가 줄 전체를 비추지 않게, 2026-10-23 사용자) */
.au-topbar { width: fit-content; margin-left: auto; }
@media (max-width: 600px) { .au-topbar { width: auto; margin-left: 0; } }
/* 찾은 기자 표의 수신 거부 열 (2026-10-23 사용자). 좁은 화면 카드에서는 '아니요'는 숨기고 거부일 때만 */
@container auc (max-width: 860px) { .au-card .au-table tr { grid-template-areas: "chk name" "chk media" "chk mail" "chk title" "chk why" "chk kw" "chk last" "chk unsub"; } }
/* 찾은 기자: 수신 거부 줄은 고를 수는 있지만 옅은 붉은 바탕, 보내기 전에 빼라는 안내 (2026-10-23 사용자) */
.au-table tr.au-row.unsub td { background: var(--danger-soft); } .au-table tr.au-row.unsub.on td { background: var(--danger-soft); } .au-table tr.au-row.unsub .a-name b { color: var(--danger); }
/* 보내는 중 봉투가 점선 위로 날게 (2026-10-23 사용자: 점선에 가리지 않게) — 길 높이를 키우고 봉투는 늘 선보다 위 */
.send-path { height: 80px; } .send-trail { top: 62%; } .send-env { top: 62%; margin-top: -36px; animation-name: send-fly-up; }
@keyframes send-fly-up { 0% { left: 0; transform: translateY(0) rotate(-8deg) scale(.7); opacity: 0; } 10% { opacity: 1; transform: translateY(-3px) rotate(-6deg) scale(1); } 50% { transform: translateY(-12px) rotate(4deg); } 92% { opacity: 1; } 100% { left: calc(100% - 22px); transform: translateY(0) rotate(-4deg) scale(.7); opacity: 0; } }

/* 기자 명단: 「넣은 사람」 열 + 수신 거부 예/아니요 단추 (2026-10-23 사용자) */
.jl-table col.c-by { width: 104px; }
.jl-table td.j-by { color: var(--graphite); }
.jl-table .j-by-l { display: none; }
.jl-unsub-tg { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--cream, var(--eggshell)); color: var(--graphite); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.jl-unsub-tg:hover { border-color: var(--ink); color: var(--ink); }
.jl-unsub-tg.on { background: var(--taupe); border-color: var(--danger-line); color: var(--danger); font-weight: 600; }
.jl-unsub-tg.on:hover { border-color: var(--danger); }
.jl-unsub-tg:disabled { opacity: .5; cursor: wait; }
.jl-unsub-tg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ───────── 나온 기사 재설계 (2026-10-23) ───────── */
.cvx-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -8px 0 16px; }
.cvx-period { margin: 0; }
.cvx-sub { margin: -4px 0 16px; max-width: 900px; line-height: 1.55; }
.cvx-camps-card, .cvx-others, .cvx-lessons { container-type: inline-size; }
.cvx-only { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--graphite); cursor: pointer; white-space: nowrap; }
/* 발송별 성과 표 (2026-11-03 사용자: 상자 줄 대신 다른 목록과 같은 표, 줄을 누르면 창). 열 너비 비율·줄 56px 고정·한 줄 … */
.cvx-wrap { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.table-wrap table.cvx-table, .cvx-table { table-layout: fixed; width: 100%; min-width: 0; border-collapse: collapse; } /* .table-wrap table 의 min-width 720px(더 구체적인 선택자)를 풀어 좁은 화면에서도 상자 안에 맞춤(옆 스크롤 없음) */
.cvx-table col.c-name { width: 34%; } .cvx-table col.c-when { width: 18%; } .cvx-table col.c-n { width: 9.6%; }
.cvx-table th { height: 41px; box-sizing: border-box; padding: 0 12px; background: var(--taupe); text-align: left; font-size: 12px; font-weight: 500; color: var(--smoke); white-space: nowrap; }
.cvx-table td { height: 56px; box-sizing: border-box; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cvx-table th.num, .cvx-table td.num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 6px; padding-right: 6px; }
.cvx-table th:last-child, .cvx-table td:last-child { padding-right: 28px; } /* 마지막 「다른 기자」 숫자가 표 오른쪽 끝에 붙지 않게 (2026-11-04 사용자) */
.cvx-table th:first-child, .cvx-table td:first-child { padding-left: 20px; }
.cvx-table tr.cvx-row { cursor: pointer; } .cvx-table tr.cvx-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.cvx-table td.cv-on { color: var(--ok); font-weight: 600; } .cvx-table td.cv-rate b { font-weight: 600; }
.cvx-table tr.cvx-row.hit td.cv-name b { color: var(--ink); }
@container (max-width: 800px) { .cvx-table col.c-opt { width: 0; } .cvx-table .c-opt { display: none; } .cvx-table col.c-name { width: 52%; } .cvx-table col.c-n { width: 16%; } } /* 좁으면 날짜·반영도·다른 기자 열은 접음 (visibility: collapse 는 고정 배치에서 자리가 남아 숫자 열이 밀려났음) */
@container (max-width: 560px) { .cvx-table th { white-space: normal; line-height: 1.25; height: auto; padding: 8px 6px; } .cvx-table col.c-name { width: 40%; } .cvx-table col.c-n { width: 20%; } } /* 휴대폰: 머리글은 두 줄로 꺾고 숫자 열을 조금 넓혀(63.2% 같은 값) 안 잘리게 */
.cvx-modal .cvx-vers { padding-top: 4px; }
.cvx-vers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.cvx-vers .btn { margin-left: auto; }
.cvx-ver { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--taupe); font-size: 13px; color: var(--graphite); }
.cvx-ver i { font-style: normal; color: var(--ok); font-weight: 600; }
.cvx-arts { display: grid; gap: 8px; }
.cvx-art { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; align-items: center; padding: 12px 16px; border-radius: var(--r-box); border: 1px solid var(--line); color: inherit; text-decoration: none; background: var(--eggshell); transition: background var(--dur) var(--ease); }
.cvx-art:hover { background: var(--taupe); }
.cvx-art-t { display: grid; gap: 4px; min-width: 0; }
.cvx-none { padding: 12px 0 4px; }
.cvx-other-b { margin-right: 4px; }
/* 배운 점 */
.cvx-lesson-list { display: grid; gap: 8px; }
.cvx-lesson { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.cvx-lesson:not(.on) .cvx-l-text { color: var(--smoke); text-decoration: line-through; text-decoration-color: var(--ash); }
.cvx-l-main { display: grid; gap: 4px; min-width: 0; }
.cvx-l-text { font-size: 15px; line-height: 1.5; padding: 2px 8px; margin: -4px -8px; border-radius: var(--r-sm); outline: none; transition: background var(--dur) var(--ease); max-width: 900px; }
.cvx-l-text:hover { background: var(--taupe); } .cvx-l-text:focus { background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.cvx-kind { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: 12px; }
.cvx-kind.gap { background: var(--taupe); color: var(--accent); } .cvx-kind.rate { background: var(--ok-soft); color: var(--ok); }
.cvx-tg { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); font-size: 13px; color: var(--smoke); white-space: nowrap; }
.cvx-tg i { width: 22px; height: 22px; border-radius: 50%; background: var(--taupe-deep); transition: background var(--dur) var(--ease); }
.cvx-lesson.on .cvx-tg { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); } .cvx-lesson.on .cvx-tg i { background: var(--ok); }
.cvx-tg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cvx-learn-state { margin-bottom: 12px; }
@container (max-width: 560px) {
  .cvx-art { grid-template-columns: 1fr; gap: 8px; }
  .cvx-lesson { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tg del" "main main"; }
  .cvx-lesson .cvx-tg { grid-area: tg; justify-self: start; } .cvx-lesson [data-ldel] { grid-area: del; } .cvx-l-main { grid-area: main; }
  .cvx-vers .btn { margin-left: 0; }
}
/* 비교 화면 */
.cvd-head { align-items: flex-start; }
.cvd-title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; max-width: 1100px; }
.cvd-meta { color: var(--graphite); line-height: 1.6; }
.cvd-report { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: start; margin-bottom: 16px; }
.cvd-nums { display: flex; gap: 16px; }
.cvd-report .cov-lesson { margin: 0; }
.cvd-report .cov-lists { grid-column: 1 / -1; margin: 0; }
.cvd-legend { margin: 8px 2px 12px; line-height: 1.8; }
.cvd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cvd-doc { font-size: 15px; line-height: 1.85; color: var(--ink); max-width: 760px; }
.cvd-doc h3 { font-size: 18px; line-height: 1.45; margin: 4px 0 16px; }
.cvd-doc p { margin: 0 0 16px; white-space: pre-wrap; }
.cvd-mk.on { background: var(--ok-soft); box-shadow: 0 0 0 2px var(--ok-soft); border-radius: var(--r-xs); }
.cvd-mk.off { color: var(--smoke); }
.cvd-mk.add { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cvd-legend .cvd-mk { padding: 0 4px; }
@media (max-width: 1000px) { .cvd-cols { grid-template-columns: 1fr; } .cvd-report { grid-template-columns: 1fr; } }
.cvx-stats { margin-bottom: 16px; }
.au-cnt-max { font-size: 12px; opacity: .65; margin-left: 4px; font-weight: 500; }
.au-short { margin: 4px 0 16px; line-height: 1.6; } /* 개발용 「명단에만 추가」 — 「내 메일로 받기」와 같은 점선 (2026-10-23) */

/* 「AI가 고른 기자」 도구 줄 정리 (2026-10-26 사용자): 모두 선택⇄해제 · 최근 보낸 기자 빼기 · ⋯ 더 보기 */
.au-table tr.au-row.unsub { cursor: not-allowed; }
.au-table tr.au-row.unsub td { color: var(--smoke); }
.au-table tr.au-row.unsub .au-chk input { opacity: .35; cursor: not-allowed; }

/* 2026-10-26 사용자: 도구 줄 평평하게, 「내 메일로 받기」는 이메일 열 머리에, 수신 거부 기자는 표에서 빼고 한 줄 알림 */
.au-table th.a-mail-h { white-space: nowrap; }
.au-dev-h { margin-left: 12px; height: 26px; padding: 0 8px 0 8px; font-weight: 500; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.au-dev-h input { margin: 0; accent-color: var(--ink); }
.au-unsub-note { margin: -4px 0 12px; padding: 8px 16px; font-size: 13px; border-radius: var(--r-input); background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--graphite); }
.au-unsub-note b { color: var(--danger); }
.au-who-tools .au-dev-h-mobile { display: none; }
@media (max-width: 1000px) { .au-table th.a-mail-h .au-dev-h { display: none; } .au-who-tools .au-dev-h-mobile { display: inline-flex; } } /* 좁으면 표 머리가 숨어서 도구 줄의 것으로 */
.au-unsub-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.au-unsub-table { width: 100%; border-collapse: collapse; } .au-unsub-table th, .au-unsub-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.au-unsub-table th { font-size: 13px; color: var(--smoke); font-weight: 500; } .au-unsub-table td .cell-clip { display: block; max-width: 320px; }
@media (max-width: 560px) { .au-unsub-table thead { display: none; } .au-unsub-table tr { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); } .au-unsub-table td { padding: 0; border: 0; } .au-unsub-table td .cell-clip { max-width: none; } }
.jl-note { font-size: 13px; margin: 0 0 16px; min-height: 44px; display: flex; align-items: center; box-sizing: border-box; } /* 탭마다 같은 높이 (2026-10-26) */

/* 발송 기록 목록: 좁으면 카드 (2026-10-26 전수 점검: 420px 에서 표가 가로로 넘침) */
.hist-wrap { container-type: inline-size; }
@container (max-width: 800px) {
  .hist-wrap table.hist-table { min-width: 0; display: block; }
  .hist-table thead { display: none; } .hist-table tbody { display: grid; gap: 8px; }
  .hist-table tr.hist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name del" "meta meta" "nums nums" "by by"; gap: 4px 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
  .hist-table tr.hist-row:hover td { background: none; } .hist-table tr.hist-row:hover { background: var(--taupe); }
  .hist-table tr.hist-row > td { display: block; padding: 0; border: 0; height: auto; white-space: normal; }
  .hist-table td:nth-child(1) { grid-area: name; }
  .hist-table td:nth-child(2), .hist-table td:nth-child(3) { grid-area: meta; display: inline-block; margin-right: 8px; }
  .hist-table td:nth-child(4), .hist-table td:nth-child(5), .hist-table td:nth-child(6) { grid-area: nums; display: inline-block; text-align: left; margin-right: 12px; font-size: 13px; }
  .hist-table td:nth-child(4)::before { content: "대상 "; color: var(--smoke); } .hist-table td:nth-child(5)::before { content: "성공 "; color: var(--smoke); } .hist-table td:nth-child(6)::before { content: "실패 "; color: var(--smoke); }
}
/* 설정 카드 저장 줄의 안내 글: 좁거나 낮은 창에서 … 으로 (2026-10-26 전수 점검) */
.sec-dirty { min-width: 0; } .sec-dirty > .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 800px) { .hist-table tr.hist-row > td { position: static !important; } }
.inbox-subject { min-width: 0; display: flex; gap: 4px; white-space: nowrap; } .inbox-subject > b { flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; } .inbox-subject > .muted { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 발송 기록: 찾기·상태 칩·답장/반송 (2026-10-26 개선 1·7번) */
.hist-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-tools .filter-chips { margin: 0; } .hist-tools .rp-search { flex: 1 1 280px; max-width: 420px; }
.hist-scan-note { margin: 0 0 12px; min-height: 18px; }
.hist-reply { color: var(--ok); font-weight: 600; white-space: nowrap; } .hist-bounce { color: var(--danger); font-weight: 600; }
.hr-reply { white-space: nowrap; }
/* 상세 숫자 5칸(대상·성공·실패·답장·반송) — 답장·반송 칸은 누르면 표를 그 기자만으로 (2026-10-26 사용자) */
.hd-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.hd-stat-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hd-stat-btn:focus:not(:focus-visible) { outline: none; }
@media (max-width: 900px) { .hd-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .hd-stats > .stat:first-child { grid-column: 1 / -1; } }
.hr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-head h2 { margin: 0; } .hr-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.hr-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hr-filter .filter-chips { margin: 0; }
.hr-card .hr-hint { margin: 0 0 12px; }
.hd-reply, .hd-bounce { margin: 12px 0 16px; padding: 12px 16px; border-radius: var(--r-box); border: 1px solid var(--line); background: var(--ok-soft); display: grid; gap: 4px; font-size: 14px; }
.hd-reply b { color: var(--ok); } .hd-reply-s { font-weight: 600; } .hd-reply-t { white-space: pre-wrap; color: var(--graphite); }
.hd-bounce { background: var(--danger-soft); } .hd-bounce b { color: var(--danger); }
.attach-doc-link { text-decoration: none; display: inline-grid; place-items: center; }
@container (max-width: 800px) {
  /* 열이 11개가 됨(답장·반송 추가): 4~8 숫자 줄, 9~10 보낸 사람·일시, 11 삭제 */
  .hist-table td:nth-child(7), .hist-table td:nth-child(8) { grid-area: nums; display: inline-block; text-align: left; margin-right: 12px; font-size: 13px; }
  .hist-table td:nth-child(7)::before { content: "답장 "; color: var(--smoke); } .hist-table td:nth-child(8)::before { content: "반송 "; color: var(--smoke); }
  .hist-table td:nth-child(9), .hist-table td:nth-child(10) { grid-area: by; display: inline-block; margin-right: 8px; } .hist-table td:nth-child(11) { grid-area: del; }
}

/* 발송 기록 상세: 고른 기자 상자 (2026-10-26 사용자: 더 확실히) */
.hd-sel { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border-radius: var(--r-box); background: var(--eggshell); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--ink); }
.hd-sel-av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--eggshell); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.hd-sel-main { min-width: 0; flex: 1; display: grid; gap: 4px; overflow-wrap: anywhere; } .hd-sel-name { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hd-sel-name b { font-size: 17px; }
.hd-sel .btn { flex: none; }
@media (max-width: 560px) { .hd-sel { flex-wrap: wrap; } .hd-sel .btn { margin-left: 52px; } }

/* ======================================================================
   디자인 최종 정리 층 (2026-10-26 사용자: "디자인 끝판왕 최종 점검")
   위쪽 규칙이 쌓이며 생긴 크기·자리 차이를 여기서 하나로 맞춘다. 값은 :root 토큰만 쓴다.
   ====================================================================== */

/* ── 단추: 큰 52 / 보통 44 / 작은 32 ── */
.btn { min-height: var(--h-md); padding: 0 16px; font-size: var(--fs-md); line-height: 1.2; }
.btn.sm { min-height: var(--h-sm); padding: 0 12px; font-size: var(--fs-sm); }
.btn.lg { min-height: var(--h-lg); padding: 0 24px; font-size: var(--fs-base); }
.login-submit { min-height: var(--h-lg); }
.btn:active:not(:disabled) { transform: scale(.97); }
.hd-rename, .sig-new-btn, .cvx-tg, .jl-unsub-tg { min-height: var(--h-sm); height: auto; }
.help-btn { width: var(--h-chip); height: var(--h-chip); }
.help-btn.nav-help { width: 24px; height: 24px; }

/* ── 입력칸: 44 (찾기 상자 포함) ── */
input[type=text], input[type=email], input[type=search], input[type=number], input[type=password], input[type=date], input[type=url], input[type=tel], select { min-height: var(--h-md); }
.rp-search { min-height: var(--h-md); }
.rp-search input { min-height: 0; height: auto; align-self: stretch; }
.hist-tools .rp-search { min-height: var(--h-chip); } /* 칩과 같은 줄 */
.acct-name-in, .pv-ed, .rl-pager-jump input, .au-in input, .seg-pick input { min-height: 0; }

/* ── 칩·쪽수 단추: 36 / 배지: 24 ── */
.filter-chips button { min-height: var(--h-chip); padding-top: 0; padding-bottom: 0; }
.rl-pager-btns button, .rl-pager-gap { height: var(--h-chip); }
.rl-pager-jump input { height: var(--h-chip); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-badge); padding: 0 10px; line-height: 1; vertical-align: middle; }
tr:hover .badge:not([class*=st-]):not(.variant):not(.edited) { box-shadow: inset 0 0 0 1px var(--line-strong); } /* 마우스 올린 줄에서 배지 바탕이 묻히지 않게 */

/* ── 머리 줄: 단추는 넓은 화면에서 제목 줄 오른쪽(「?」 왼쪽) ── */
@media (min-width: 801px) {
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
  .page-head > div:first-child { grid-column: 1; grid-row: 1; }
  .page-head p { max-width: 820px; }
}

/* ── 낮은 화면: 왼쪽 메뉴를 촘촘하게(아래 로그인 카드가 잘리지 않게) ── */
@media (min-width: 801px) and (max-height: 720px) {
  .sidebar { padding-top: 16px; padding-bottom: 12px; }
  .brand { margin-bottom: 12px; }
  .nav-caption { display: none; }
  .nav { gap: 2px; }
  .nav a { padding-top: 8px; padding-bottom: 8px; min-height: 40px; }
  .sidebar-foot { gap: 4px; padding-top: 8px; }
}

/* ── 창(모달): 아래 단추 줄이 창 바닥에 붙어 늘 보임 ── */
.modal-close, #modal-close { color: var(--graphite); }
/* 모든 크기: 창이 화면보다 길면 안에서만 넘기고, 아래 단추 줄은 창 바닥에 붙어 가려지지 않음 (낮은 화면 1280×640·1920×560 포함) */
.modal-body > .modal-foot, .modal-body > * > .modal-foot { position: sticky; bottom: 0; z-index: 2; margin: 16px -24px -24px; padding: 12px 24px calc(16px + env(safe-area-inset-bottom)); background: var(--eggshell); border-top: 1px solid var(--line); }

/* ── 발송 기록 목록 (좁은 상자): 카드 안 글자가 겹치지 않게 줄바꿈 배치 ── */
@container (max-width: 800px) {
  .hist-table tr.hist-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .hist-table tr.hist-row > td { grid-area: auto; }
  .hist-table td:nth-child(1) { order: 0; flex: 1 1 0; min-width: 0; font-size: var(--fs-base); }
  .hist-table td:nth-child(11) { order: 1; flex: none; }
  .hist-table td:nth-child(2) { order: 2; }
  .hist-table td:nth-child(3) { order: 3; flex: 1 1 auto; } /* 남은 폭을 채워 숫자는 다음 줄로 */
  .hist-table td:nth-child(4) { order: 4; } .hist-table td:nth-child(5) { order: 5; } .hist-table td:nth-child(6) { order: 6; } .hist-table td:nth-child(7) { order: 7; }
  .hist-table td:nth-child(8) { order: 8; flex: 1 1 auto; }
  .hist-table td:nth-child(9) { order: 9; } .hist-table td:nth-child(10) { order: 10; }
  .hist-table td:nth-child(n+4):nth-child(-n+8) { margin-right: 0; }
}

/* ── 보낸 기자: 안내 글 왼쪽 선 맞춤 ── */
.jl-note { padding-left: 0; padding-right: 0; }

/* ── 휴대폰: 누르는 것은 모두 44px 이상 ── */
@media (max-width: 800px) {
  .btn, .btn.sm, .icon-btn, .nav-toggle, .help-btn, .filter-chips button, .jl-unsub-tg, .hd-rename, .cvx-tg, .sig-new-btn, .seg-pick button, .seg-pick.mini button, select, .rp-search, .rl-pager-jump input { min-height: var(--h-tap); }
  .help-btn, .icon-btn, .nav-toggle { min-width: var(--h-tap); }
  .help-btn { width: var(--h-tap); height: var(--h-tap); }
  .help-btn.nav-help { width: var(--h-tap); height: var(--h-tap); }
  .rl-pager-btns button, .rl-pager-gap { height: var(--h-tap); }
  .hist-tools .rp-search { min-height: var(--h-tap); }
  .link-btn { min-height: var(--h-tap); }
}
@media (min-width: 481px) and (max-width: 800px) { .rl-pager-btns button { min-width: var(--h-tap); width: auto; } }

/* ── 메일 보내기 04: 이름 칸·단추 높이를 한 줄로 맞춤(52) ── */
.au-send-row { align-items: flex-end; }
.au-send-row .btn.lg { height: var(--h-lg); }
.au-name-row input { min-height: var(--h-lg); }
/* 기자별 미리보기: ‹ 선택칸 › 를 한 줄로 */
.pv-pick select { height: var(--h-md); }
.pv-pick .btn.sm { width: var(--h-md); height: var(--h-md); }
@media (max-width: 600px) {
  .pv-pick-label { flex-basis: 100%; }
  .pv-pick select { flex: 1 1 0; }
  .pv-pick #ac-pos { flex-basis: 100%; }
}
/* 설정 준비 점검표: 휴대폰에서 접기 단추가 카드 끝에 붙지 않게 */
@media (max-width: 600px) { .ready-head { padding-right: 16px; } .ready-head .ready-toggle { flex: none; } }

/* ── 보내기 창 기자 표: 옆으로 넘기지 않고 긴 언론사·이메일은 줄바꿈 (모든 크기) ── */
.table-wrap table.au-sendm-table { min-width: 0; }
.au-sendm-table td { white-space: normal; overflow-wrap: anywhere; }
.au-sendm-table td:first-child, .au-sendm-table th { white-space: nowrap; }
@media (max-width: 800px) { .table-wrap .au-sendm-table td:last-child, .table-wrap .au-sendm-table th:last-child { position: static; } }
@media (max-width: 600px) {
  .au-sendm-table th, .au-sendm-table td { padding: 8px; }
  .au-sendm-foot .au-sendm-left { flex-basis: 100%; }
  .au-sendm-foot .au-sendm-left .btn { flex: 1; }
  .au-sendm-foot > .btn { flex: 1; }
}
/* ── 휴대폰: 표 속 기사 제목 링크도 누르기 쉽게 ── */
@media (max-width: 800px) {
  a.jl-art, .db-chip, .password-toggle { min-height: var(--h-tap); display: inline-flex; align-items: center; }
  .password-toggle { min-width: var(--h-tap); justify-content: center; }
}
@media (max-width: 480px) { .rl-pager-btns button { min-width: 38px; width: 38px; } .rl-pager-gap { width: 24px; } }
/* ── AI가 고른 기자 표: 이름 칸은 줄바꿈 허용(「명단에 있음」 배지가 … 로 잘리지 않게) ── */
.au-table td.a-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.9; }
.au-table td.a-name b { white-space: nowrap; }
/* ── 발송 기록 표: 일시는 한 줄 ── */
@container (min-width: 1100px) { .hist-table td:nth-child(10) { white-space: nowrap; } } /* 넓을 때만 일시를 한 줄로 */
@container (max-width: 800px) {
  .hist-table td:nth-child(1) { flex: 1 1 calc(100% - 72px); }   /* 이름과 삭제만 첫 줄 */
}
/* ── 진행 표시줄(검정) 안 단추: 흰 알약이 아니라 검정 바탕 위 테두리 단추 ── */
.ai-bar .btn.ai-bar-link, .ai-bar a.btn.sm { background: transparent; border: 1px solid rgba(255,255,255,.35); color: var(--on-dark-gold); text-decoration: none; }
.ai-bar .btn.ai-bar-link:hover, .ai-bar a.btn.sm:hover { background: rgba(255,255,255,.12); }
.ai-bar.done .btn.ai-bar-link, .ai-bar.error .btn.ai-bar-link { color: var(--white); }@container (max-width: 800px) {
  /* 줄 나눔: 이름·삭제 / 서비스·상태 / 숫자 다섯 / 보낸 사람·일시 */
  .hist-table tr.hist-row::before, .hist-table tr.hist-row::after { content: ""; flex-basis: 100%; height: 0; }
  .hist-table tr.hist-row::before { order: 4; } .hist-table tr.hist-row::after { order: 10; }
  .hist-table td:nth-child(3) { flex: none; }
  .hist-table td:nth-child(4) { order: 5; } .hist-table td:nth-child(5) { order: 6; } .hist-table td:nth-child(6) { order: 7; } .hist-table td:nth-child(7) { order: 8; } .hist-table td:nth-child(8) { order: 9; flex: none; }
  .hist-table td:nth-child(9) { order: 11; } .hist-table td:nth-child(10) { order: 12; }
  .hist-table tr.hist-row { gap: 4px 12px; }
}
/* ── 휴대폰 누르는 크기 마무리 ── */
@media (max-width: 800px) {
  .seg-pick button { min-width: var(--h-tap); }
  .ai-bar .ai-bar-x { min-width: var(--h-tap); min-height: var(--h-tap); display: inline-grid; place-items: center; }
  .ai-bar a.ai-bar-link { min-height: var(--h-tap); display: inline-flex; align-items: center; }
  input[type=checkbox] { width: 22px; height: 22px; }
}
/* ── 숫자 카드 4개 묶음: 휴대폰에서도 2칸(한 줄에 하나씩 길게 늘어지지 않게) ── */
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .grid-4 > .stat { padding: 16px; }
  .grid-4 > .stat .value { font-size: 28px; margin: 8px 0 4px; }
}
/* ── 설정 「받은편지함에서 이렇게 보입니다」 그림: 좁으면 제목 줄은 숨기고 보낸 사람만 (뒤쪽 display:flex 가 덮어쓰던 것) ── */
@media (max-width: 700px) { .inbox-row .inbox-subject { display: none; } .inbox-from b { overflow: hidden; text-overflow: ellipsis; } }
/* ── 나온 기사: 기사 줄 오른쪽 「지우기」 (2026-10-26) ── */
.cvx-art-row { display: flex; align-items: center; gap: 8px; }
.cvx-art-row > .cvx-art { flex: 1; min-width: 0; }
.cvx-art-row > .cvx-del { flex: none; }
@media (max-width: 600px) { .cvx-art-row { flex-wrap: wrap; gap: 4px; } .cvx-art-row > .cvx-art { flex-basis: 100%; } .cvx-art-row > .cvx-del { margin-left: auto; } }
/* ── 머리 줄 정리 (2026-10-26 사용자: 오른쪽 위 단추 몰림이 어색) ──
   「?」 는 제목 바로 옆, 다른 단추는 그 단추가 다루는 내용 옆으로 */
.page-head h1 .title-help, .hd-title > .title-help { width: 32px; height: 32px; font-size: 14px; vertical-align: middle; margin: 0 4px 0 12px; position: relative; top: -2px; }
.hd-title > .title-help { margin: 0; top: 0; }
.page-head h1 .shared-pill, .page-head h1 .unsaved-chip { vertical-align: middle; }
/* 발송 기록: 「↻ 답장 확인」 은 목록 카드 안 상태 글 옆 */
.hist-scan-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.hist-scan-row .hist-scan-note { margin: 0; }
/* 나온 기사: 자동 찾기 상태 글 옆에 「새 기사 찾기」·「기사 주소 입력」, 오른쪽에 기간 칩 */
.cvx-scan-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.cvx-scan-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* 발송 기록 상세: 「이 기록 삭제」 는 「이름 바꾸기」 옆 */
.hd-del-acts { display: inline-flex; }
.hd-rename.danger { color: var(--danger); }
.hd-rename.danger:hover { background: var(--danger-soft); border-color: var(--danger-line); }
.hd-rename:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 800px) {
  .page-head h1 .title-help, .hd-title > .title-help { width: var(--h-tap); height: var(--h-tap); min-width: var(--h-tap); }
}@container (min-width: 801px) { .hist-wrap .hist-table tr > :first-child { min-width: 140px; } } /* 발송 이름이 네 줄로 꺾이지 않게 */
.hist-when .nowrap { white-space: nowrap; }

/* ── 기자 이력 창 (2026-10-26) ── */
.jh-head { display: flex; align-items: flex-start; gap: 16px; }
.jh-av { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--eggshell); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-lg); flex: none; }
.jh-who { min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.jh-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-base); } .jh-name b { font-size: var(--fs-xl); font-weight: 600; }
.jh-art a { text-decoration: underline; text-underline-offset: 2px; }
.jh-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.jh-num { display: grid; gap: 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.jh-num span { font-size: var(--fs-sm); color: var(--smoke); } .jh-num b { font-size: var(--fs-2xl); font-weight: 400; font-variant-numeric: tabular-nums; }
.jh-title { margin: 0 0 8px; font-size: var(--fs-base); font-weight: 600; }
.jh-list { list-style: none; margin: 0; padding: 0; display: grid; }
.jh-ev { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.jh-ev:last-child { border-bottom: 0; }
.jh-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-md); font-weight: 700; background: var(--taupe-deep); color: var(--graphite); }
.jh-ev.send .jh-ic { background: var(--taupe-deep); color: var(--ink); }
.jh-ev.reply .jh-ic, .jh-ev.article .jh-ic { background: var(--ok-soft); color: var(--ok); }
.jh-ev.fail .jh-ic, .jh-ev.bounce .jh-ic, .jh-ev.unsub .jh-ic { background: var(--danger-soft); color: var(--danger); }
.jh-main { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; padding-top: 4px; }
.jh-main a { text-decoration: underline; text-underline-offset: 2px; }
.jh-ev time { padding-top: 4px; white-space: nowrap; }
.jh-sub { margin-top: 4px; }
.jh-reply { margin-top: 8px; padding: 8px 12px; border-radius: var(--r-input); background: var(--ok-soft); display: grid; gap: 4px; font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .jh-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jh-ev { grid-template-columns: 32px minmax(0, 1fr); }
  .jh-ev time { grid-column: 2; padding-top: 0; }
}
/* ── 고친 기자 표시 (2026-10-26) ── */
.j-name .j-edited { margin-left: 4px; vertical-align: middle; }
.jh-ev.edit .jh-ic { background: var(--warn-soft); color: var(--warn-ink); }
.j-edit-note { margin: 0 0 8px; }
/* ── 보내는 중 창: 지금 보내는 기자 (2026-10-26 사용자) ──
   봉투 그림 바로 아래 가운데. 이름·주소가 바뀌어도 높이가 같게(이름 1줄 + 주소 2줄 자리, 휴대폰 3줄) → 아래 단추가 움직이지 않음. 「중단하기」는 창 오른쪽 아래 */
.send-now { margin: 4px auto 16px; padding: 8px 16px; max-width: 560px; border-radius: var(--r-box); background: rgba(255,255,255,.7); text-align: center; }
.send-now-k { font-size: var(--fs-xs); color: var(--smoke); margin-bottom: 2px; }
.send-now-who { height: calc(1.5em * 3); overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.send-now-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-now-mail { max-width: 100%; font-family: var(--font-latin); font-size: var(--fs-md); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .send-now-who { height: calc(1.5em * 4); }
  .send-now-mail { -webkit-line-clamp: 3; }
}@media (max-width: 600px) and (max-height: 720px) { #au-sent .au-sending .send-scene { display: none; } } /* 낮은 휴대폰: 봉투 그림은 빼고 받는 주소·중단하기가 화면 안에 */
.au-demo-row { margin-top: 8px; }

/* ── 진행 창 지난 시간·예상 남은 시간 (2026-10-26) ── */
/* 지난 시간 · 퍼센트 · 예상 남은 시간 — 세 칸 격자(양옆 같은 너비)라 글자 길이가 바뀌어도 가운데 퍼센트가 안 움직임 (2026-11-03 사용자) */
.au-time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 12px; min-height: 1.6em; margin: 8px 0 4px; font-size: var(--fs-sm); color: var(--smoke); font-variant-numeric: tabular-nums; }
.au-time b { color: var(--ink); font-weight: 600; }
.au-time > span:first-child { justify-self: start; } .au-time > span:last-child { justify-self: end; text-align: right; }
.au-time-pct { justify-self: center; margin: 0; } .au-time-pct b { font-size: 15px; }
@media (max-width: 560px) { /* 좁으면 퍼센트를 윗줄 가운데, 지난·예상 시간은 아랫줄 양끝 */
  .au-time { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 2px; }
  .au-time-pct { grid-column: 1 / -1; grid-row: 1; } .au-time-pct b { font-size: 17px; }
  .au-time > span:first-child, .au-time > span:last-child { grid-row: 2; }
}
/* 진행 막대 (2026-11-03 사용자: 지난 시간·예상 시간을 눈으로 + "검은색 말고 로딩바답게, 뚝뚝 끊기지 않게"): 금색 그라데이션 + 빛이 쓸고 지나가는 효과, 너비는 1.2초에 걸쳐 미끄러짐.
   보내는 중 창의 .send-progress 도 같은 모양. 예상을 넘기면 줄무늬가 흐름 */
.au-eta-bar, .send-progress { height: 10px; background: var(--taupe-deep); border-radius: var(--r-pill); }
.au-eta-bar { margin: 2px 0 0; }
.au-eta-bar > div, .send-progress > div { position: relative; overflow: hidden; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%); transition: width 1.2s cubic-bezier(.22, .61, .36, 1); min-width: 0; }
.au-eta-bar > div::after, .send-progress > div::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: bar-sheen 1.8s ease-in-out infinite; }
@keyframes bar-sheen { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
.au-eta-bar.over > div { background: repeating-linear-gradient(-45deg, var(--gold) 0 10px, var(--gold-bright) 10px 20px); background-size: 28px 28px; animation: au-eta-stripes 1.2s linear infinite; }
@keyframes au-eta-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .au-eta-bar.over > div, .au-eta-bar > div::after, .send-progress > div::after { animation: none; } }
.send-el b { font-variant-numeric: tabular-nums; }

/* ── 계정 설정 「로그인과 안내」 (2026-10-26) ── */
.acct-more2 { margin-bottom: 16px; }
.acct-more2 h2 { margin: 0 0 8px; }
.acct-row2 { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.acct-row2:first-of-type { border-top: 0; }
.acct-row2 p { margin: 4px 0 0; max-width: 62ch; }
.acct-row2 .btn { flex: none; }
@media (max-width: 600px) { .acct-row2 { flex-direction: column; align-items: stretch; } .acct-row2 .btn { width: 100%; } }

/* ── 관리자 화면 (2026-10-26) ── */
.nav a[hidden] { display: none; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.adm-kpi { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-radius: var(--r-card); background: var(--taupe); }
.adm-kpi b { font-size: 28px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.adm-kpi span { font-size: var(--fs-sm); color: var(--graphite); }
.adm-kpi small { font-size: 12px; color: var(--smoke); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.adm-grid .card { margin-bottom: 0; }
.adm-grid h2 { margin: 0 0 8px; }
.adm-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.adm-row:first-of-type { border-top: 0; }
.adm-k { color: var(--smoke); }
.adm-v { color: var(--ink); overflow-wrap: anywhere; }
.adm-v.tone-ok { color: var(--ok); } .adm-v.tone-warn { color: var(--warn); }
.adm-backup-line { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; } /* 마지막 DB 백업 + 「지금 백업하기」 (2026-10-29) */
.adm-v code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 6px; border-radius: var(--r-sm); background: var(--taupe); color: var(--ink); }
#adm-backup-rows .adm-row:first-of-type { border-top: 1px solid var(--line); }
.adm-badge { background: var(--ink); color: var(--eggshell); }
@media (max-width: 1100px) { .adm-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .adm-row { grid-template-columns: 1fr; } .adm-kpi { padding: 16px; } }

/* 관리자 / 일반 회원 (2026-10-26): 지우기·팀 공용 설정은 관리자만. 막는 것은 서버(AdminRequired), 여기는 보이기만 */
.cvx-tg:disabled { cursor: default; opacity: .7; }
#co-name[readonly] { background: var(--taupe); color: var(--graphite); cursor: default; }

/* 관리자: 회원 표 · 등급 고르는 상자 · 시험용 가상 회원 (2026-10-28) */
.adm-members { container-type: inline-size; }
.adm-mwrap { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); }
.adm-mtable { width: 100%; border-collapse: collapse; }
.adm-mtable th { text-align: left; font-size: 12px; font-weight: 500; color: var(--smoke); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-mtable td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-mtable tr:last-child td { border-bottom: 0; }
.adm-mtable .num { text-align: right; }
.adm-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.adm-who .member-av { width: 32px; height: 32px; font-size: 13px; }
.adm-mtable tr.me .member-av { background: var(--ink); color: var(--eggshell); }
.adm-mail { overflow-wrap: anywhere; color: var(--graphite); }
.adm-role { white-space: nowrap; }
.adm-role .adm-badge { margin-right: 8px; }
/* 등급 고르기 줄(회원 창 안) */
.pick-opt { display: flex; align-items: center; gap: 16px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.pick-opt:hover, .pick-opt:focus-visible { background: var(--taupe); outline: none; }
.pick-opt.on { background: var(--taupe); }
.pick-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pick-txt b { font-size: var(--fs-sm); font-weight: 600; }
.pick-txt small { font-size: 12px; color: var(--smoke); line-height: 1.4; }
.pick-check { flex: none; width: 16px; font-size: 13px; font-weight: 700; color: var(--ink); opacity: 0; }
.pick-opt.on .pick-check { opacity: 1; }
.adm-mtable tr { box-sizing: border-box; }
.table-wrap table.adm-mtable { min-width: 0; } /* 휴대폰에서 표 최소 720px 규칙을 끔 — 이 표는 좁으면 카드 */
/* 회원 줄 = 누르면 회원 창 (2026-10-29 사용자: 등급은 표에서 바로 바꾸지 않고 창 안에서). 배지 호버 테두리는 계속 끔 */
.adm-tr { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.adm-mtable tbody tr.adm-tr:hover { background: var(--taupe); }
.adm-tr:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.adm-mtable tr:hover .badge { box-shadow: none !important; }
.adm-role-b.on { background: var(--ink); color: var(--eggshell); }
.adm-mm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.adm-mm-head .member-av { width: 44px; height: 44px; font-size: 16px; flex: none; }
.adm-mm-head b { font-size: var(--fs-md, 16px); }
.adm-mm-h { margin: 24px 0 8px; font-size: var(--fs-sm); font-weight: 600; }
.adm-mm-opts { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-box); }
.adm-mm-opts .pick-opt.on { box-shadow: inset 0 0 0 1px var(--ink); }
.adm-mm-lock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 회원 차단 (2026-10-29): 표에는 빨간 배지 + 줄 흐림, 창 안에는 설명 한 줄 + 단추 */
.adm-block-badge { background: var(--danger-soft); color: var(--danger); }
.adm-tr.blocked .adm-who b, .adm-tr.blocked .adm-mail { color: var(--smoke); text-decoration: line-through; text-decoration-color: var(--ash); }
.adm-mm-block { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-box); color: var(--smoke); line-height: 1.5; }
.adm-mm-block.on { border-color: var(--danger-line); background: var(--danger-soft); color: var(--ink); }
.adm-mm-block .btn { flex: none; }
@media (max-width: 800px) { .adm-mm-block { flex-direction: column; align-items: stretch; } }
/* 접속 기록 (2026-10-29): 회원 표와 같은 표 부품(좁으면 카드), 결과 배지 세 가지 */
.adm-logins { container-type: inline-size; }
.adm-logins .hist-tools { margin-bottom: 12px; }
.adm-lg-who { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-lg-ip { font-variant-numeric: tabular-nums; color: var(--graphite); }
.adm-lg-ok { background: var(--ok-soft); color: var(--ok); }
.adm-lg-warn { background: var(--warn-soft); color: var(--warn-ink); }
.adm-lg-bad { background: var(--danger-soft); color: var(--danger); }
.adm-empty { padding: 24px 0; text-align: center; }
.adm-mm-lg { display: flex; flex-direction: column; gap: 6px; }
.adm-mm-lgrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@container (max-width: 820px) { .adm-lgtable td[data-k="누가"], .adm-actable td[data-k="누가"] { text-align: right; } .adm-lg-who { align-items: flex-end; } }
@media (max-width: 800px) { .table-wrap .adm-mtable td:last-child { position: static; background: transparent; } } /* 카드 모양에서는 휴대폰용 「마지막 열 오른쪽 고정」 규칙을 끔 (2026-10-29 전수 점검) */
/* 작업 기록 (2026-10-29): 접속 기록과 같은 부품, 내용 칸은 줄바꿈 */
.adm-actions { container-type: inline-size; }
.adm-actions .hist-tools { margin-bottom: 12px; }
.adm-ac-sum { white-space: normal; overflow-wrap: anywhere; max-width: 60ch; }
.adm-ac-sum a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ash); text-underline-offset: 3px; }
.adm-ac-sum a:hover { text-decoration-color: var(--ink); }
/* 메일 보내기 진행 창 「이렇게 설정했습니다」 (2026-10-29 사용자): 창을 키워서라도 설정한 것·비운 것을 보이게 */
#au-busy .ai-working { width: min(100%, 880px); }
.au-setup { margin: 16px 0 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.au-setup-head { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 10px; }
.au-setup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
.au-setup-it { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-setup-k { font-size: 12px; color: var(--smoke); }
.au-setup-v { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.au-setup-tag { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--taupe-deep); color: var(--smoke); font-size: 12px; font-weight: 500; } /* 비운 칸 = 기본값 꼬리표 (2026-10-29) */
.au-setup-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--smoke); line-height: 1.5; }@media (max-width: 1000px) { .au-setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .au-setup-grid { grid-template-columns: 1fr; } }
/* 휴지통 탭 (2026-10-29): 종류별 묶음 · 줄마다 되돌리기/완전히 지우기 */
.trash-wrap { display: flex; flex-direction: column; gap: 16px; } /* 다른 목록 화면처럼 화면 폭을 다 씀 (2026-10-29 사용자: 큰 모니터에서 오른쪽이 비어 보임) */
.trash-it { padding: 14px 20px; } .trash-main b { font-size: 15px; } .trash-keep { margin-right: 8px; }
.trash-note { margin: 0; line-height: 1.6; }
.trash-sec h2 { display: flex; align-items: center; gap: 10px; }
.trash-sec h2 .badge { font-weight: 500; }
.trash-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; }
.trash-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); }
.trash-it { display: flex; align-items: center; gap: 12px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.trash-it:last-child { border-bottom: 0; }
.trash-main { flex: 1; min-width: 0; }
.trash-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-main .small { color: var(--smoke); }
.trash-keep { flex: none; font-size: 12px; color: var(--smoke); white-space: nowrap; }
.trash-keep.hold { color: var(--ok); }
.trash-acts { display: flex; gap: 6px; flex: none; }
.trash-empty { padding: 20px 0; text-align: center; }
@media (max-width: 800px) { .trash-it { flex-wrap: wrap; } .trash-main { flex: 1 1 100%; } .trash-acts { margin-left: auto; } }
.adm-pending-badge { background: var(--warn-soft); color: var(--warn-ink); }
/* 가입 신청 상자 (2026-10-29): 회원 표 위, 누가 신청했는지 + 승인/거절 바로 */
/* 등급별 권한표 (2026-11-02 사용자): 회원 표 아래 접힘. 세 칸 격자, 글자만 */
.adm-perm { margin-top: 12px; }
.adm-perm .link-btn { font-size: 13px; padding: 4px 0; min-height: var(--h-sm); }
.adm-perm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--eggshell); overflow: hidden; font-size: 13px; }
.adm-perm-grid > div { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; min-height: 40px; }
.adm-perm-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.adm-perm-grid > .h { font-size: 12px; color: var(--smoke); background: var(--taupe); min-height: 36px; }
.adm-perm-grid > .c { justify-content: center; text-align: center; }
.adm-perm-ok { color: var(--ok); font-weight: 600; }
.adm-perm-no { color: var(--ash); }
.adm-perm-note { margin: 10px 2px 0; line-height: 1.55; max-width: 900px; }
@container (max-width: 480px) { .adm-perm-grid { grid-template-columns: minmax(0, 1fr) 72px 72px; } .adm-perm-grid > div { padding: 10px 10px; } .adm-perm-ok { font-size: 12px; } }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-card-head h2 { margin-bottom: 0; }
.adm-pend-btn.has { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); } /* 신청이 있으면 노랗게 (2026-10-29) */
.adm-pend-btn b { font-weight: 700; }
.adm-pend-list { display: flex; flex-direction: column; }
.nav-pend { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--warn); color: var(--eggshell); font-size: 12px; font-weight: 600; white-space: nowrap; } /* 관리자 메뉴 옆 가입 신청 수 */
.nav a.active .nav-pend { background: var(--gold-bright); color: var(--ink); }
.adm-pending-it { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.adm-pending-it .btns { display: flex; gap: 6px; flex: none; margin-left: auto; }
.adm-mm-approve { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--r-box); line-height: 1.5; }
.adm-mm-approve .btns { display: flex; gap: 6px; flex: none; }
/* 나온 기사 「기사 추가」 창 (2026-10-29): 주소로 넣기 / 키워드로 찾기, 입력 칸은 알약(.rp-search) */
.cov-mode { margin-bottom: 14px; }
.cov-help { margin: 0 0 12px; line-height: 1.6; }
.rp-search.cov-in { flex: 1 1 auto; width: 100%; }
.rp-search.cov-in svg { display: block; color: var(--smoke); }
.cov-kw-row { display: flex; align-items: center; gap: 8px; }
.cov-kw-row .btn { flex: none; }
.cov-kw-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 14px 0 8px; }
.cov-kw-items { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--white); max-height: 52vh; overflow-y: auto; }
.cov-kw-it { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cov-kw-it:last-child { border-bottom: 0; }
.cov-kw-main { flex: 1; min-width: 0; }
.cov-kw-main a { color: var(--ink); text-decoration: none; }
.cov-kw-main a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cov-kw-sum { color: var(--graphite); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cov-kw-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.cov-kw-empty { padding: 20px 0; text-align: center; }
@media (max-width: 600px) { .cov-kw-row { flex-wrap: wrap; } .cov-kw-row .btn { width: 100%; } .cov-kw-it { flex-direction: column; } .cov-kw-side { flex-direction: row; align-items: center; } }
/* 진행 창 장면 (2026-10-29 사용자: "AI가 이메일 내용을 만들어 주는 느낌"): 메일 종이에 글줄이 한 줄씩 써지고(5초 한 바퀴) ✦ 가 반짝임 */
.aw-scene { display: flex; justify-content: center; padding: 12px 0 4px; }
.aw-paper { position: relative; width: min(100%, 340px); padding: 18px 20px 16px; border-radius: var(--r-box); background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20,18,16,.08); display: flex; flex-direction: column; gap: 9px; animation: aw-page 5s ease-in-out infinite; }
.aw-line { display: block; height: 8px; border-radius: 4px; background: var(--taupe-deep); transform-origin: left center; opacity: 0; transform: scaleX(0); animation: aw-l0 5s ease-in-out infinite; } /* 모든 줄이 같은 5초 시계를 쓰고 줄마다 써지는 구간만 다름 → 종이와 함께 부드럽게 나타나고 사라짐 (2026-10-29 사용자: 뚝 끊기지 않게) */
.aw-line.aw-subj { height: 10px; width: 72%; background: var(--ink); margin-bottom: 4px; }
.aw-line:nth-child(3) { width: 100%; animation-name: aw-l1; }
.aw-line:nth-child(4) { width: 92%; animation-name: aw-l2; }
.aw-line:nth-child(5) { width: 96%; animation-name: aw-l3; }
.aw-line.aw-short { width: 58%; animation-name: aw-l4; }
.aw-spark { position: absolute; top: -10px; right: -8px; font-size: 20px; line-height: 1; color: var(--gold); animation: aw-spark 1.6s var(--ease) infinite; }
@keyframes aw-l0 { 0%, 6%  { opacity: 0; transform: scaleX(0); } 18% { opacity: 1; transform: scaleX(1); } 88% { opacity: 1; } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes aw-l1 { 0%, 20% { opacity: 0; transform: scaleX(0); } 32% { opacity: 1; transform: scaleX(1); } 88% { opacity: 1; } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes aw-l2 { 0%, 34% { opacity: 0; transform: scaleX(0); } 46% { opacity: 1; transform: scaleX(1); } 88% { opacity: 1; } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes aw-l3 { 0%, 48% { opacity: 0; transform: scaleX(0); } 60% { opacity: 1; transform: scaleX(1); } 88% { opacity: 1; } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes aw-l4 { 0%, 62% { opacity: 0; transform: scaleX(0); } 74% { opacity: 1; transform: scaleX(1); } 88% { opacity: 1; } 94%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes aw-page { 0% { opacity: 0; transform: translateY(6px); } 6% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(-4px); } }@keyframes aw-spark { 0%, 100% { transform: scale(.85) rotate(0); opacity: .6; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aw-paper, .aw-line, .aw-spark { animation: none; } .aw-line { opacity: 1; transform: none; } }
/* 좁으면(상자 폭 기준) 표 → 카드 — 가로 스크롤로 때우지 않음 */
@container (max-width: 820px) {
  .adm-mtable thead { display: none; }
  .adm-mtable, .adm-mtable tbody, .adm-mtable tr, .adm-mtable td { display: block; width: 100%; }
  .adm-mtable tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .adm-mtable tr:last-child { border-bottom: 0; }
  .adm-mtable td { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 0; border: 0; text-align: right; }
  .adm-mtable td::before { content: attr(data-k); font-size: 12px; color: var(--smoke); text-align: left; flex: none; margin-right: auto; }
  .adm-mtable td[data-k="이름"] { padding-bottom: 8px; text-align: left; justify-content: flex-start; }
  .adm-mtable td[data-k="이름"]::before { display: none; }
}

/* 회원 칸이 등급 단추로 넓어져(2026-10-28) 서버 상태·회원을 위아래로 — 서버 상태는 넓은 화면에서 두 단 */
.adm-grid { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .adm-server { column-count: 2; column-gap: 48px; } .adm-server h2 { column-span: all; } .adm-server .adm-row { break-inside: avoid; } .adm-server .adm-row:nth-of-type(6) { border-top: 0; } }

/* ===== 표 칸 안은 글자만 (2026-10-29 사용자: 컬럼 안 요소에 테두리·배경 상자 효과 없이 텍스트로. 글자 색으로만 뜻을 나타냄) ===== */
td .badge[class], td .au-kw[class], td .au-last[class], td .au-score[class], td .jl-unsub-tg[class], td .adm-role-b[class], td .adm-block-badge[class], td .adm-pending-badge[class], td .hist-reply[class], td .hist-bounce[class] { display: inline; background: none; border: 0; padding: 0; margin: 0; border-radius: 0; min-height: 0; height: auto; min-width: 0; line-height: inherit; font-size: inherit; font-weight: 500; vertical-align: baseline; box-shadow: none; white-space: nowrap; }
td .badge + .badge, td .badge + .au-last { margin-left: 6px; }
td .badge.variant { font-weight: 600; }
td .adm-role-b.on, td .jl-unsub-tg.on, td .badge.variant, td .badge.kn, td .badge.edited { background: none; } /* 두 클래스짜리 원래 규칙보다 앞서게 */
td .adm-role-b.on { color: var(--ink); font-weight: 600; }
td .au-score[class] { margin-right: 6px; font-weight: 600; }
td .au-kw { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
td .jl-unsub-tg { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ash); transition: color var(--dur) var(--ease); }
td .jl-unsub-tg:hover { color: var(--ink); text-decoration-color: currentColor; }
td .jl-unsub-tg.on { color: var(--danger); font-weight: 600; }

/* ===== 휴대폰 누르는 크기 전수 점검 (2026-11-02 사용자) — audit.py 로 360~420px 164 상태를 재어 44px 미만이던 것. 표 칸 안 글자 층보다 뒤에 두어 이김 ===== */
@media (max-width: 800px) {
  input[type=checkbox], .jl-table input[type=checkbox], .checkbox input[type=checkbox] { width: 24px; height: 24px; } /* 16 → 24 (칸 전체가 눌리므로 실제 누르는 자리는 칸) */
  .jl-table td.j-chk, .jl-table th:first-child, .au-table td.au-chk { cursor: pointer; }
  .dp-head-l { min-height: var(--h-tap); padding: 0 10px; margin: 0 -10px; } /* 「이 쪽 모두 고르기」 머리 네모 */
  td .jl-unsub-tg[class] { display: inline-flex; align-items: center; min-height: var(--h-tap); } /* 수신 거부 예/아니요 글자 단추 (글자 모양은 그대로) */
  .hd-back { min-height: var(--h-tap); }
  .login-brand { min-height: var(--h-tap); }
  .send-done-x { width: var(--h-tap); height: var(--h-tap); top: 6px; right: 6px; }
  .cvx-only { min-height: var(--h-tap); }
}