/* ============================================================
   YT DATA LAB — Clean AI Workspace

   장시간 들여다보는 도구라 화려함보다 피로도를 낮추는 쪽으로 잡았습니다.
   흰 카드와 연회색 바탕, 보라색 하나로 강조를 몰아줍니다.

   토큰만 고치면 전체 톤이 한 번에 바뀝니다.
   화면마다 다른 버튼이나 카드가 생기지 않게 여기서만 정의합니다.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* 브랜드 */
  --brand:#6C5CE7;
  --brand-hover:#5849D6;
  --brand-active:#493CBF;
  --brand-soft:#F0EDFF;
  --brand-softer:#F7F6FF;
  --brand-strong:#E6E1FF;
  --brand-text:#5849D6;
  --brand-line:#BDB4F8;

  /* 바탕과 면 */
  --bg:#F7F8FC;
  --surface:#FFFFFF;
  --surface-2:#F3F4F7;
  --surface-3:#F8F9FB;

  /* 선 */
  --line:#E8EAF0;
  --line-strong:#D6D9E2;
  --line-soft:#EEF0F4;

  /* 글자 */
  --text:#1E2028;
  --text-2:#444854;
  --text-dim:#5F6474;
  /* 제일 흐린 글자.

     예전에는 #A5A9B3 이었는데 흰 바탕에서 대비가 2.35 였습니다.
     기준이 4.5 인데 절반입니다. 게다가 11.5px 로 쓰는 자리가 많아
     제일 안 읽히는 글자였습니다.

     흐린 느낌은 살리되 읽히는 선까지만 진하게 했습니다. */
  --text-faint:#64697B;

  /* 상태.

     선과 면에 쓰는 색과 글자에 쓰는 색을 갈랐습니다.
     한 색으로 둘 다 하려니 어느 한쪽이 늘 어긋났습니다. */
  --ok:#18A76F;        --ok-bg:#EAF8F2;    --ok-text:#0F7B52;
  /* 흰 글자를 얹을 때 쓰는 진한 바탕 */
  --ok-deep:#0E7E52;   --warn-deep:#8A5804; --err-deep:#B93A3A;
  --warn:#E39A21;      --warn-bg:#FFF6E5;  --warn-text:#8A5804;
  --err:#E25555;       --err-bg:#FDEEEE;   --err-text:#C33B3B;
  --info:#4385F5;      --info-bg:#EBF3FF;  --info-text:#2563C9;

  /* 형태 */
  --r-lg:16px; --r:12px; --r-sm:10px; --r-xs:8px;
  --shadow:0 2px 8px rgba(30,32,40,.04);
  --shadow-md:0 4px 16px rgba(30,32,40,.07);
  --shadow-lg:0 20px 60px rgba(24,26,32,.18);

  --sidebar:240px;
  --header:64px;
  --maxw:1440px;
  --t:.16s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Pretendard Variable",Pretendard,Inter,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  font-size:14px; line-height:1.57; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:var(--brand); text-decoration:none}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
[hidden]{display:none !important}

/* ---------- 글자 ---------- */
.h-page{font-size:24px; font-weight:700; line-height:34px; letter-spacing:-.02em; margin:0}
.h-card{font-size:17px; font-weight:700; line-height:26px; letter-spacing:-.015em; margin:0}
.h-sec {font-size:15px; font-weight:600; line-height:22px; margin:0}
.small{font-size:13px}
.tiny{font-size:12px; line-height:1.6}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.strong{font-weight:600}
.ok{color:var(--ok-text)} .warn{color:var(--warn-text)} .err{color:var(--err-text)}
.mono{font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace; font-size:12.5px}
.right{text-align:right} .center-t{text-align:center}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.clamp2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.row{display:flex; align-items:center; gap:10px; min-width:0}
.col{display:flex; flex-direction:column; gap:10px; min-width:0}
.spacer{flex:1}
.nowrap{white-space:nowrap}

/* ============================================================
   뼈대
   ============================================================ */
#app{min-height:100vh}

.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar); z-index:60;
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.brand{height:72px; padding:0 20px; display:flex; align-items:center; gap:11px; flex:0 0 auto}
/* 유튜브 데이터를 다루는 도구라 표시도 그쪽에 맞춥니다.
   바탕을 없애고 표시 자체를 빨간색으로 둡니다. */
