/* 포스트짬 — 네 곳으로 보내는 자리.

   `tool-jjam` 의 도구들과 결을 맞춥니다. 형제 제품이라 낯설면 그 자체가
   비용입니다 — 같은 사람이 오가며 쓰는데 색과 간격이 다르면 매번 다시 읽습니다.
   토큰 이름과 값을 그쪽 `caption/assets/css/app.css` 에서 가져왔습니다.

   색을 쓰는 규칙 하나: UI 자체에는 강조색이 없습니다. 색이 있는 것은 플랫폼
   셋과, 눌러야 할 단추 하나뿐입니다. 그래서 눈이 갈 데로 갑니다.

   좁은 화면을 먼저 짜고 넓은 화면을 얹습니다(min-width). */

:root{
  color-scheme: dark;

  --bg:#0d1017;
  --panel:#141922;
  --sunken:#090c11;
  --line:#232b37;
  --line-soft:#1a212b;
  --ink:#e8ecf3;
  --dim:#8590a3;
  --dim2:#586373;
  --edge:#37424f;
  --btn-bg:#e8ecf3;
  --btn-ink:#0d1017;
  --warn:#e0b341;
  --bad:#e8695f;
  --good:#4ec98a;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Pretendard","Malgun Gothic",sans-serif;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.3px}

.wrap{max-width:760px;margin:0 auto;padding:0 16px 64px}

/* ── 머리 ─────────────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:10px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);margin-bottom:20px;
}
.top h1{font-size:16px}
.top .sub{font-size:12px;color:var(--dim2)}
.top .right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ── 조각 ─────────────────────────────────────────────────────────── */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:14px;
}
.card > h2{font-size:14px;margin-bottom:4px}
.card > .lead{font-size:12.5px;color:var(--dim2);line-height:1.6;margin:0 0 12px}

label.field{display:block;margin-bottom:12px}
label.field > .lbl{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}

input[type=text],input[type=password],textarea,select{
  width:100%;background:var(--sunken);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--edge)}
textarea{resize:vertical;min-height:88px;line-height:1.6}

.row{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){ .row{grid-template-columns:1fr 1fr} }

/* 플랫폼마다 톤 한 줄. 색이 붙은 두 글자가 "어느 자리 이야기인지"를 나릅니다. */
.tones{margin-bottom:12px}
.tones > .lbl{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
.tone-row{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.tone-row .code{
  flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;font-style:normal;
  padding:2px 6px;border-radius:4px;background:var(--a);color:#0d1017;
}
.tone-row .who{flex:0 0 88px;font-size:12.5px;color:var(--dim)}
.tone-row select{flex:1 1 auto}

/**
 * 넓은 화면에서는 **두 칸**으로 세웁니다.
 *
 * 넷이 한 줄씩 쌓이면 오른쪽이 통째로 비고 눈이 세로로 길게 움직입니다.
 * 두 칸이면 넷이 한눈에 들어옵니다. 좁은 화면에서는 한 칸이 낫습니다 —
 * 이름과 고르는 칸이 같이 붙어 있어야 읽힙니다.
 */
@media (min-width:600px){
  .tones .rows{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
  .tone-row{margin-bottom:0}
}

/* ── 단추 ─────────────────────────────────────────────────────────── */
.btn{
  background:var(--btn-bg);color:var(--btn-ink);border:0;border-radius:9px;
  padding:11px 18px;font-weight:700;cursor:pointer;
}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover:not(:disabled){border-color:var(--edge)}
.btn.small{padding:6px 11px;font-size:12.5px;font-weight:600}

/* ── 영상 놓는 자리 ───────────────────────────────────────────────── */
.drop{
  border:2px dashed var(--line);border-radius:var(--r);
  padding:28px 16px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.drop:hover,.drop.over{border-color:var(--edge);background:var(--sunken)}
.drop .big{font-size:14px;font-weight:600}
.drop .small{font-size:12px;color:var(--dim2);margin-top:4px}

.bar{height:5px;background:var(--sunken);border-radius:3px;overflow:hidden;margin-top:12px}
.bar > i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}

.picked{display:flex;align-items:center;gap:10px;font-size:13px}
.picked .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked .meta{color:var(--dim2);font-family:var(--mono);font-size:11.5px;flex:0 0 auto}

/* ── 규격 결과 ────────────────────────────────────────────────────── */
.specs{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.spec{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;
}
.spec .code{
  flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:2px 6px;border-radius:4px;background:var(--a);color:#0d1017;
}
.spec .msgs{font-size:12.5px;line-height:1.55;min-width:0}
.spec .msgs b{font-weight:700}
.spec .tag{font-family:var(--mono);font-size:10.5px;margin-right:5px}
.spec .tag.block{color:var(--bad)}
.spec .tag.warn{color:var(--warn)}
.spec .tag.good{color:var(--good)}
/* 못 잰 것. '좋음' 과 헷갈리면 안 되므로 무채색으로 둡니다 — 판정이 아니라 부재입니다. */
.spec .tag.blind{color:var(--dim2)}

/* ── 결과 카드 ────────────────────────────────────────────────────── */
.deck{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media (min-width:760px){ .deck{grid-template-columns:repeat(2,1fr)} }

.out{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:10px;
  border-top:2px solid var(--a);
}
.out .head{display:flex;align-items:center;gap:8px}
.out .head .name{font-size:13px;font-weight:700}
.out .head .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim2)}
.out .head .n.over{color:var(--bad)}

.fld{display:flex;flex-direction:column;gap:5px}
.fld .h{display:flex;align-items:center;gap:8px}
.fld .h .k{font-size:11px;color:var(--dim)}
.fld .h .copy{margin-left:auto}
.fld .v{
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:8px;
  padding:9px 11px;font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word;
}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0}
.tags:empty{display:none}
.tags li{
  font-family:var(--mono);font-size:11px;color:var(--dim);
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:5px;padding:2px 6px;
}

/* ── 알림 ─────────────────────────────────────────────────────────── */
.err{
  background:rgba(232,105,95,.1);border:1px solid rgba(232,105,95,.35);
  color:#f0a8a2;border-radius:9px;padding:10px 12px;font-size:13px;margin-bottom:14px;
}
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:var(--btn-ink);border-radius:8px;
  padding:9px 16px;font-size:13px;font-weight:600;z-index:9;
}
.note{font-size:12px;color:var(--dim2);line-height:1.6}

[hidden]{display:none !important}
.busy{opacity:.45;pointer-events:none}

/* ── 계정 연결 한 줄 ──────────────────────────────────────────────── */
.acct{
  display:flex;align-items:center;gap:10px;
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:9px;padding:11px 12px;
}
.acct .code{
  flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;font-style:normal;
  padding:2px 6px;border-radius:4px;background:var(--a);color:#0d1017;
}
.acct .who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.acct .who b{font-size:13px}
.acct a.btn{text-decoration:none;display:inline-block}


/* ── 연결 창 ──────────────────────────────────────────────────────── */
/* <dialog> 를 씁니다 — 바깥 누르기·Esc·초점 가두기를 브라우저가 해 줍니다. */
.modal{
  width:min(440px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink);padding:18px;
}
.modal::backdrop{background:rgba(5,7,11,.72)}
.modal-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.modal-top h2{font-size:15px;margin-right:auto}
.modal .acct{margin-bottom:8px}

/* 덜 연결됐다는 점. 색 하나로 "볼 것이 있다" 만 말합니다. */
.dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--warn);vertical-align:middle;margin-left:2px;
}

/* ── 배포 진행 ────────────────────────────────────────────────────── */
.steps{display:flex;flex-direction:column;gap:9px;margin:14px 0}
.steps:empty{display:none}
.step{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;
}
.step .code{
  flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;font-style:normal;
  padding:2px 6px;border-radius:4px;background:var(--a);color:#0d1017;
}
.step .mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.step .mid b{font-size:12.5px}
.step .what{font-size:12px;color:var(--dim2);line-height:1.5}
.step .what a{color:var(--good)}

.sbar{height:3px;background:var(--line-soft);border-radius:2px;overflow:hidden;margin-top:2px}
.sbar > i{display:block;height:100%;width:0;background:var(--dim);transition:width .4s ease}

/* 도는 중에는 막대가 숨 쉽니다 — 멈춘 것과 구별되어야 합니다. */
.step[data-state="run"] .sbar > i{background:var(--a);animation:breathe 1.4s ease-in-out infinite}
.step[data-state="done"] .sbar > i{background:var(--good)}
.step[data-state="done"] .what{color:var(--good)}
.step[data-state="fail"] .sbar > i{background:var(--bad)}
.step[data-state="fail"] .what{color:#f0a8a2}
/* 건너뛴 것. 실패와 달라야 합니다 — 안 한 것이지 못 한 것이 아닙니다. */
.step[data-state="skip"] .sbar > i{background:var(--line)}
.step[data-state="skip"] .what{color:var(--dim2)}

@keyframes breathe{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .step[data-state="run"] .sbar > i{animation:none}
  .sbar > i{transition:none}
}

/* 라벨 옆 곁말. 본 이야기보다 작고 흐리게. */
.lbl .hint{font-style:normal;color:var(--dim2);font-weight:400}

/* ── 틱톡 칸 ──────────────────────────────────────────────────────── */
/* 앞의 셋과 달리 물어봐야 하는 것이 많습니다. 전부 틱톡 심사 항목입니다. */
.tt{
  background:var(--sunken);border:1px solid var(--line-soft);border-left:2px solid var(--a);
  border-radius:9px;padding:13px 14px;margin:14px 0;
}
.tt-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tt-face{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--line)}
.tt .who{display:flex;flex-direction:column;gap:1px;min-width:0}
.tt .who b{font-size:13px}