.brand-logo{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:transparent;
  display:grid; place-items:center; color:#FF0033;
}
.brand-logo svg{width:28px; height:28px}
.brand-name{font-size:14.5px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.brand-sub{font-size:11.5px; color:var(--text-faint); margin-top:1px}

.nav{padding:4px 12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; flex:1}
.nav-item{
  height:44px; padding:0 12px; border-radius:var(--r-sm);
  display:flex; align-items:center; gap:12px; cursor:pointer;
  color:var(--text-dim); font-size:13.5px; transition:background var(--t),color var(--t);
}
.nav-item svg{width:20px; height:20px; color:#8A8F9C; flex:0 0 auto; transition:color var(--t)}
.nav-item:hover{background:var(--brand-softer); color:var(--brand-text)}
.nav-item:hover svg{color:var(--brand)}
.nav-item.active{background:var(--brand-soft); color:var(--brand-text); font-weight:600}
.nav-item.active svg{color:var(--brand)}
.nav-count{margin-left:auto; font-size:11px; color:var(--text-faint); font-weight:500}

.side-foot{padding:12px; border-top:1px solid var(--line); flex:0 0 auto}
.side-user{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:var(--r-sm); background:var(--surface-3); margin-bottom:8px;
}
.avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:var(--brand-soft); color:var(--brand-text);
  display:grid; place-items:center; font-size:12px; font-weight:700;
}
.side-env{font-size:11.5px; color:var(--text-faint); line-height:1.7; padding:2px 10px 8px}
.side-env b{color:var(--text-dim); font-weight:600}

.main{margin-left:var(--sidebar); min-height:100vh; display:flex; flex-direction:column}
.topbar{
  height:var(--header); position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 28px;
}
.topbar .page-title{font-size:15px; font-weight:650; letter-spacing:-.015em}
.top-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.content{max-width:var(--maxw); width:100%; margin:0 auto; padding:28px 32px 56px}

/* 페이지 상단 */
/* 페이지 상단.

   버튼이 여러 개면 좁은 화면에서 오른쪽으로 밀려 잘렸습니다.
   줄바꿈을 허용해 아래로 내려오게 합니다. */
.pagehead{display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.pagehead > div:first-child{min-width:240px; flex:1 1 auto}
.pagehead .desc{font-size:13px; color:var(--text-dim); margin-top:6px}
.pagehead .acts{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;
  flex:0 0 auto; align-items:center}

/* ============================================================
   카드
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.card + .card{margin-top:16px}
.card-h{
  padding:18px 24px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--line);
}
.card-h .sub{font-size:12.5px; color:var(--text-dim); margin-top:2px}
.card-h .acts{margin-left:auto; display:flex; gap:8px; flex:0 0 auto}
.card-b{padding:20px 24px}
.card-b.flush{padding:0}
.grid{display:grid; gap:16px}
.sep{height:1px; background:var(--line); margin:16px 0}

/* ============================================================
   버튼
   ============================================================ */
.btn{
  height:40px; padding:0 16px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text-2);
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.btn svg{width:17px; height:17px; flex:0 0 auto}
.btn:hover:not(:disabled){background:var(--surface-2)}
.btn:active:not(:disabled){background:var(--line-soft)}
.btn:disabled{opacity:.5; cursor:not-allowed}

.btn-primary{
  height:44px; padding:0 18px;
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.btn-primary:hover:not(:disabled){background:var(--brand-hover); border-color:var(--brand-hover)}
.btn-primary:active:not(:disabled){background:var(--brand-active); border-color:var(--brand-active)}
.btn-primary:disabled{background:#D8D4F2; border-color:#D8D4F2; color:#fff; opacity:1}

.btn-ghost{background:transparent; border-color:transparent; color:var(--brand-text)}
.btn-ghost:hover:not(:disabled){background:var(--brand-softer)}
.btn-quiet{background:transparent; border-color:transparent; color:var(--text-dim)}
.btn-quiet:hover:not(:disabled){background:var(--surface-2); color:var(--text)}
.btn-danger{color:var(--err-text); border-color:var(--line-strong)}
.btn-danger:hover:not(:disabled){background:var(--err-bg); border-color:var(--err)}
.btn-sm{height:32px; padding:0 11px; font-size:13px; border-radius:var(--r-xs)}
.btn-sm svg{width:15px; height:15px}
.btn-block{width:100%}

.btn-icon{
  width:40px; height:40px; padding:0; border-radius:var(--r-sm);
  display:inline-grid; place-items:center; cursor:pointer;
  background:transparent; border:0; color:var(--text-dim); transition:background var(--t),color var(--t);
}
.btn-icon svg{width:18px; height:18px}
.btn-icon:hover{background:var(--surface-2); color:var(--text)}
.btn-icon.sm{width:30px; height:30px; border-radius:var(--r-xs)}
.btn-icon.sm svg{width:16px; height:16px}

/* ============================================================
   입력
   ============================================================ */
.field{display:block}
.field + .field{margin-top:20px}
.label{display:block; font-size:13px; font-weight:600; margin-bottom:8px}
.label .req{color:var(--err-text); margin-left:3px}
.hint{font-size:12px; color:var(--text-dim); line-height:1.7; margin-top:8px}
.errline{font-size:12.5px; color:var(--err-text); margin-top:6px}

.input{
  width:100%; height:44px; padding:0 14px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-size:14px; transition:border-color var(--t),box-shadow var(--t);
}
.input::placeholder{color:var(--text-faint)}
.input:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(108,92,231,.12)}
.input:disabled{background:var(--surface-2); color:var(--text-dim); cursor:not-allowed}
.input.invalid{border-color:var(--err)}
textarea.input{height:auto; min-height:140px; padding:12px 14px; border-radius:var(--r); resize:vertical; line-height:1.7}
select.input{cursor:pointer; padding-right:34px;
  appearance:none; background-repeat:no-repeat; background-position:right 12px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F7482' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.input-sm{height:36px; font-size:13px; border-radius:var(--r-xs)}
select.input-sm{padding-right:30px; background-position:right 9px center}
.input-w{width:auto; min-width:150px}

.searchwrap{position:relative; flex:1; min-width:180px; max-width:320px}
.searchwrap svg{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text-faint); pointer-events:none}
.searchwrap .input{padding-left:34px; padding-right:62px}

.check{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; font-size:13.5px}
.check input{width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer; flex:0 0 auto}

/* ============================================================
   탭
   ============================================================ */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.tab{
  height:40px; padding:0 14px; border-radius:9px; border:0; background:transparent;
  color:var(--text-dim); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  transition:background var(--t),color var(--t);
}
.tab:hover{background:var(--surface-2); color:var(--text)}
.tab.active{background:var(--brand-soft); color:var(--brand-text); font-weight:600}
.tab svg{width:16px; height:16px; flex:0 0 auto}
.tab .n{font-size:11.5px; padding:1px 6px; border-radius:999px;
  background:rgba(0,0,0,.05); font-weight:600}
.tab.active .n{background:var(--brand-strong)}
.tabs-sm .tab{height:34px; padding:0 12px; font-size:13px}

/* 필터 줄 */
.filterbar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.filterlab{font-size:12.5px; color:var(--text-dim); font-weight:600}
.chipbtn{
  height:32px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font-size:12.5px; font-weight:500; cursor:pointer; transition:all var(--t);
}
.chipbtn:hover{border-color:var(--brand-line); color:var(--brand-text)}
.chipbtn.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.vline{width:1px; height:20px; background:var(--line); margin:0 4px}

/* ============================================================
   배지
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px;
  border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
  background:var(--surface-2); color:var(--text-dim);
}
.badge svg{width:13px; height:13px}
.badge-ok{background:var(--ok-bg); color:var(--ok-text)}
.badge-warn{background:var(--warn-bg); color:var(--warn-text)}
.badge-err{background:var(--err-bg); color:var(--err-text)}
.badge-info{background:var(--info-bg); color:var(--info-text)}
.badge-brand{background:var(--brand-soft); color:var(--brand-text)}
.badge-sm{height:22px; padding:0 8px; font-size:11.5px}

/* ============================================================
   통계 카드
   ============================================================ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:16px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--shadow); transition:border-color var(--t);
}
.stat:hover{border-color:var(--line-strong)}
.stat-l{font-size:12.5px; color:var(--text-dim); font-weight:500;
  display:flex; align-items:center; gap:6px}
.stat-l svg{width:14px; height:14px; color:var(--text-faint)}
.stat-v{font-size:27px; font-weight:700; letter-spacing:-.035em; line-height:1.2; margin-top:6px}
.stat-d{font-size:12px; color:var(--text-dim); margin-top:3px; min-height:19px}

/* ============================================================
   표
   ============================================================ */
.tblwrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
table.tbl thead th{
  height:46px; padding:0 16px; text-align:left; white-space:nowrap;
  background:var(--surface-3); color:var(--text-dim);
  font-size:12px; font-weight:600; border-bottom:1px solid var(--line);
}
table.tbl tbody td{padding:12px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr.clickable{cursor:pointer; transition:background var(--t)}
table.tbl tbody tr.clickable:hover{background:#FAFAFC}
table.tbl th.right, table.tbl td.right{text-align:right}
.card-b.flush table.tbl thead th:first-child{padding-left:24px}
.card-b.flush table.tbl tbody td:first-child{padding-left:24px}
.card-b.flush table.tbl thead th:last-child{padding-right:24px}
.card-b.flush table.tbl tbody td:last-child{padding-right:24px}

.rankno{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:var(--r-xs);
  background:var(--surface-2); color:var(--text-dim); font-size:12.5px; font-weight:700;
}
.rankno.top{background:var(--brand); color:#fff}

/* ============================================================
   목록 행
   ============================================================ */
.list{display:flex; flex-direction:column}
.list > * + *{border-top:1px solid var(--line-soft)}
/* .lrow 와 .lrow:hover 는 아래 "배울 것" 칸에서 grid 로 다시 잡습니다.
   여기 있던 flex 규칙은 통째로 덮여서 죽은 코드였습니다.
   남겨두면 다음 사람이 여기를 고치고 왜 안 바뀌나 헤맵니다. */
.thumb{width:88px; height:50px; border-radius:var(--r-xs); object-fit:cover;
  background:var(--surface-2); flex:0 0 auto; display:block}
.thumb.lg{width:168px; height:95px; border-radius:var(--r)}
.thumb.rd{width:36px; height:36px; border-radius:50%}
.thumb.rd.lg{width:44px; height:44px}
/* .ltitle 은 아래 목록 칸에서 한꺼번에 정합니다 */
.lmeta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px;
  font-size:11.5px; color:var(--text-dim)}
.lmeta .dot{width:2px; height:2px; border-radius:50%; background:var(--text-faint)}
/* .lscore 도 아래에서 정합니다.

   여기 있던 min-width:92px 가 그리드 칸(76px)보다 넓어서
   배수 숫자가 옆 단추를 밀고 들어갔습니다.
   그리드는 칸을 좁혀도 내용이 min-width 아래로 안 줄어듭니다. */

/* 만들기 단추 칸.

   처음엔 점수 칸에 같이 넣었습니다. 그런데 점수 칸은 92px 인데
   "자막 오디오 커스텀" 은 그것보다 넓습니다.
   flex:0 0 auto 라 칸이 글자만큼 늘어나 줄이 화면 밖으로 밀렸습니다.

   그래서 따로 뺐습니다. 너비를 고정하고 단추를 그 안에 채웁니다.
   글자가 길어져도 칸이 안 늘어납니다. */
.lacts{display:flex; flex-direction:column; gap:6px; justify-content:center; min-width:0}
.lacts .btn{
  width:100%; justify-content:center; font-size:11.5px; padding:0 8px;
  /* 글자가 칸보다 길어도 줄을 밀지 않게 가둡니다.
     .btn 에 white-space:nowrap 이 걸려 있어서 이게 없으면 삐져나옵니다. */
  min-width:0; overflow:hidden; text-overflow:ellipsis; display:flex;
}
.lacts .btn svg{flex:0 0 auto}

/* 좁은 화면에서는 칸이 118px 입니다.
   "자막 오디오 커스텀" 아홉 글자에 아이콘까지 넣으면 안 들어갑니다.
   글자를 줄이는 것보다 아이콘을 빼는 편이 읽기에 낫습니다. */
@media(max-width:900px){
  .lacts .btn{font-size:10.5px; padding:0 5px; gap:0}
  .lacts .btn svg{display:none}
}
.fit{font-size:21px; font-weight:700; letter-spacing:-.03em; line-height:1.1}
.fit small{font-size:11px; font-weight:600; margin-left:1px; letter-spacing:0}
.fit.g{color:var(--ok-text)} .fit.y{color:var(--warn-text)} .fit.n{color:var(--text-faint)}

/* 채널 카드 */
.chgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(264px,1fr)); gap:16px}
.chcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; cursor:pointer; box-shadow:var(--shadow); transition:border-color var(--t),box-shadow var(--t);
}
.chcard:hover{border-color:var(--brand-line); box-shadow:var(--shadow-md)}
.kv{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12.5px}
.kv > span:first-child{color:var(--text-dim)}
.kv > b{font-weight:600}

/* ============================================================
   빈 화면 / 로딩
   ============================================================ */
.empty{padding:56px 24px; text-align:center}
.empty-ico{
  width:44px; height:44px; margin:0 auto 14px; border-radius:var(--r);
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center;
}
.empty-ico svg{width:22px; height:22px}
.empty h4{font-size:15px; font-weight:600; margin:0 0 5px}
.empty p{font-size:13px; color:var(--text-dim); margin:0; line-height:1.7}

.skel{background:linear-gradient(90deg,var(--surface-2) 25%,#EDEEF2 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:sk 1.2s ease infinite; border-radius:var(--r-xs)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-row{height:56px; margin:0 24px; border-bottom:1px solid var(--line-soft)}
.skel-line{height:12px; margin:9px 0}

/* ============================================================
   안내 배너
   ============================================================ */
.note{
  display:flex; gap:11px; padding:14px 16px; border-radius:var(--r);
  font-size:13px; line-height:1.7; margin-bottom:16px;
  background:var(--info-bg); color:#20447E;
}
.note svg{width:17px; height:17px; flex:0 0 auto; margin-top:2px; color:var(--info)}
.note b{font-weight:650}
.note-warn{background:var(--warn-bg); color:var(--warn-text)} .note-warn svg{color:var(--warn)}
.note-ok{background:var(--ok-bg); color:var(--ok-text)}   .note-ok svg{color:var(--ok)}
.note-err{background:var(--err-bg); color:var(--err-text)} .note-err svg{color:var(--err)}
.note-brand{background:var(--brand-soft); color:#3B3183} .note-brand svg{color:var(--brand)}

/* ============================================================
   모달
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:70; background:rgba(18,20,26,.45);
  display:grid; place-items:center; padding:24px;
  animation:fade .15s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:520px; max-width:100%; max-height:88vh;
  background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; animation:pop .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.modal.wide{width:720px}
.modal-h{padding:20px 24px 0; display:flex; align-items:flex-start; gap:12px}
.modal-h .t{font-size:17px; font-weight:700; letter-spacing:-.015em}
.modal-h .s{font-size:12.5px; color:var(--text-dim); margin-top:3px}
.modal-h .btn-icon{margin-left:auto; margin-top:-4px; margin-right:-8px}
.modal-b{padding:20px 24px; overflow-y:auto; flex:1}
.modal-f{padding:16px 24px 20px; display:flex; justify-content:flex-end; gap:10px}

/* ============================================================
   문서형 결과
   ============================================================ */
.doc{font-size:15px; line-height:26px; color:#2A2D35}
.doc h2,.doc h3,.doc h4{letter-spacing:-.015em}
.doc h2{font-size:18px; font-weight:700; margin:26px 0 10px}
.doc h3{font-size:16px; font-weight:700; margin:24px 0 8px; padding-top:16px; border-top:1px solid var(--line)}
.doc h3:first-child{margin-top:0; padding-top:0; border-top:0}
.doc h4{font-size:14px; font-weight:650; color:var(--text-dim); margin:16px 0 6px}
.doc p{margin:14px 0}
.doc li{margin:5px 0 5px 2px}
.doc hr{border:0; border-top:1px solid var(--line); margin:22px 0}
.doc code{background:var(--surface-2); padding:1px 6px; border-radius:5px; font-size:13px}
.doc table.tbl{margin:14px 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:13px}
.doc .tblwrap{margin:14px 0; border:1px solid var(--line); border-radius:var(--r)}
.doc b{font-weight:650}

.scroller{max-height:56vh; overflow-y:auto; padding-right:4px}
.raw{
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; font-size:12.5px; line-height:1.85; white-space:pre-wrap;
  color:var(--text-2); max-height:340px; overflow-y:auto;
}
details.fold{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
details.fold summary{cursor:pointer; font-size:12.5px; color:var(--text-dim);
  user-select:none; display:flex; align-items:center; gap:6px}
details.fold summary:hover{color:var(--brand-text)}
details.fold summary svg{width:14px; height:14px; transition:transform var(--t)}
details.fold[open] summary svg{transform:rotate(90deg)}
details.fold .raw{margin-top:12px}

/* ============================================================
   작업 진행
   ============================================================ */
.jobdock{position:fixed; right:20px; bottom:20px; z-index:65; width:300px;
  display:flex; flex-direction:column; gap:10px}
.jobcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-md); padding:13px 15px;
}
.jobcard .t{font-size:13px; font-weight:650}
.jobcard .s{font-size:11.5px; color:var(--text-dim); margin-top:4px}
.pbar{height:5px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-top:9px}
.pbar > span{display:block; height:100%; background:var(--brand); border-radius:999px;
  transition:width .3s ease}

/* ============================================================
   토스트
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90;
  background:var(--text); color:#fff; padding:11px 18px; border-radius:999px;
  font-size:13px; font-weight:500; box-shadow:var(--shadow-lg); max-width:80vw;
  display:flex; align-items:center; gap:8px; animation:pop .18s cubic-bezier(.2,.8,.3,1);
}
.toast svg{width:16px; height:16px}
.toast.ok{background:var(--ok)} .toast.err{background:var(--err)}

/* ============================================================
   로그인
   ============================================================ */
.loginwrap{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg)}
.logincard{width:400px; max-width:100%; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); padding:32px}

/* ============================================================
   기타 조각
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.split-io{display:grid; grid-template-columns:42fr 58fr; gap:20px; align-items:start}
.split-side{display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:16px; align-items:start}
.sticky{position:sticky; top:calc(var(--header) + 20px)}

.bar{display:grid; grid-template-columns:92px 1fr 48px; gap:10px; align-items:center;
  font-size:12.5px; padding:5px 0}
.bar-track{height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.bar-fill{height:100%; background:var(--brand); border-radius:999px}
.bar-val{text-align:right; color:var(--text-dim); font-size:11.5px}

.pstep{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft)}
.pstep:last-child{border-bottom:0} .pstep:first-child{padding-top:0}
.pstep-n{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--brand-soft);
  color:var(--brand-text); display:grid; place-items:center; font-size:11.5px; font-weight:700}

.pager{display:flex; gap:12px; align-items:center; justify-content:center; margin-top:20px}
.dropzone{
  border:1.5px dashed var(--line-strong); border-radius:var(--r); padding:26px;
  text-align:center; cursor:pointer; color:var(--text-dim); font-size:13px; transition:all var(--t);
}
.dropzone:hover,.dropzone.over{border-color:var(--brand); background:var(--brand-softer); color:var(--brand-text)}

/* 선택 카드 */
.pickgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
.pick{
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; min-height:76px;
  background:var(--surface); cursor:pointer; position:relative; transition:all var(--t);
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.pick:hover{border-color:var(--brand-line); background:#FCFBFF}
.pick.on{border:2px solid var(--brand); background:#F7F5FF; padding:13px 15px}
.pick .n{font-size:14px; font-weight:600}
.pick .d{font-size:11.5px; color:var(--text-dim)}
.pick .tick{position:absolute; top:9px; right:9px; width:17px; height:17px; color:var(--brand); opacity:0}
.pick.on .tick{opacity:1}

/* ============================================================
   반응형
   ============================================================ */
.hamburger{display:none}
@media(max-width:1180px){
  .split,.split-side,.split-io{grid-template-columns:1fr}
  .sticky{position:static}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%); transition:transform .2s ease}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:''; position:fixed; inset:0; background:rgba(18,20,26,.45); z-index:55}
  .main{margin-left:0}
  .content{padding:20px 16px 48px}
  .topbar{padding:0 16px}
  .hamburger{display:inline-grid}
  .pagehead{flex-direction:column; gap:12px}
  .pagehead .acts{margin-left:0; width:100%}
  .pagehead .acts .btn{flex:1}
  .jobdock{right:12px; left:12px; width:auto}
  .modal-f{flex-direction:column-reverse}
  .modal-f .btn{width:100%}
}

/* 추천 사업 */
.autostrip{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow);
}
.autostrip.on{border-color:var(--brand-line); background:var(--brand-softer)}
.autodot{width:9px; height:9px; border-radius:50%; background:var(--text-faint); flex:0 0 auto}
.autodot.live{background:var(--ok); box-shadow:0 0 0 3px rgba(24,167,111,.16); animation:pulse 1.8s ease infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(24,167,111,.06)}}

.ideagrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(316px,1fr)); gap:16px}
.ideacard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; cursor:pointer; box-shadow:var(--shadow);
  transition:border-color var(--t),box-shadow var(--t);
}
.ideacard:hover{border-color:var(--brand-line); box-shadow:var(--shadow-md)}
.ideahead{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:12.5px; line-height:1.75; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.autolog{max-height:190px; overflow-y:auto; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:8px 12px; background:var(--surface-3)}

/* 발굴 후보 */
.candgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px}
.candcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--shadow); transition:border-color var(--t);
}
.candcard:hover{border-color:var(--brand-line)}
.candwhy{margin-top:12px; padding:10px 12px; background:var(--surface-3);
  border-radius:var(--r-sm); font-size:12.5px}