.tt-toggles{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:9px}
.tt-toggles label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim)}
.tt-toggles input{accent-color:var(--a)}
/* 크리에이터가 꺼 둔 것. 회색으로 막아야 합니다 — 심사 항목입니다. */
.tt-toggles input:disabled + *,
.tt-toggles label:has(input:disabled){color:var(--dim2);opacity:.55;cursor:not-allowed}

/* 곳마다 다른 선택지. 틱톡 칸과 같은 결로 두되 테두리는 없습니다 —
   저건 심사 덩이라 묶여 보여야 하고, 이건 낱개라 그럴 까닭이 없습니다. */
.opts{margin:14px 0 4px;padding:12px 0;border-top:1px solid var(--line-soft)}

/* 곳별 선택지도 넷입니다. 톤과 같은 결로 두 칸에 놓습니다. */
@media (min-width:600px){
  .opts{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;align-items:start}
  .opts > .field{margin-top:0 !important}
  .opt{margin-bottom:0;min-height:44px}
}
.opt{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--dim);margin-bottom:10px}
.opt input{accent-color:var(--edge);margin-top:2px;flex:none}
.opt b{color:var(--ink);font-size:11px;letter-spacing:.02em;margin-right:3px}
.opt .hint{display:block;margin-top:2px;color:var(--dim2);font-size:11.5px;font-style:normal;line-height:1.55}
/* 이 절의 안내문은 한 문단씩이라 기울임이 읽기 나쁩니다.
   라벨 옆에 붙는 것보다 한 단 더 작게 둡니다 — 곁들이는 말이라 본문을 밀지
   않아야 합니다. */
.opts .field .hint{font-style:normal;font-size:11px;line-height:1.6}
/* 체험판을 켜면 「피드에도」는 뜻이 없어집니다. 회색으로 막습니다. */
.opt.off{opacity:.45}

.tt-agree{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--dim);margin-top:4px}
.tt-agree input{accent-color:var(--a);margin-top:2px}
.tt-agree a{color:var(--ink)}

/* ── 탭 ───────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;margin-left:12px}
.tab{
  background:transparent;border:0;border-radius:7px;padding:6px 12px;
  font-size:13px;font-weight:600;color:var(--dim2);cursor:pointer;
}
.tab:hover{color:var(--dim)}
.tab.on{background:var(--panel);color:var(--ink)}

/* 분석하기 안쪽 탭. 머리글 탭과 같은 생김새를 쓰되 이름을 따로 둡니다 —
   `.tab` 을 그대로 쓰면 머리글 탭을 다루는 손잡이가 이것까지 집어
   갈래가 통째로 바뀝니다. 카드 사이에 놓이므로 여백만 다릅니다. */
.subtabs{display:flex;gap:4px;margin:0 0 14px}
.subtab{
  background:transparent;border:0;border-radius:7px;padding:6px 12px;
  font-size:13px;font-weight:600;color:var(--dim2);cursor:pointer;
}
.subtab:hover{color:var(--dim)}
.subtab.on{background:var(--panel);color:var(--ink)}
/* 못 가져온 곳. 넷을 하나씩 눌러 봐야 어디가 안 됐는지 알게 두지 않습니다 —
   판을 쌓아 두었을 때는 한눈에 보이던 것입니다. `.note.bad` 와 같은 색. */
.subtab.bad{color:#f0a8a2}

/* 몇 개를 볼지 · 무엇부터 볼지. 개수는 서버로 가고 차례는 여기서 끝납니다. */
.seebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.seepick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim2)}
/* 라벨이 두 글자라 좁으면 세로로 쪼개집니다. 「나
라」가 됩니다. */
.seepick > span{white-space:nowrap;flex:0 0 auto}
.seepick select{width:auto}
.seepick select{
  font-family:var(--mono);font-size:11.5px;color:var(--ink);
  padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--sunken);
}