.candwhy .kv{padding:3px 0}
.candsamples{margin-top:6px; padding-top:6px; border-top:1px solid var(--line-soft)}

/* 전체보기는 늘 맨 앞이라 색으로 구분해 둡니다 */
.bizchip.all{border-color:var(--line-strong); color:var(--text-2)}
.bizchip.all.on{background:var(--brand); border-color:var(--brand); color:#fff}
.bizchip.all.on b{color:rgba(255,255,255,.82)}

.bizhot{margin-left:2px; padding:1px 6px; border-radius:999px;
  background:var(--ok-bg); color:var(--ok-text); font-size:10.5px; font-weight:700}
.bizchip.on .bizhot{background:#fff; color:var(--ok)}

/* 영상 행의 채널 이름과 유튜브 바로가기 */
.vchan{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  border:0; background:none; padding:0 0 4px; margin:0; cursor:pointer;
  color:var(--text-dim); font-size:11.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color var(--t);
}
.vchan svg{width:13px; height:13px; flex:0 0 auto}
.vchan:hover{color:var(--brand-text); text-decoration:underline}

/* 썸네일 위에 재생 버튼. 눌러도 상세로 안 넘어가고 유튜브로 바로 갑니다. */
.vthumb{position:relative; flex:0 0 auto; line-height:0}
.vplay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(18,20,26,.5); color:#fff; border-radius:var(--r-xs);
  opacity:0; transition:opacity var(--t);
}
.vplay svg{width:22px; height:22px}
.vthumb:hover .vplay{opacity:1}
/* 채널명과 영상 링크를 한 줄에 나란히 */
.vtop{display:flex; align-items:center; gap:10px; min-width:0; padding-bottom:4px}
.vtop .vchan{padding:0}
.vlink{
  display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  font-size:11px; font-weight:600; color:var(--text-faint);
  padding:1px 7px; border:1px solid var(--line); border-radius:999px;
  transition:all var(--t);
}
.vlink svg{width:11px; height:11px}
.vlink:hover{color:var(--brand-text); border-color:var(--brand-line); background:var(--brand-softer)}

/* 채널 썸네일을 눌러 유튜브로 */
.candthumb{position:relative; display:inline-block; flex:0 0 auto; line-height:0; border-radius:50%}
.candgo{
  position:absolute; inset:0; display:grid; place-items:center; border-radius:50%;
  background:rgba(18,20,26,.55); color:#fff; opacity:0; transition:opacity var(--t);
}
.candgo svg{width:16px; height:16px}
.candthumb:hover .candgo{opacity:1}

.candname{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  font-size:14px; font-weight:600; color:var(--text); transition:color var(--t);
}
.candname svg{width:13px; height:13px; flex:0 0 auto; opacity:0; transition:opacity var(--t)}
.candname:hover{color:var(--brand-text)}
.candname:hover svg{opacity:.8}

/* 검색 — 엔터나 버튼을 눌렀을 때만 반영합니다.
   글자마다 목록을 다시 그리면 입력칸에서 커서가 튑니다.

   버튼은 입력칸 안에 붙입니다. 밖에 따로 두면 이 버튼이 무엇을 검색하는지가
   한눈에 안 들어옵니다. */
.searchwrap{min-width:250px; max-width:380px}
.searchwrap.wide{max-width:440px}
/* 왼쪽 오른쪽 여백은 위 .searchwrap 칸에서 같이 정합니다 */
.searchwrap:focus-within{border-radius:var(--r-xs)}

.searchgo{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  height:26px; padding:0 11px; border:0; border-radius:6px; cursor:pointer;
  background:var(--brand-soft); color:var(--brand-text);
  font-size:12px; font-weight:600; transition:background var(--t),color var(--t);
}
.searchgo:hover{background:var(--brand); color:#fff}

.searchx{
  position:absolute; right:56px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:var(--text-faint); border-radius:50%;
  transition:background var(--t),color var(--t);
}
.searchx svg{width:12px; height:12px}
.searchx:hover{background:var(--surface-2); color:var(--text)}
.searchwrap:has(.searchx) .input{padding-right:82px}

/* 자동 생성 상태 점 — 도는 중과 대기 중을 구분합니다 */
.autodot.idle{background:var(--brand); box-shadow:0 0 0 3px rgba(108,92,231,.14)}

/* 번역된 제목 아래에 원문을 작게. 유튜브에서 다시 찾을 때 필요합니다. */
.lorig{font-size:11.5px; color:var(--text-faint); margin-top:2px; line-height:1.4}

/* 재분석 안내 상자 — 헤더에 묻히면 안 보입니다 */
.reanabox{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 20px; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--brand-line); border-radius:var(--r);
  box-shadow:var(--shadow);
}
.reanabox .btn{flex:0 0 auto}

/* ============================================================
   영상 화면 — 왼쪽 조건, 오른쪽 목록

   고르는 순서가 눈에 보이게 배치합니다.
   콘텐츠 형식은 "무엇을 보고 있나"라 위에 크게,
   카테고리와 상세 조건은 "무엇을 걸러낼까"라 왼쪽에 모읍니다.
   ============================================================ */
.vlayout{display:grid; grid-template-columns:236px minmax(0,1fr); gap:20px; align-items:start}

/* 왼쪽 조건 영역.

   붙박이(sticky)로 두면 목록을 내려도 조건이 따라옵니다.
   그런데 조건이 화면보다 길어지면 아래쪽이 잘려서
   상세 조건을 펼쳤을 때 분석 상태가 안 보였습니다.
   화면 밖으로 밀린 것이라 페이지를 내려도 안 나옵니다.

   그래서 이 영역에 자기 스크롤을 줍니다.
   아래 여백을 둬서 마지막 항목이 화면 끝에 딱 붙지 않게 합니다. */
.vrail{
  position:sticky; top:calc(var(--header) + 20px);
  display:flex; flex-direction:column; gap:14px;
  max-height:calc(100vh - var(--header) - 40px);
  overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:20px;
  /* 스크롤바가 카드 테두리를 덮지 않게 자리를 비웁니다 */
  padding-right:6px; margin-right:-6px;
  scrollbar-gutter:stable;
}
/* 얇고 조용한 스크롤바. 있는 줄은 알되 눈에 걸리지 않게. */
.vrail::-webkit-scrollbar{width:6px}
.vrail::-webkit-scrollbar-track{background:transparent}
.vrail::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:3px}
.vrail::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}
.vrail{scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
.railhead{display:none}
.railsec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow)}
.railtitle{font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:10px}
.raillist{display:flex; flex-direction:column; gap:2px}

.railitem{
  display:flex; align-items:center; gap:8px; width:100%;
  height:34px; padding:0 10px; border:0; border-radius:var(--r-xs);
  background:transparent; color:var(--text-2); cursor:pointer;
  font-size:13px; text-align:left; transition:background var(--t),color var(--t);
}
.railitem > span:first-child{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.railitem .cnt{font-size:11.5px; color:var(--text-faint); flex:0 0 auto}
.railitem:hover{background:var(--surface-2)}
.railitem.on{background:var(--brand); color:#fff; font-weight:600}
.railitem.on .cnt{color:rgba(255,255,255,.8)}

.railmore{
  width:100%; margin-top:8px; height:30px; border:1px dashed var(--line-strong);
  border-radius:var(--r-xs); background:transparent; color:var(--text-dim);
  font-size:12px; cursor:pointer; transition:all var(--t);
}
.railmore:hover{border-color:var(--brand); color:var(--brand-text); background:var(--brand-softer)}

.railtoggle{
  display:flex; align-items:center; gap:8px; width:100%; padding:0; border:0;
  background:none; cursor:pointer; font-size:12px; font-weight:700; color:var(--text-dim);
}
.railtoggle svg{width:14px; height:14px; transition:transform var(--t)}
.railtoggle.on svg{transform:rotate(90deg)}
.railtoggle .n{margin-left:auto; background:var(--brand); color:#fff;
  font-size:10.5px; padding:1px 6px; border-radius:999px}
.detailbody{margin-top:12px; display:flex; flex-direction:column; gap:14px}

.dgroup{display:flex; flex-direction:column; gap:3px}
.dlabel{font-size:11.5px; font-weight:700; margin-bottom:4px; padding-left:2px}
.dlabel.c-mp{color:#4457B8}      /* 인력은 파랑 */
.dlabel.c-cap{color:#8A5411}     /* 투자금은 주황 */
.dlabel.c-st{color:var(--brand-text)}  /* 분석 상태는 보라 */
.dlabel.c-vd{color:var(--ok-text)}    /* 실행 가능 여부는 초록 */

.dopt{display:flex; align-items:center; gap:8px; height:30px; padding:0 8px;
  border-radius:var(--r-xs); cursor:pointer; font-size:12.5px; color:var(--text-2)}
.dopt:hover{background:var(--surface-2)}
.dopt.on{background:var(--brand-soft); color:var(--brand-text); font-weight:600}
.dopt input{width:14px; height:14px; margin:0; accent-color:var(--brand); flex:0 0 auto}
.dopt .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dopt .cnt{font-size:11px; color:var(--text-faint)}
.dopt.on .cnt{color:var(--brand-text)}

/* 콘텐츠 형식 탭 — 가장 굵게 */
.ftabs{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px;
  border-bottom:1px solid var(--line); padding-bottom:12px}
.ftab{
  height:40px; padding:0 16px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; transition:all var(--t);
}
.ftab:hover{border-color:var(--brand-line); color:var(--brand-text)}
.ftab .n{font-size:11.5px; font-weight:500; color:var(--text-faint)}
.ftab.on{background:var(--brand); border-color:var(--brand); color:#fff}
.ftab.on .n{color:rgba(255,255,255,.82)}
.railbtn{display:none}

/* 적용된 조건 */
.tagbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.ftag{
  display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px;
  border-radius:999px; border:1px solid var(--brand-line); background:var(--brand-soft);
  color:var(--brand-text); font-size:12px; font-weight:600; cursor:pointer;
  transition:all var(--t);
}
.ftag svg{width:12px; height:12px; opacity:.7}
.ftag:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.ftag.reset{background:transparent; border-color:var(--line-strong); color:var(--text-dim)}
.ftag.reset:hover{background:var(--surface-2); color:var(--text); border-color:var(--line-strong)}

.listbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}

/* 찾기 칸.

   왼쪽 편수와 오른쪽 정렬 사이를 채웁니다.
   margin-left:auto 로 밀어두면 정렬 상자와 붙어 한 덩어리로 보입니다. */
.psearch{display:flex; gap:6px; align-items:center; margin-left:auto}
.psearch .input{width:210px}
.psearch .btn{flex:0 0 auto; padding:0 8px}
@media(max-width:720px){ .psearch{margin-left:0; width:100%} .psearch .input{flex:1; width:auto} }

/* 목록 행의 분류 칩 — 색으로 축을 구분합니다 */
.lchips{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px}
.chipx{display:inline-flex; align-items:center; height:22px; padding:0 8px;
  border-radius:6px; font-size:11.5px; font-weight:600}
.chipx.c-cat{background:var(--surface-2); color:var(--text-2)}
.chipx.c-mp{background:#EEF2FF; color:#4457B8}
/* 재보니 주황이 4.10 이었습니다. 기준 4.5 에 모자랍니다.
   같은 결로 진하게만 내려 5.77 로 맞췄습니다. */
.chipx.c-cap{background:#FFF4E8; color:#8A5411}
.chipx.c-st{background:var(--brand-soft); color:var(--brand-text)}
/* 관심 아이템은 초록을 쓰지 않습니다. 초록은 적합도와 실행 가능 판정 자리입니다. */
.chipx.c-fav{background:#FCE9F1; color:#A63A6B}

/* ------------------------------------------------------------
   자막 스티커

   붙여놓은 종이처럼 보여야 눈에 걸립니다.
   그래서 테두리를 한 겹 두르고 살짝 기울입니다.

   색으로 바로 갈립니다.
     초록  쓸 수 있음
     노랑  아쉬움
     빨강  못 씀
     회색  아직 없음
   ------------------------------------------------------------ */
.stick{display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:5px; font-size:11.5px; font-weight:700; letter-spacing:-.2px;
  border:1px solid transparent; transform:rotate(-1.2deg); cursor:default}
.stick.q-good{background:#E3F6E9; color:#1D7A45; border-color:#B6E3C6}
.stick.q-ok  {background:#EAF4E6; color:#3F7A2E; border-color:#C6E0BC}
.stick.q-warn{background:#FFF4E0; color:#9A6512; border-color:#F0DCB4}
.stick.q-bad {background:#FDECEC; color:#A63535; border-color:#F2C9C9}
.stick.q-none{background:var(--surface-2); color:var(--text-3); border-color:var(--line)}
.stick.s-cap {background:#FFF4E8; color:#A9691E; border-color:#F0DAC2}

@media(max-width:1080px){
  .vlayout{grid-template-columns:1fr}
  .railbtn{display:inline-flex}
  .vrail{
    position:fixed; top:0; right:0; bottom:0; width:300px; max-width:88vw; z-index:75;
    background:var(--surface); border-left:1px solid var(--line); padding:16px;
    transform:translateX(100%); transition:transform .2s ease; overflow-y:auto;
  }
  .vrail.open{transform:none; box-shadow:var(--shadow-lg)}
  .railhead{display:flex; align-items:center; margin-bottom:14px}
  .railclose{margin-left:auto}
  body.rail-open::before{content:''; position:fixed; inset:0; background:rgba(18,20,26,.45); z-index:74}
}

/* 관심 칩 안의 별 아이콘. 글자와 같은 크기로 맞춥니다. */
.chipx.c-fav svg{width:11px; height:11px; margin-right:3px; vertical-align:-1px}

/* 정렬 상자는 내용 만큼만. 100% 로 늘어나면 줄이 넘어가 검색칸과 떨어집니다. */
.sortsel{width:auto; flex:0 0 auto; min-width:150px}

/* 기술이 뚫는 병목 고르는 칸 */
.solvegrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.solvechk{align-items:flex-start; padding:9px 10px; border:1px solid var(--line);
  border-radius:var(--r-xs); background:var(--surface); cursor:pointer}
.solvechk:hover{border-color:var(--brand)}
.solvechk:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.solvechk span{display:block; line-height:1.45}
.solvechk .tiny{display:block; font-weight:400}
@media(max-width:600px){ .solvegrid{grid-template-columns:1fr} }

/* 병목을 안 고른 기술은 판정에 안 잡히니 눈에 띄게 */
.capwarn{display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:6px; font-size:11.5px; font-weight:600; background:var(--err-bg); color:var(--err-text)}
.capwarn svg{width:12px; height:12px}

/* ---------- 트랙 전환기 ---------- */
.trackbar{display:flex; flex-direction:column; gap:3px; padding:0 12px 12px;
  margin:0 0 8px; border-bottom:1px solid var(--line)}
.trackbtn{display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px;
  border:1px solid transparent; border-radius:var(--r-xs); background:transparent;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--text-2);
  cursor:pointer; text-align:left}
.trackbtn svg{width:15px; height:15px; flex:none}
.trackbtn:hover{background:var(--surface-2); color:var(--text)}
.trackbtn.on{background:var(--brand-soft); color:var(--brand-text); border-color:var(--brand-line)}
.trackone{display:flex; align-items:flex-start; gap:9px; padding:8px 10px;
  border-radius:var(--r-xs); background:var(--surface-2)}
.trackone svg{width:15px; height:15px; flex:none; margin-top:2px; color:var(--brand)}
.trackone .strong{font-size:12.5px}

/* ---------- 배울 것 ---------- */
.lrow{display:grid; grid-template-columns:132px minmax(0,1fr) 92px; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--surface-2)}
.lrow.isdone{opacity:.55}

/* 만들기 단추가 붙는 줄.

   위쪽에 .lrow 를 flex 로 잡아둔 규칙이 있는데 여기서 grid 로 덮습니다.
   그래서 칸이 셋으로 고정되어 있습니다.

   단추 칸을 넷째로 넣었더니 갈 자리가 없어 다음 줄로 밀렸습니다.
   썸네일 아래에 단추가 따로 놓여 보였습니다.
   칸을 넷으로 늘려줘야 제자리에 놓입니다.

   그다음엔 점수 칸을 76px 로 잡았다가 배수가 단추를 밀고 들어갔습니다.
   .lscore 에 min-width:92px 가 걸려 있어서 칸보다 넓어진 것입니다.
   그리드는 칸을 좁혀도 내용이 min-width 보다 작아지지 않습니다.
   그래서 칸을 실제 폭에 맞춰둡니다. */
.lrow.lrow-act{grid-template-columns:132px minmax(0,1fr) 92px 150px}
@media(max-width:900px){
  .lrow.lrow-act{grid-template-columns:96px minmax(0,1fr) 92px 118px; gap:10px}
}
.lthumb{width:132px; height:74px; border-radius:var(--r-xs); object-fit:cover; background:var(--surface-2)}
.ltitle{font-size:13.5px; font-weight:600; line-height:1.45;
  letter-spacing:-.012em; margin:3px 0 5px}
.lbars{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap}
.lbar{width:104px}
.lbar-l{font-size:10.5px; color:var(--text-3); margin-bottom:3px; display:flex; justify-content:space-between}
.lbar-t{height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden}
.lbar-t span{display:block; height:100%; border-radius:2px}
.lbar-t .b1{background:#3B82F6} .lbar-t .b2{background:#8B5CF6} .lbar-t .b3{background:#10B981}
.lscore{text-align:right}
.lscore b{font-size:22px; font-weight:700; letter-spacing:-.02em; display:block}
.ltool{display:inline-flex; align-items:center; height:21px; padding:0 7px; border-radius:5px;
  font-size:11px; font-weight:600; background:#EEF2FF; color:#4457B8}
.ltool.known{background:var(--surface-2); color:var(--text-3)}
.lwhy{font-size:11.5px; color:var(--text-3); line-height:1.6; margin-top:7px}

/* 배울 것 행 안의 채널칩과 링크칩은 영상 페이지와 같은 규칙을 씁니다 */
.lrow .vtop{padding-bottom:5px}
.lrow .lbar-l span:last-child{font-weight:700; color:var(--text-2)}

/* ---------- 자본 투자 ---------- */
.lbar-t .b4{background:#E0575F}
/* .badge-err 는 위 badge 칸에 이미 있습니다. 같은 것을 두 번 적어뒀습니다. */

/* 확인할 주장 한 줄 */
.claimrow{display:flex; gap:16px; align-items:flex-start; padding:14px 16px;
  border-bottom:1px solid var(--line)}
.claimrow:last-child{border-bottom:0}
.claimrow:hover{background:var(--surface-2)}
.claimtext{margin-top:6px; font-size:13.5px; line-height:1.6; font-weight:500;
  padding:9px 12px; border-left:3px solid var(--brand-line); background:var(--surface-2);
  border-radius:0 var(--r-xs) var(--r-xs) 0}
.claimacts{display:flex; gap:6px; flex:none; padding-top:2px}
@media(max-width:760px){
  .claimrow{flex-direction:column; gap:10px}
  .claimacts{width:100%}
  .claimacts .btn{flex:1}
}

/* 결과물 미리보기 한 줄 */
.outhead{margin-top:7px; font-size:12px; line-height:1.65; color:var(--text-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* 대시보드 가로 막대 한 줄 */
.barrow{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.barrow:last-child{margin-bottom:0}
.barrow-l{width:104px; flex:none; font-size:12px; font-weight:600; color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barrow .lbar-t{height:6px}

/* 후보를 왜 담을 만한지 한 줄로 */
.candreason{margin-top:8px; padding:8px 11px; border-radius:var(--r-xs);
  background:var(--brand-softer); color:var(--brand-text);
  font-size:11.5px; line-height:1.6; font-weight:500}

/* ---------- 걸러내기 갈래 고르기 ---------- */
.sweeps { display: flex; flex-direction: column; gap: 6px; }
.sweep {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; background: var(--surface-2);
}
.sweep:hover { border-color: var(--line-strong); }
.sweep input { margin-top: 4px; flex: none; }
.sweep.off { opacity: .45; cursor: default; }
.sweep:has(input:checked) { border-color: var(--brand-line); background: var(--brand-softer); }

/* ---------- 흐름 ---------- */
.trend { display: flex; flex-direction: column; }
.trend-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.trend-row:first-child { border-top: 0; }
.trend-lift { flex: none; width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.trend-main { flex: 1; min-width: 0; }

/* ---------- 인기 영상 ---------- */
.popbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.popbar .fl { font-size: 11px; color: var(--muted); margin-right: 2px; }
.popbar .sep { width: 1px; height: 15px; background: var(--line); margin: 0 5px; }
.popbar .f {
  font-size: 12px; padding: 3px 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); border-radius: 6px; cursor: pointer;
}
.popbar .f:hover { border-color: var(--line-strong); color: var(--fg); }
.popbar .f.on { border-color: var(--brand-line); background: var(--brand-softer); color: var(--brand-text); }

.poplist { display: flex; flex-direction: column; }
.poprow {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line); align-items: center;
}
@media (min-width: 720px) {
  .poprow { grid-template-columns: 54px 1fr 108px 96px; }
}
.poplift { text-align: right; font-variant-numeric: tabular-nums; }
.poplift b { font-size: 19px; }
.poplift small { font-size: 10px; color: var(--muted); margin-left: 1px; }
.popmain { min-width: 0; }
.popmain .ti { display: block; color: var(--fg); text-decoration: none; font-size: 13.5px; line-height: 1.45; }
.popmain .ti:hover { color: var(--brand); }
@media (max-width: 719px) { .popfmt, .popmk { grid-column: 2; } }
.chip-self, .chip-clip, .chip-shoot {
  display: inline-block; font-size: 10.5px; padding: 1px 6px; border: 1px solid;
}
.chip-self  { color: var(--ok, #1f7355); border-color: var(--ok, #1f7355); }
.chip-clip  { color: var(--warn, #9a6a12); border-color: var(--warn, #9a6a12); }
.chip-shoot { color: var(--muted); border-color: var(--line-strong); }

/* ---------- 만든 영상 ---------- */
/* 만든 영상의 대표 이미지.

   쇼츠라 세로입니다. 정사각으로 두면 위아래가 잘려서
   제목 띠도 자막도 안 보이고 가운데 살점만 남습니다.

   그림과 아이콘을 겹쳐 두고, 그림이 오면 아이콘을 덮습니다.
   못 불러오면 그림만 사라져서 아이콘이 다시 보입니다. */
.rfthumb {
  position: relative; width: 132px; height: 176px; flex: none;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--brand-softer); color: var(--brand);
  display: grid; place-items: center;
}
.rfthumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.rfthumb svg { width: 30px; height: 30px; }
.rfmore { margin-top: 6px; }
.rfmore summary { cursor: pointer; color: var(--brand); }
.rfmore summary:hover { text-decoration: underline; }

/* 만들다 멈춘 것.
   결과물 위에 짧게 남겨서 왜 안 나왔는지 바로 보이게 합니다. */
.failrow{display:flex; gap:10px; align-items:flex-start; padding:7px 0;
  border-top:1px solid var(--line-soft)}
.failrow:first-of-type{border-top:0}
.failrow .badge{flex:0 0 auto; margin-top:2px}

/* 만든 영상 -> 원본으로 가는 줄.
   글자와 링크가 한 줄에 붙되, 제목이 길면 줄여서 칸을 안 넘게 합니다. */
.srcline{display:flex; gap:6px; align-items:center; min-width:0; margin-top:2px}
.srcline > span{flex:0 0 auto}
.srcline .vlink{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ============================================================
   업로드 시 필요 내용

   처음에는 얇은 선으로만 나눴습니다.
   글씨 크기가 다 같아서 덩어리가 안 보이고 한 뭉치로 읽혔습니다.

   그래서 카드로 떼어내고 제목을 본문보다 키웠습니다.
   번호를 붙여 순서대로 하시면 되게 했습니다.
   ============================================================ */
.uplbox{margin-top:10px; display:flex; flex-direction:column; gap:10px}

.uplcard{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden}
.uplcard > header{display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:var(--surface-3); border-bottom:1px solid var(--line-soft)}
.uplcard > header b{font-size:13px; font-weight:700; letter-spacing:-.015em}
/* 단추가 하나일 때도 둘일 때도 오른쪽에 붙어야 합니다.

   예전에는 .btn 마다 margin-left:auto 를 걸었습니다.
   단추가 둘이면 첫째가 밀려나 사이가 벌어졌습니다.
   첫째에만 걸고 나머지는 따라오게 합니다. */
.uplcard > header .btn{flex:0 0 auto}
.uplcard > header .btn:first-of-type{margin-left:auto}

/* 번호. 순서대로 하시면 된다는 표시입니다. */
.uplno{width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:var(--brand-soft); color:var(--brand-text);
  display:grid; place-items:center; font-size:11px; font-weight:700}

.uplwhere{font-size:11.5px; color:var(--text-faint); margin-top:1px}
.uplbody{padding:11px 12px}

/* 제목 후보 줄 */
.kitrow{display:flex; align-items:center; gap:10px; padding:7px 0;
  border-top:1px solid var(--line-soft); font-size:13px}
.kitrow:first-child{border-top:0; padding-top:0}
.kitrow > div:first-child{flex:1; min-width:0}

/* 여러 줄 글. 줄바꿈을 살리고 길면 안에서 스크롤합니다. */
.uplpre{white-space:pre-wrap; line-height:1.75; font-size:12.5px;
  color:var(--text-2); max-height:170px; overflow:auto}

.tagwrap{display:flex; flex-wrap:wrap; gap:5px}
.tagx{display:inline-block; padding:3px 8px; border-radius:6px; font-size:12px;
  background:var(--surface-2); color:var(--text-dim)}
/* 앞 세 개는 목록에서 제목 위에 뜨는 자리라 눈에 띄게 둡니다 */
.tagx.lead{background:var(--brand-soft); color:var(--brand-text); font-weight:700}

/* 썸네일. 한 줄에 셋씩 놓으면 한눈에 견줘집니다. */
.kitthumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px}
.kitthumb{position:relative; margin:0; border:1px solid var(--line); border-radius:var(--r-xs);
  overflow:hidden; background:var(--surface-2)}
.kitthumb img{width:100%; aspect-ratio:9/16; object-fit:cover; display:block}
.kitthumb figcaption{padding:7px; display:flex; flex-direction:column; gap:5px;
  align-items:stretch}
.kitthumb .btn{width:100%}

/* 자주 안 보는 것은 접어둡니다. 펼쳐두면 그만큼 복잡해 보입니다. */
.uplextra{border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-3)}
.uplextra > summary{padding:9px 12px; cursor:pointer; color:var(--text-dim)}
.uplextra[open] > summary{border-bottom:1px solid var(--line-soft)}
.kitpaste{margin:0; white-space:pre-wrap; line-height:1.7; font-size:12px;
  max-height:200px; overflow:auto}

/* 받은 기록 한 줄.
   목록에서 "이건 이미 올렸다" 를 한눈에 알게 합니다. */
.dlline{display:inline-flex; align-items:center; gap:6px; margin-top:5px;
  color:var(--ok-text); cursor:pointer}
.dlline svg{width:13px; height:13px}
.dlline:hover{text-decoration:underline}
.dlrows{display:flex; flex-direction:column}
.dlrow{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; border-top:1px solid var(--line-soft); font-size:13px}
.dlrow:first-child{border-top:0}

/* 영상 생김새 설정 */
.bgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 18px}
.brow{display:flex; align-items:center; gap:9px; font-size:13px}
.brow > span:first-child{flex:0 0 96px; color:var(--text-dim)}
.brow input[type=color]{width:42px; height:28px; padding:0; border:1px solid var(--line);
  border-radius:var(--r-xs); background:none; cursor:pointer}
.brow .input{flex:1; min-width:0}

/* ------------------------------------------------------------
   해외 진출

   나라 단추는 세 가지 상태를 한눈에 보여줘야 합니다.

     아무것도 아님   아직 안 만들었고 고르지도 않음
     고름 (gon)      이번에 만들 나라
     완료 (gdone)    이미 만들어둔 나라

   완료를 고르는 것도 되게 두었습니다. 다시 굽고 싶을 때가 있습니다.
   ------------------------------------------------------------ */
.glocs{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}

.gloc{padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-xs);
  background:var(--surface); color:var(--text-2); font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap; line-height:1.4;
  transition:background .12s, border-color .12s, color .12s}
.gloc:hover{border-color:var(--text-dim); color:var(--text)}

.gloc.gon{background:var(--brand); border-color:var(--brand); color:#fff}
.gloc.gon:hover{color:#fff}

/* 이미 만든 나라는 눌러둔 것과 헷갈리면 안 됩니다.
   채우지 않고 테두리와 글자색으로만 표시합니다. */
.gloc.gdone{border-color:var(--ok); color:var(--ok-text); background:transparent}
.gloc.gdone.gon{background:var(--ok-deep); border-color:var(--ok-deep); color:#fff}

/* 나라 목록표 */
.gtable{display:flex; flex-direction:column}
.grow{display:grid; grid-template-columns:110px minmax(0,1fr) 140px 110px 80px;
  gap:12px; align-items:center; padding:10px 0;
  border-top:1px solid var(--line-soft)}
.grow:first-child{border-top:0}
.gko{font-weight:700; font-size:13.5px; color:var(--text)}
.okc{color:var(--ok-text)}

@media (max-width:820px){
  .grow{grid-template-columns:96px minmax(0,1fr) 84px; gap:8px}
  .grow > :nth-child(4){display:none}
}

/* 내보낼 때 고르는 길이.
   두 줄이 나란히 서고, 고른 쪽이 눈에 띄어야 합니다. */
.gopt{display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-xs); cursor:pointer;
  margin-bottom:8px; transition:border-color .12s, background .12s}
.gopt:hover{border-color:var(--text-dim)}
.gopt:has(input:checked){border-color:var(--brand); background:var(--brand-softer)}
.gopt input{margin-top:3px; flex:0 0 auto}
.gopt > span{display:flex; flex-direction:column; gap:3px; min-width:0}

/* ------------------------------------------------------------
   내가 운영하는 채널 고르는 줄

   여러 채널을 굴리면 지금 어느 채널을 보고 있는지가
   화면 맨 위에 늘 보여야 합니다.
   ------------------------------------------------------------ */
.minebar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:16px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.minebar .spacer{flex:1}

.minechip{display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--text-2); font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s}
.minechip:hover{border-color:var(--text-dim); color:var(--text)}
.minechip.on{background:var(--brand); border-color:var(--brand); color:#fff}
.minechip .n{font-size:11px; opacity:.7; font-variant-numeric:tabular-nums}
.minechip.on .n{opacity:.85}

/* 지우기를 한 번 눌러 벼려둔 상태.
   되돌릴 수 없는 일이니 눈에 띄어야 합니다. */
.btn.btn-danger-on{background:var(--err); border-color:var(--err); color:#fff}
.btn.btn-danger-on:hover{filter:brightness(.94)}

/* ------------------------------------------------------------
   채널 관리 창

   한 줄에 이름과 주제어와 단추가 같이 섭니다.
   주제어가 길어질 수 있어서 가운데만 늘어나게 둡니다.
   ------------------------------------------------------------ */
.mnlist{display:flex; flex-direction:column}
.mnrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:12px 0; border-top:1px solid var(--line-soft)}
.mnrow:first-child{border-top:0}
.mnname{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-weight:700; font-size:14px; color:var(--text); margin-bottom:3px}
.mnacts{display:flex; gap:6px; flex-shrink:0}

@media (max-width:640px){
  .mnrow{grid-template-columns:minmax(0,1fr)}
  .mnacts{justify-content:flex-start}
}

/* ------------------------------------------------------------
   작업 상태바 (우측 아래)

   무엇을 누르든 여기에 뜹니다. 발굴도 리폼도 나라별 영상도.
   돌고 있는지, 무엇이 나왔는지, 얼마나 걸렸는지 세 가지를 봅니다.

   끝나도 12초는 남습니다.
   끝나자마자 사라지면 결과를 못 보고 놓칩니다.
   ------------------------------------------------------------ */
.jobcard.jb-ok{border-color:var(--ok)}
.jobcard.jb-bad{border-color:var(--err)}
.jobcard .row{display:flex; align-items:center; gap:8px}
.jobcard .spacer{flex:1}

/* 왼쪽 점. 돌고 있으면 돕니다. */
.jbdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--text-dim)}
.jbdot.ok{background:var(--ok)}
.jbdot.bad{background:var(--err)}
.jbdot.spin{background:none; border:2px solid var(--line);
  border-top-color:var(--brand); width:12px; height:12px;
  animation:jbspin .7s linear infinite}
@keyframes jbspin{to{transform:rotate(360deg)}}

.jbtime{font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums}
.jobcard .s.faint{color:var(--text-dim); opacity:.7}
.jobcard .s.ok{color:var(--ok-text)}
.jobcard .s.err{color:var(--err-text)}

/* 얼마나 남았는지 모를 때 쓰는 막대.
   걸음 수를 못 세는 작업도 돌고 있다는 것은 보여야 합니다. */
.pbar.indet{overflow:hidden}
.pbar.indet > span{width:38%; animation:jbslide 1.3s ease-in-out infinite}
@keyframes jbslide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(300%)}
}

@media (prefers-reduced-motion:reduce){
  .jbdot.spin{animation:none; border-top-color:var(--brand)}
  .pbar.indet > span{animation:none; width:100%; opacity:.4}
}

/* 올릴 준비 맨 앞의 영상 파일 칸.
   제일 먼저 할 일이라 눈에 띄어야 합니다. */
.uplcard.uplfile{border-color:var(--brand); background:var(--brand-softer)}
.uplcard.uplfile .rfthumb{height:auto; aspect-ratio:9/16; max-height:120px}

/* 이미 올린 것 표시.
   두 번 올리지 않게 언제 어디에 올렸는지 그 자리에 적습니다. */
.uplup{display:flex; gap:9px; align-items:flex-start; margin-top:10px;
  padding:10px 12px; border-radius:var(--r-xs);
  background:var(--ok-bg); color:var(--text-2); font-size:12.5px; line-height:1.7}
.uplup svg{width:16px; height:16px; flex:0 0 auto; color:var(--ok); margin-top:2px}
.uplup b{color:var(--text)}
.uplup a{color:var(--brand)}

/* 곧 끊길 연결. 아직 되지만 곧 손봐야 하는 상태입니다. */
.btn.btn-warn{border-color:var(--warn); color:var(--warn-text)}
.btn.btn-warn:hover{background:var(--warn-bg)}

/* 자동으로 쓰이는 것 표시.
   제목 세 개, 썸네일 여섯 장 중에 무엇이 올라가는지 보여야 합니다. */
.pickmark{display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; margin-right:7px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:10.5px; font-weight:700;
  vertical-align:middle}
.pickmark svg{width:11px; height:11px}
.kitrow.kitpick{background:var(--brand-softer); border-radius:var(--r-xs)}

.kitthumb.kitpick{outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-xs)}
.kitthumb .pickmark.on{position:absolute; top:6px; left:6px; margin:0; z-index:2}

/* ============================================================
   창 안의 입력 줄

   <label class="fld"><span>이름</span><input class="input"></label>

   span 이 라벨이고 그 아래가 입력칸입니다.
   라벨과 칸을 붙여두면 어느 라벨이 어느 칸 것인지 안 보입니다.
   그래서 줄 사이를 칸과 라벨 사이보다 넓게 둡니다.
   ============================================================ */
.fld{display:block; margin-bottom:16px}
.fld:last-child{margin-bottom:0}

/* 라벨. 본문보다 작고 굵게 해서 층을 만듭니다. */
.fld > span{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:650; color:var(--text-2);
  letter-spacing:-.1px;
}
/* 라벨 안에 체크상자가 들어오는 자리가 있습니다 */
.fld > span input[type=checkbox]{margin-right:6px; vertical-align:-1px}

/* 칸 밑에 붙는 설명은 칸에 바짝 붙여야 그 칸 것으로 읽힙니다 */
.fld .tiny{margin-top:6px}

/* select 도 input 과 같은 규격으로 맞춥니다.
   지금까지 select 만 높이가 달라 줄이 어긋나 보였습니다. */
/* class 를 안 준 select 도 input 과 같은 규격으로 맞춥니다.

   select.input 은 위에서 화살표 그림까지 붙여뒀습니다.
   여기서 다시 정하면 그 화살표가 지워집니다. 그래서 건드리지 않습니다. */
.fld select:not(.input){
  width:100%; height:44px; padding:0 12px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); font-size:14px; font-family:inherit;
  color:var(--text); cursor:pointer;
  transition:border-color var(--t), box-shadow var(--t);
}
.fld select:not(.input):focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(108,92,231,.12);
}

/* 가로로 나란히 두는 줄 */
.fld .row{display:flex; gap:8px; align-items:center}
.fld .row .input{flex:1; min-width:0}

/* ============================================================
   좁은 화면에서 새 부품들

   넓은 화면에서만 보고 넘어간 것들입니다.
   창을 줄이면 단추가 겹치고 글자가 뭉개집니다.
   ============================================================ */
@media(max-width:760px){

  /* 올릴 준비 머리줄.
     제목과 단추가 한 줄에 다 안 들어갑니다. 단추를 아래로 내립니다. */
  .uplcard > header{flex-wrap:wrap}
  .uplcard > header .btn:first-of-type{margin-left:0}
  .uplcard > header .btn{flex:1 1 auto; justify-content:center}
  .uplcard > header > div{flex:1 1 100%}

  /* 영상 파일 칸. 그림과 설명이 나란히 안 들어갑니다. */
  .uplcard.uplfile .uplbody > .row{flex-wrap:wrap}

  /* 내 채널 줄. 이름표가 많아지면 두 줄로 갑니다. */
  .minebar{gap:6px; padding:9px 12px}
  .minechip{font-size:12px; padding:4px 10px}

  /* 나라 이름표 */
  .gloc{font-size:12px; padding:4px 9px}

  /* 고르는 줄 */
  .gopt{padding:9px 10px}

  /* 숫자 칸. 세 개가 한 줄에 안 들어갑니다. */
  .stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

  /* 작업 상태바. 화면 폭에 맞춥니다. */
  .jobdock{left:12px; right:12px; bottom:12px; width:auto}
}

@media(max-width:480px){
  /* 올릴 준비 썸네일. 두 장씩만 놓습니다. */
  .kitthumbs{grid-template-columns:repeat(2,1fr)}

  /* 목록 줄. 그림을 작게 하고 점수 칸을 줄입니다. */
  .lrow{grid-template-columns:84px minmax(0,1fr) 72px; gap:10px; padding:12px}
  .lthumb{width:84px; height:47px}
  .rfthumb{width:84px; height:112px}
}

/* 자본 투자 트랙에서 쓰는 두 가지.
   화면 코드는 쓰고 있었는데 모양이 없어서 맨몸으로 붙어 있었습니다. */

/* 확인 가능한 주장 건수. 세어볼 수 있다는 표시라 눈에 띄어야 합니다. */
.fit-hi{color:var(--ok-text); font-weight:700}

/* 목록 안의 링크. 눌리는 것으로 보여야 합니다. */
.lnk{color:var(--brand-text); text-decoration:none}
.lnk:hover{text-decoration:underline}

/* ============================================================
   만든 영상 — 올린 것 가려내기

   올린 것과 안 올린 것이 한 줄에 섞여 있으면
   어느 것을 손볼 차례인지 매번 눈으로 훑어야 합니다.
   ============================================================ */
.rffilter{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.rfchips{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto; min-width:0}
.rffilter .sortsel{flex:0 0 auto}

/* 어느 채널에 올렸는지.
   줄 안에서 한눈에 띄되 제목보다 세면 안 됩니다. */
.rfup{
  display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:3px 0 5px;
  padding:3px 9px 3px 7px;
  border:1px solid var(--ok);
  border-radius:999px;
  background:var(--ok-bg);
  font-size:11.5px; line-height:1.5;
  color:var(--ok-deep);
}
.rfup svg{width:13px; height:13px; flex:0 0 auto}
.rfup a{color:inherit; text-decoration:none}
.rfup a:hover{text-decoration:underline}
.rfup .faint{color:var(--text-faint)}

/* 공개인지 비공개인지를 점 하나로 */
.rfupdot{
  width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  margin-left:1px;
}
.rfupdot.pub{background:var(--ok-text)}
.rfupdot.pri{background:var(--text-faint)}

@media (max-width:640px){
  .rffilter{gap:8px}
  .rffilter .sortsel{width:100%}
}

/* ============================================================
   채널 상태 — 오늘 몇 편 더 올려도 되는가
   ============================================================ */
.pacetop{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:12px; margin-bottom:16px;
  border:1px solid var(--line);
}
.pacetop svg{width:20px; height:20px; flex:0 0 auto; margin-top:1px}
.pacetop .tiny{line-height:1.8; color:var(--text-dim)}
.pacev{font-size:15px; font-weight:700; margin-bottom:4px}

.pacetop.pace-ok{background:var(--ok-bg); border-color:var(--ok)}
.pacetop.pace-ok .pacev, .pacetop.pace-ok svg{color:var(--ok-deep)}
.pacetop.pace-warn{background:var(--warn-bg); border-color:var(--warn)}
.pacetop.pace-warn .pacev, .pacetop.pace-warn svg{color:var(--warn-deep)}
.pacetop.pace-info{background:var(--surface-2)}
.pacetop.pace-info .pacev, .pacetop.pace-info svg{color:var(--text)}

/* 숫자 세 칸. 좁아지면 한 줄에 하나씩 */
.pacegrid{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px; margin-bottom:16px;
}
.pacebox{
  display:flex; flex-direction:column; gap:3px;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface);
}
.pacebox b{
  font-size:26px; line-height:1.15; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pacebox b.ok{color:var(--ok-text)}
.pacebox b.warn{color:var(--warn-text)}
.pacebox .tiny.faint{line-height:1.6}
/* 뒤에 붙는 작은 글자. 숫자보다 작고 옅게 */
.paceof{font-size:14px; font-weight:600; color:var(--text-faint)}

/* 오늘 올린 것 표. 숫자 칸은 오른쪽에 자릿수 맞춰 */
table.tbl.pacetbl th.num, table.tbl.pacetbl td.num{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
table.tbl.pacetbl td.trunc{max-width:170px}
/* 칸이 일곱이라 기본 여백으로는 창을 넘깁니다.
   옆으로 밀어봐야 마지막 칸을 못 보고 지나칩니다. */
table.tbl.pacetbl th, table.tbl.pacetbl td{padding-left:8px; padding-right:8px}
table.tbl.pacetbl th:first-child, table.tbl.pacetbl td:first-child{padding-left:14px}
table.tbl.pacetbl th:last-child, table.tbl.pacetbl td:last-child{padding-right:14px}

@media (max-width:760px){
  .pacegrid{grid-template-columns:1fr}
  .pacebox b{font-size:22px}
  table.tbl.pacetbl td.trunc{max-width:140px}
}

/* 하루 목표와 간격. 두 칸이 나란히 */
.pacefld{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pacefld label{display:flex; flex-direction:column; gap:5px; min-width:0}
@media (max-width:480px){ .pacefld{grid-template-columns:1fr} }

/* 채널이 시간당 먹는 양. 막대 하나가 발자국 한 칸입니다. */
.flowbars{
  display:flex; align-items:flex-end; gap:6px;
  overflow-x:auto; padding-bottom:4px;
}
.flowbar{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex:1 1 0; min-width:44px;
}
.flowbar i{
  display:block; width:100%; border-radius:4px 4px 2px 2px;
  background:var(--brand); opacity:.85;
}
.flowbar:last-child i{opacity:1}
.flowv{
  font-size:10.5px; color:var(--text-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.flowt{
  font-size:10px; color:var(--text-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ============================================================
   오늘 올린 것 피드백 상자

   막지 않습니다. 보여주기만 합니다.
   목록 바로 위에 있어야 다음에 뭘 올릴지 여기서 정합니다.
   ============================================================ */
.pacebox-w{margin-bottom:14px}
.pbx{
  border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; background:var(--surface);
}
.pbxhead{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.pbxhead svg{width:17px; height:17px; flex:0 0 auto}
.pbxhead > b{font-size:13.5px}
.pbxhead .tiny{color:var(--text-dim); white-space:nowrap}
.pbxhead .tiny b{color:var(--text)}
.pbxwhy{
  margin-top:7px; line-height:1.75; color:var(--text-dim);
}
.pbxwhy.warn{color:var(--warn-text)}

/* 조회수가 늘고 있는지 한눈에. 막대 하나가 발자국 한 칸입니다. */
.pbxbars{
  display:inline-flex; align-items:flex-end; gap:3px; height:22px;
  flex:0 0 auto;
}
.pbxbars i{
  display:block; width:5px; border-radius:2px;
  background:var(--brand); opacity:.5;
}
.pbxbars i:last-child{opacity:1}

.pbx.pace-ok{border-color:var(--ok); background:var(--ok-bg)}
.pbx.pace-ok > .pbxhead > b, .pbx.pace-ok > .pbxhead > svg{color:var(--ok-deep)}
.pbx.pace-warn{border-color:var(--warn); background:var(--warn-bg)}
.pbx.pace-warn > .pbxhead > b, .pbx.pace-warn > .pbxhead > svg{color:var(--warn-deep)}
.pbx.pace-info{background:var(--surface-2)}

@media (max-width:760px){
  .pbxhead .spacer{display:none}
  .pbxbars{width:100%; justify-content:flex-start}
}

/* 창 안 숫자가 넷일 때. 셋보다 좁아집니다. */
.pacegrid.pacegrid4{grid-template-columns:repeat(4, minmax(0, 1fr))}
.pacegrid.pacegrid4 .pacebox b{font-size:22px}
@media (max-width:980px){ .pacegrid.pacegrid4{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .pacegrid.pacegrid4{grid-template-columns:1fr} }

/* 줄 서 있는 예약 */
.qrows{display:flex; flex-direction:column; gap:1px;
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
.qrow{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; background:var(--surface); font-size:12.5px;
}
.qrow + .qrow{border-top:1px solid var(--line)}
.qrow .trunc{flex:1 1 auto; min-width:0; color:var(--text-dim)}
.qtime{
  flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--text); min-width:112px;
}
.qrow a{flex:0 0 auto}
@media (max-width:480px){
  .qrow{flex-wrap:wrap; gap:4px 10px}
  .qtime{min-width:0}
}

/* 다음 공개 시각. 오른쪽 단추 옆에 붙입니다. */
.pbxnext{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--text-dim); white-space:nowrap;
}
.pbxnext svg{width:13px; height:13px}

/* 아직 안 나간 예약. 올린 것과 눈에 띄게 갈라야 합니다.
   올린 것은 끝난 일이고 이건 앞으로 벌어질 일입니다. */
.rfup.rfwait{
  border-color:var(--brand-line);
  background:var(--brand-soft);
  color:var(--brand-text);
}
.rfup.rfwait svg{color:inherit}
.rfup.rfwait a{text-decoration:underline; text-underline-offset:2px}

/* 피드백 상자의 다음 공개. 눌러서 예약 목록으로 갑니다. */
button.pbxnext{
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:4px 11px; cursor:pointer;
  font-size:11.5px; font-family:inherit;
}
button.pbxnext:hover{background:var(--surface-2); border-color:var(--brand)}
button.pbxnext b{color:var(--text)}

/* ============================================================
   어떻게 찾을까요 — 두 갈래 고르기
   ============================================================ */
.waypick{display:grid; gap:10px}
.wayone{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  padding:15px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); cursor:pointer; font-family:inherit; width:100%;
}
.wayone:hover{border-color:var(--brand); background:var(--brand-softer)}
.wayone svg{width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:var(--brand)}
.wayone > div{display:flex; flex-direction:column; gap:5px; min-width:0}
.wayone b{font-size:13.5px; color:var(--text)}
.wayone .tiny{line-height:1.75}

/* 연결된 채널임을 알리는 점 */
.mndot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--ok); margin-right:5px; vertical-align:middle;
}

/* ============================================================
   원본 표시 짚기

   화면을 크게 보여줘야 작은 표시가 눈에 들어옵니다.
   ============================================================ */
.markwrap{display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:18px}
.markshot{
  position:relative; border-radius:10px; overflow:hidden;
  background:var(--surface-2); cursor:crosshair; touch-action:none;
  user-select:none; min-height:180px;
}
.markshot img{display:block; width:100%; height:auto}
.markload{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center; font-size:12px; color:var(--text-dim);
}
.markbox{
  position:absolute; border:2px solid var(--err); cursor:pointer;
  background:color-mix(in srgb, var(--err) 22%, transparent);
}
.markbox:hover{background:color-mix(in srgb, var(--err) 38%, transparent)}
.markghost{pointer-events:none; border-style:dashed}

.markside{display:flex; flex-direction:column; min-width:0}
.markboxes{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.markrow{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); font-size:12px;
}
.markrow > b{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--err-bg); color:var(--err-text);
  display:grid; place-items:center; font-size:11px;
}
.markrow .tiny{flex:1 1 auto; min-width:0}

@media (max-width:760px){
  .markwrap{grid-template-columns:1fr}
}

/* ============================================================
   내 포지션

   익절이든 손절이든 닿는 순간은 잠깐입니다.
   자리를 비운 사이에 닿아도 돌아와서 볼 수 있어야 합니다.
   그래서 닿은 것은 카드 위에 띠로 남고, 확인을 눌러야 걷힙니다.
   ============================================================ */
.possec{
  font-size:12px; font-weight:700; color:var(--text-dim);
  margin:20px 0 10px;
}
.possec:first-of-type{margin-top:0}
.posgrid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}
.poscard{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface); overflow:hidden;
}
.poscard.poshit-tp{border-color:var(--ok)}
.poscard.poshit-sl{border-color:var(--err)}

/* 닿았다는 띠. 확인을 눌러야 걷힙니다. */
.posbanner{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 13px; border-bottom:1px solid var(--line);
}
.posbanner svg{width:17px; height:17px; flex:0 0 auto; margin-top:1px}
.posbanner > div{flex:1 1 auto; min-width:0}
.posbanner b{display:block; font-size:12.5px; margin-bottom:3px}
.posbanner .tiny{line-height:1.7; color:var(--text-dim)}
.posbanner .btn{flex:0 0 auto}
.poshit-tp .posbanner{background:var(--ok-bg)}
.poshit-tp .posbanner b, .poshit-tp .posbanner svg{color:var(--ok-deep)}
.poshit-sl .posbanner{background:var(--err-bg)}
.poshit-sl .posbanner b, .poshit-sl .posbanner svg{color:var(--err-deep)}

.poshead{display:flex; align-items:flex-start; gap:12px; padding:13px 14px 0}
.posname{font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.posnow{
  margin-left:auto; text-align:right; flex:0 0 auto;
  display:flex; flex-direction:column; gap:2px;
}
.posnow b{font-size:16px; font-variant-numeric:tabular-nums}
.posnow .tiny{white-space:nowrap}

/* 들어간 값과 두 선 */
.posline{
  display:flex; gap:14px; flex-wrap:wrap;
  padding:11px 14px; font-size:11.5px; color:var(--text-dim);
}
.posline b{color:var(--text); font-variant-numeric:tabular-nums}
.posline > span{display:inline-flex; align-items:center; gap:5px}
.posdot{width:6px; height:6px; border-radius:50%; flex:0 0 auto}
.posdot.in{background:var(--text-faint)}
.posdot.tp{background:var(--ok)}
.posdot.sl{background:var(--err)}

.posacts{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-top:1px solid var(--line); background:var(--surface-2);
}

/* 탭에 붙는 빨간 숫자 */
.ftab .n.hot{background:var(--err); color:#fff}

@media (max-width:560px){
  .posgrid{grid-template-columns:1fr}
  .poshead{flex-wrap:wrap}
  .posnow{margin-left:0; text-align:left; flex-direction:row; align-items:baseline; gap:8px}
}

/* 짚는 갈래 — 지우기 / 우리 채널 띠 */
.markkind{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.markk{
  display:flex; gap:9px; align-items:flex-start; text-align:left;
  padding:10px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); cursor:pointer; font-family:inherit;
}
.markk svg{width:16px; height:16px; flex:0 0 auto; margin-top:1px; color:var(--text-dim)}
.markk > span{display:flex; flex-direction:column; gap:2px; min-width:0}
.markk b{font-size:12.5px; color:var(--text)}
.markk .tiny{color:var(--text-faint); line-height:1.5}
.markk.on{border-color:var(--brand); background:var(--brand-soft)}
.markk.on svg, .markk.on b{color:var(--brand-text)}

/* 우리 채널 띠로 바꿀 자리는 다른 색으로 */
.markbox.markpromo{border-color:var(--brand); background:var(--brand-strong)}
.markbox.markpromo:hover{background:var(--brand-soft)}
.markrow.mrpromo > b{background:var(--brand-soft); color:var(--brand-text)}

@media (max-width:760px){ .markkind{grid-template-columns:1fr} }

/* 유튜브에서 사라진 것. 올린 것과 눈에 띄게 갈라야 합니다. */
.rfup.rfgone{
  border-color:var(--err);
  background:var(--err-bg);
  color:var(--err-text);
}
.rfup.rfgone svg{color:inherit}

/* 이미 만들어둔 원본.

   같은 것을 또 만들면 조회수가 갈라집니다.
   누르기 전에 눈에 걸려야 손이 안 미끄러집니다. */
.madetag{
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:6px; padding:3px 9px 3px 7px;
  border:1px solid var(--ok); border-radius:999px;
  background:var(--ok-bg); color:var(--ok-deep);
  font-size:11px; line-height:1.5;
}
.madetag svg{width:12px; height:12px; flex:0 0 auto}
.madetag .faint{color:var(--ok-deep); opacity:.72}
/* 올린 것까지 끝났으면 더 진하게 */
.madetag.mtup{border-color:var(--ok); background:var(--ok-bg)}

/* 터진 이유 — 숫자를 나란히 놓고 견주는 표 */
table.tbl.studytbl th.num, table.tbl.studytbl td.num{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
table.tbl.studytbl th, table.tbl.studytbl td{padding-left:10px; padding-right:10px}
table.tbl.studytbl td.trunc{max-width:190px}
.sbar{display:inline-block; width:54px; height:6px; border-radius:3px;
      background:var(--surface-2); overflow:hidden; vertical-align:middle}
.sbar i{display:block; height:100%; background:var(--brand)}
@media (max-width:760px){ table.tbl.studytbl td.trunc{max-width:120px} }