/* ── 성과 판 ──────────────────────────────────────────────────────── */
.board{border-top:2px solid var(--a)}
.board-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.board-top .code{
  font-family:var(--mono);font-size:10.5px;font-weight:700;font-style:normal;
  padding:2px 6px;border-radius:4px;background:var(--a);color:#0d1017;
}
.board-top b{font-size:13px}
/* 팔로워 수는 잣대입니다. 이름 곁에 조용히 둡니다 — 성과 칸이 아닙니다. */
.board-who{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim2)}
.note.bad{color:#f0a8a2}

.post{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-top:1px solid var(--line-soft);
}
.post-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:var(--sunken)}
.post-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.post-title{
  font-size:12.5px;color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
a.post-title:hover{text-decoration:underline}
.post-at{font-family:var(--mono);font-size:11px;color:var(--dim2);flex:0 0 auto}

/* 곳마다 칸 수가 다릅니다. 없는 것은 아예 안 그립니다. */
.post-nums{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.post-nums i{font-style:normal;color:var(--dim2);margin-right:4px}
/* 길이는 성과가 아니라 잣대라 한 겹 더 흐립니다. */
.post-nums .dim{color:var(--dim2)}

/* ── 뜻 붙이기 ────────────────────────────────────────────────────
   숫자 옆에 "그래서 어떻다" 를 답니다. 조회 212 가 잘된 것인지는 숫자만
   봐서는 모릅니다.

   보통 이하를 빨강으로 칠하지 않는 까닭: 못한 게시물은 **탈이 아닙니다.**
   빨강은 고쳐야 할 것에만 씁니다. 여기서는 그냥 흐리게 둡니다. */
.marks{display:flex;flex-wrap:wrap;gap:6px}
.mark{
  font-family:var(--mono);font-size:10.5px;line-height:1.75;
  padding:0 6px;border:1px solid var(--line);border-radius:5px;
  background:var(--sunken);color:var(--dim);
}
.mark i{font-style:normal;color:var(--dim2);margin-right:4px}
.mark.up{color:var(--good);border-color:#2e5c47}
.mark.down{color:var(--dim2);border-color:var(--line-soft)}

/* 조회수 흐름. 눈금도 축도 없습니다 — 값을 읽으라는 것이 아니라 모양을
   보라는 것입니다. 정확한 값은 위 칸에 이미 있습니다. */
.spark{
  display:inline-flex;align-items:center;cursor:help;
  /* 잔선이 조각보다 큽니다. align-self 가 없으면 flex 가 옆 조각들을 같이
     늘여 놓아 글자 조각들의 아래 선이 어긋납니다. */
  align-self:center;
  padding:0 5px;border:1px solid var(--line);border-radius:5px;
  background:var(--sunken);color:var(--dim2);
}
.marks{align-items:center}
.spark svg{display:block}

/* ── 같은 영상, 네 곳 ─────────────────────────────────────────────
   한 줄이 영상 하나입니다. 좁은 화면에서는 두 칸, 넓으면 네 칸이 나란히
   놓여 곳끼리 견주기 좋습니다. */
.bundle{padding:11px 0;border-top:1px solid var(--line-soft)}
.bundle:first-of-type{border-top:0;padding-top:4px}
.bundle-top{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;min-width:0}
.bundle-top .post-title{flex:0 1 auto;min-width:0}
.bundle-top .mark{flex:0 0 auto}
.bundle-cells{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media (min-width:600px){ .bundle-cells{grid-template-columns:repeat(4,1fr)} }
.bcell{
  display:flex;align-items:center;gap:7px;
  padding:6px 8px;border:1px solid var(--line);border-left:2px solid var(--a);
  border-radius:8px;background:var(--sunken);
  color:var(--ink);text-decoration:none;
}
a.bcell:hover{border-color:var(--edge);border-left-color:var(--a)}
.bcell .code{
  font-family:var(--mono);font-size:9.5px;font-weight:700;font-style:normal;
  padding:1px 5px;border-radius:4px;background:var(--a);color:#0d1017;
}
.bcell b{font-family:var(--mono);font-size:13px}
.bcell span{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:auto}
/* 참여율이 가장 높은 곳. 그 곳이 이 영상에 맞은 곳입니다. */
.bcell.best{border-color:#2e5c47}
.bcell.best span{color:var(--good)}

/* ── 어느 문구가 먹혔나 ───────────────────────────────────────────
   위 칸이 다른 것은 플랫폼이 달라서일 수도 있고 문구가 달라서일 수도
   있습니다. 문구를 나란히 놓아야 그 둘을 가릅니다. 접어 두는 까닭은
   펼치면 한 줄이 열 줄이 되어 목록을 못 훑기 때문입니다. */
.bundle-top .btn.small{margin-left:auto;flex:0 0 auto}
.saids{display:grid;grid-template-columns:1fr;gap:6px;margin-top:7px}
@media (min-width:600px){ .saids{grid-template-columns:repeat(2,1fr)} }
.said{
  padding:8px 10px;border:1px solid var(--line);border-left:2px solid var(--a);
  border-radius:8px;background:var(--sunken);
}
.said-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.said-top .code{
  font-family:var(--mono);font-size:9.5px;font-weight:700;font-style:normal;
  padding:1px 5px;border-radius:4px;background:var(--a);color:#0d1017;
}
.said-top .mark{margin-left:auto}
/* 줄바꿈을 그때 넣은 대로 둡니다 — 첫 줄이 훅이라 줄이 어디서 끊겼는지가 뜻입니다. */
.said-text{font-size:12px;line-height:1.6;color:var(--ink);white-space:pre-wrap;margin:0}
.said-tags{font-family:var(--mono);font-size:11px;color:var(--dim2);margin:5px 0 0}

/* ── 댓글 ─────────────────────────────────────────────────────────── */
.talks{
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:8px;
  padding:10px 12px;margin:2px 0 8px 54px;
}
@media (max-width:520px){ .talks{margin-left:0} }
.talk{padding:8px 0;border-top:1px solid var(--line-soft)}
.talk:first-child{border-top:0;padding-top:0}
.talk-top{display:flex;align-items:baseline;gap:8px}
.talk-top b{font-size:12px}
.talk-at{font-family:var(--mono);font-size:10.5px;color:var(--dim2)}
.talk-text{font-size:12.5px;line-height:1.6;margin:3px 0 0;color:var(--dim);white-space:pre-wrap}
.talk-reply{display:flex;gap:6px;margin-top:7px}
.talk-reply input{flex:1 1 auto;padding:6px 9px;font-size:12.5px}

/* ── 연결하는 법 ──────────────────────────────────────────────────── */
/* 접어 둡니다. 처음 한 번만 필요한데 늘 펼쳐 두면 창이 길어집니다. */
.how{margin:-4px 0 12px 0}
.how summary{
  font-size:12px;color:var(--dim2);cursor:pointer;padding:4px 0 4px 2px;
  list-style:none;
}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:'▸ ';color:var(--dim2)}
.how[open] summary::before{content:'▾ '}
.how summary:hover{color:var(--dim)}
.how ol{margin:6px 0 0;padding-left:20px;font-size:12px;color:var(--dim);line-height:1.65}
.how li{margin-bottom:5px}
.how code{
  font-family:var(--mono);font-size:11px;color:var(--ink);
  background:var(--sunken);padding:1px 4px;border-radius:3px;word-break:break-all;
}
.how .warn-line{
  font-size:11.5px;color:var(--warn);line-height:1.6;margin:8px 0 0;
  padding-left:9px;border-left:2px solid rgba(224,179,65,.4);
}

/* ── 순위 — 남의 것 ───────────────────────────────────────────────
   「분석하기」와 같은 뼈대(.post)를 씁니다. 같은 자로 재는 것이 이 화면의
   요점이라, 생김새도 같아야 눈이 바로 견줍니다. 앞에 등수만 붙습니다. */
.rank-row{align-items:center}
.rank-no{
  flex:0 0 auto;width:22px;text-align:right;
  font-family:var(--mono);font-size:13px;color:var(--dim2);
}
.rank-row:nth-child(2) .rank-no,
.rank-row:nth-child(3) .rank-no,
.rank-row:nth-child(4) .rank-no{color:var(--ink)}
.rank-who{font-size:11.5px;color:var(--dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「쇼츠 자리만」 은 체크칸이라 폭을 안 늘립니다. */
.seepick input[type=checkbox]{width:auto;margin:0}

/* ── 지켜보는 채널 ────────────────────────────────────────────────
   칩 하나가 채널 하나. 빼기 단추가 안에 붙어 있어 목록이 한 줄로 흐릅니다. */
.watchlist{display:flex;flex-wrap:wrap;gap:6px}
.watch{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 6px 3px 9px;border:1px solid var(--line);border-radius:14px;
  background:var(--sunken);font-size:12px;
}
.watch b{font-weight:600;color:var(--ink)}
.watch-x{
  border:0;background:none;color:var(--dim2);cursor:pointer;
  font-size:14px;line-height:1;padding:0 2px;
}
.watch-x:hover{color:var(--bad)}
.watch-x:disabled{opacity:.4;cursor:default}
/* 「쇼츠 자리만」 같은 체크칸은 폭을 안 늘립니다. */
.seepick input[type=checkbox]{width:auto;margin:0}
/* 채널 이름 옆의 올린 날짜. 이름과 같은 줄에서 한 칸 띄웁니다. */
.rank-who{display:flex;align-items:baseline;gap:7px}
.rank-who > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-at{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--dim2)}

/* ── 깊이 보기 ────────────────────────────────────────────────────
   순위·트렌드가 「무엇이 됐나」 라면 여기는 「왜 됐나」 입니다.
   판을 새로 만들지 않고 있던 줄에 얹습니다 — 표를 하나 더 만들면
   같은 것을 두 번 보게 되고 어느 줄 이야기인지 눈으로 이어야 합니다. */
.study-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.study-ask .note{flex:1 1 220px;min-width:0}

.mark.hook{color:var(--ink);border-color:var(--edge)}
.said-read{font-size:11.5px;line-height:1.6;color:var(--dim2);margin-top:2px}
.said-read b{color:var(--dim);font-weight:600}

.card.study{border-top:2px solid var(--ink)}
.study-h{font-size:12px;color:var(--dim);margin:14px 0 6px}
.study-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.study-list li{
  font-size:12.5px;line-height:1.6;
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px;
}
.study-list .n{font-family:var(--mono);font-size:11px;color:var(--dim2);font-style:normal}
.study-list .try{color:var(--ink);font-weight:600}

/* 훅 세어 보기. 막대는 눈금이 아니라 「어느 것이 흔한가」 만 나릅니다. */
.tally{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.tally-row{display:flex;align-items:center;gap:8px;font-size:12px}
.tally-name{flex:0 0 76px;color:var(--dim)}
.tally-bar{flex:1 1 auto;height:6px;background:var(--sunken);border-radius:3px;overflow:hidden}
.tally-bar > i{display:block;height:100%;background:var(--dim2)}
.tally-row b{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--dim)}

/* 지켜보는 곳이 저마다 어떻게 됐나. 빈 표에 까닭을 붙이는 자리입니다. */
.watch-said{display:flex;flex-direction:column;gap:3px;margin:8px 0 4px}
.watch-said-row{display:flex;gap:8px;font-size:11.5px;color:var(--dim2);align-items:baseline}
.watch-said-row b{flex:0 0 auto;color:var(--dim);font-weight:600}
.watch-said-row span{min-width:0}
.watch-said-row.bad span{color:#f0a8a2}

/* ── 한 편 ────────────────────────────────────────────────────────
   시청 지속 곡선. 눈금을 안 답니다 — 숫자를 읽는 것이 아니라
   「어디서 확 떨어지나」 를 보는 그림입니다. */
.keep{color:var(--dim);margin:8px 0 4px}
.keep svg{display:block;overflow:visible}
.keep-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim2);margin-top:3px}
.study-list .quote{color:var(--dim2);font-style:normal}

/* ── 인증번호 — 한 가지만 하는 화면 ───────────────────────────────
   방패 · 여섯 자리 칸 · 단추 하나. 두 단계를 두 장으로 나눈 뒤쪽입니다.

   여기만 색을 씁니다. 「UI 에는 강조색이 없고 눌러야 할 단추 하나만 색을
   갖는다」는 이 파일의 규칙 그대로인데, 이 화면에는 그 단추가 정말 하나뿐이라
   색이 제 몫을 다합니다. 안에 들어가면 다시 무채색입니다.

   **붉은색을 안 쓰는 까닭:** 이 화면의 오류 글씨가 붉은색입니다(.gate-say.bad).
   단추까지 붉으면 **눌러야 할 것과 잘못된 것이 같은 색**이 됩니다. 파란색은
   이 저장소 어디에도 없던 색이라 다른 뜻과 겹치지 않습니다. */
.gate{
  max-width:340px;margin:32px auto;padding:26px 24px 20px;text-align:center;
}
.gate-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;margin-bottom:14px;
  background:rgba(47,111,224,.16);border:1px solid rgba(47,111,224,.35);color:#7fa9f5;
}
.gate-h{font-size:19px;letter-spacing:-.4px}
.gate-lead{font-size:12.5px;color:var(--dim2);margin:5px 0 18px}

/* 여섯 자리를 **한 덩이가 아니라 여섯 개로** 보게 띄웁니다. */
.gate-row{display:flex;gap:8px;margin-bottom:12px}
.gate-row input{
  flex:1 1 auto;min-width:0;text-align:center;
  font-family:var(--mono);font-size:20px;letter-spacing:.42em;
  /* 자간이 오른쪽에도 붙어 가운데가 밀립니다. 그만큼 왼쪽으로 당겨 둡니다. */
  text-indent:.42em;
  padding:13px 10px;
}
.gate-row input::placeholder{color:#2f3947;letter-spacing:.42em}

.gate-paste{
  flex:0 0 auto;width:48px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--sunken);border:1px solid var(--line);border-radius:9px;
  color:var(--dim);cursor:pointer;
}
.gate-paste:hover{border-color:var(--edge);color:var(--ink)}

/* 이 화면의 단추는 하나뿐입니다. 폭을 다 씁니다. */
/* 흰 글씨가 또렷하게 얹히는 깊이로 잡았습니다. 더 밝게 하면 글씨가 뜹니다. */
.gate .btn.go{
  display:block;width:100%;
  background:#2f6fe0;color:#fff;
}
.gate .btn.go:hover:not(:disabled){background:#3d7cec}

/* 보낸 것도 못 보낸 것도 여기 한 줄로. 붉은색은 **탈에만** 씁니다. */
.gate-say{font-size:12px;line-height:1.6;color:var(--dim);margin:12px 0 0}
.gate-say.bad{color:#f0a8a2}

/* 대개 안 누르는 것들이라 작게 둡니다. 크면 자꾸 눈에 걸립니다. */
.gate-more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--dim2);
}
.gate-more button{
  background:none;border:0;padding:0;color:var(--dim);cursor:pointer;font-size:12px;
}
.gate-more button:hover{color:var(--ink);text-decoration:underline}
.gate-more button:disabled{opacity:.45;cursor:default;text-decoration:none}
/* 갈래가 다섯입니다. 좁은 화면에서는 가로로 밀어 봅니다 — 줄바꿈하면
   글자가 낱자로 쪼개져 읽을 수가 없습니다. */
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{white-space:nowrap;flex:0 0 auto}

/* ── 진단 ─────────────────────────────────────────────────────────
   숫자 조각들 사이에 문장이 하나 섞입니다. 같은 회색으로 두면 그냥 또 하나의
   숫자 칸으로 읽혀서, 정작 「왜 떨어졌는지」가 묻힙니다. 그래서 이것만 배경을
   채웁니다 — 테두리만 바꾸는 것으로는 스물다섯 줄 속에서 안 보입니다. */
.mark.call{
  border-color:transparent;color:var(--btn-ink);
  background:var(--dim);font-weight:600;
}
/* 안 뿌려줬다 — 알고리즘 몫입니다. 영상을 고쳐도 안 낫습니다. */
.mark.call.blocked{background:var(--warn)}
/* 안 먹혔다 · 끊겼다 — 영상 몫입니다. */
.mark.call.dead,
.mark.call.flop{background:var(--bad)}
/* 아직 이른데 반응이 차갑다. 경고보다 한 단계 낮게 둡니다. */
.mark.call.cold{background:var(--dim);color:var(--bg)}
.mark.call.good{background:var(--good)}

/* 언제부터 꺾였나. 목록 맨 위에 한 번만 섭니다.
   부진이 안 이어지면 아예 안 그립니다 — 잘 되고 있을 때 빈 상자가 자리를
   차지하면 그다음부터는 아무도 안 봅니다. */
.slump{
  margin:2px 0 14px;padding:11px 13px;
  border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:var(--r);background:var(--sunken);
}
.slump-head{margin:0 0 8px;font-size:13px;color:var(--ink);line-height:1.5}
.slump .marks{margin-bottom:2px}
.slump-sub{margin:12px 0 6px;font-size:11.5px;color:var(--dim2)}

/* 무엇이 달라졌나. 이름 → 값 → 한마디.
   좁은 화면에서는 이름이 위로 올라가고 값이 아래에 놓입니다. */
.shifts{
  display:grid;grid-template-columns:auto 1fr;gap:5px 12px;
  margin:0;font-size:12px;
}
.shifts dt{color:var(--dim2);white-space:nowrap}
.shifts dd{margin:0;color:var(--dim);font-family:var(--mono);font-size:11.5px}
.shifts dd .was{color:var(--dim2)}
/* 「요즘」쪽만 살립니다. 눈이 갈 곳은 바뀐 뒤의 값입니다. */
.shifts dd .now{color:var(--ink)}
.shifts dd em{
  display:block;margin-top:2px;
  font-family:inherit;font-size:11.5px;font-style:normal;color:var(--dim2);
}

@media (max-width:520px){
  .shifts{grid-template-columns:1fr;gap:2px}
  .shifts dt{margin-top:7px}
  .shifts dt:first-child{margin-top:0}
}

/* 판정의 근거와 할 일. `title` 에만 두었더니 마우스를 올려야 보여서 아무도
   안 봤습니다 — 정작 「왜 떨어졌나」의 답이 거기 있는데요. 꺼내 놓습니다. */
.called{
  margin:5px 0 0;font-size:11.5px;line-height:1.65;color:var(--dim);
  padding-left:8px;border-left:2px solid var(--line);
}
.called b{
  display:block;font-family:var(--mono);font-size:10.5px;
  font-weight:400;color:var(--dim2);margin-bottom:1px;
}
/* 판정 갈래마다 왼쪽 선 색을 맞춥니다. 조각과 같은 색이라야 한 이야기로 읽힙니다. */
.called.blocked{border-left-color:var(--warn)}
.called.dead,
.called.flop{border-left-color:var(--bad)}
.called.good{border-left-color:var(--good)}

/* 고칠 것. 번호가 곧 순서입니다 — 위일수록 근거가 셉니다. */
.todo{margin:0;padding-left:18px;display:grid;gap:7px}
.todo li{font-size:12px;line-height:1.55;color:var(--ink)}
.todo li::marker{color:var(--dim2);font-family:var(--mono);font-size:11px}
.todo b{font-weight:600}
.todo em{
  display:block;margin-top:1px;
  font-style:normal;font-size:11.5px;color:var(--dim2);
}

/* 언제 올릴까. 부진과 상관없이 늘 섭니다 — 잘 되고 있어도 더 나은 때는
   있습니다. 표본이 모자란 칸은 서버가 아예 안 보내므로 여기서는 안 가립니다. */
.whenbox{
  margin:2px 0 14px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);
}
.slots{display:flex;align-items:stretch;gap:4px;margin-bottom:6px}
.slots-name{
  flex:0 0 42px;align-self:center;
  font-size:11px;color:var(--dim2);
}
/* 한 칸이 요일 하나 혹은 시간대 하나. 이름 · 막대 · 숫자를 세로로 쌓습니다. */
/* 이름을 `.bar` 로 지었다가 **업로드 진행 막대(.bar)** 와 부딪혔습니다.
   그쪽이 `height:5px; overflow:hidden` 이라 요일 이름과 숫자가 통째로 잘려
   막대만 덩그러니 보였습니다. 화면을 안 봤으면 못 찾았을 것입니다. */
.slot{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;
  padding:5px 6px;border:1px solid var(--line-soft);border-radius:6px;
  color:var(--dim);cursor:help;
}
.slot b{font-weight:400;font-size:11px;color:var(--dim2);white-space:nowrap}
.slot em{font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--dim)}
/* 막대 자체. 채운 길이가 도달 중앙값입니다. */
.slot i{
  display:block;height:3px;border-radius:2px;
  background:var(--edge);
}
/* 제일 좋은 칸과 제일 나쁜 칸만 색을 줍니다. 다 칠하면 아무것도 안 보입니다. */
.slot.up{border-color:#2e5c47}
.slot.up i{background:var(--good)}
.slot.up em{color:var(--good)}
.slot.down i{background:var(--bad)}
.slot.down em{color:var(--bad)}

.whentail{margin:7px 0 0;font-size:11.5px;color:var(--dim2);line-height:1.55}

@media (max-width:520px){
  .slots{flex-wrap:wrap}
  .slots-name{flex:0 0 100%;margin-bottom:2px}
  .slot{flex:1 1 60px}
}

/* 제미나이가 본 것. 셈으로 낸 것들과 한 상자 안에 있으므로, 여기서부터는
   근거가 다르다는 것이 보여야 합니다 — 위는 숫자고 여기는 그림입니다. */
.looked{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.looked-say{
  margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--ink);
}
.lookrow{
  display:grid;grid-template-columns:44px 1fr;gap:2px 10px;
  margin-bottom:8px;font-size:11.5px;line-height:1.55;
}
.lookrow b{
  grid-row:1 / span 2;align-self:start;
  font-weight:400;font-size:11px;color:var(--dim2);
}
/* 무게가 큰 것만 눈에 띄게. 다 굵게 하면 순서가 사라집니다. */
.lookrow.big b{color:var(--ink);font-weight:600}
.lookrow .was{color:var(--dim2)}
.lookrow .now{color:var(--dim)}
.lookrow.big .now{color:var(--ink)}

@media (max-width:520px){
  .lookrow{grid-template-columns:1fr}
  .lookrow b{grid-row:auto}
}