:root{
  --side-bg:#12294D; --side-fg:#C9D6EA; --side-fg-dim:#7D93B4; --side-on:#1D3E70;
  --brand:#12294D; --on-brand:#FFFFFF; --amber:#B67A22; --amber-bg:#FBF1DF;
  --ground:#F5F7F9; --surface:#FFFFFF; --surface-2:#FAFBFC;
  --ink:#141A22; --ink-2:#3C4653; --muted:#6B7688; --line:#E2E7ED;
  --ok:#15795A; --ok-bg:#E4F2EC;
  --wait:#96650F; --wait-bg:#F7EEDC;
  --bad:#A63A3A; --bad-bg:#F8E7E7;
  --info:#28497E; --info-bg:#E7EDF7;
  --radius:10px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --side-bg:#101722; --side-fg:#B7C4D6; --side-fg-dim:#6C7A8D; --side-on:#1E2A3B;
    --brand:#8FB0E0; --on-brand:#0C1117; --amber:#D99B45; --amber-bg:#2E2413;
    --ground:#0C1117; --surface:#151B24; --surface-2:#1A212B;
    --ink:#E7ECF3; --ink-2:#BFC8D4; --muted:#8792A3; --line:#27303C;
    --ok:#4FBF95; --ok-bg:#123026;
    --wait:#D3A055; --wait-bg:#332815;
    --bad:#E07A7A; --bad-bg:#361E1E;
    --info:#88A9DC; --info-bg:#192434;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;word-break:keep-all;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--info)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.hide{display:none !important}

/* ── 게이트(로그인/가입/대기) ── */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.gbox{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);
      border-radius:14px;padding:28px}
.gbox.wide{max-width:560px}
.glogo{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.glogo .mk{width:38px;height:38px;border-radius:9px;background:var(--brand);color:var(--on-brand);
      display:grid;place-items:center;font-weight:800;font-size:14px}
.glogo b{display:block;font-size:16px}
.glogo span{display:block;color:var(--muted);font-size:12px}
.gbox h2{font-size:19px;margin-bottom:6px}
.gbox .lead{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.gfoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
       font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.link{background:none;border:0;color:var(--info);font-weight:650;padding:0;font-size:13px}

/* ── 앱 뼈대 ── */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--side-bg);color:var(--side-fg);display:flex;flex-direction:column;
      padding:18px 12px;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 14px}
.brand .mk{width:34px;height:34px;border-radius:8px;background:var(--amber);color:#1A1206;
      display:grid;place-items:center;font-weight:800;font-size:13px}
.brand b{display:block;color:#fff;font-size:14.5px}
.brand span{display:block;color:var(--side-fg-dim);font-size:11.5px}
.navlbl{color:var(--side-fg-dim);font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:15px 12px 6px}
.nav{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:9px 11px;
     border-radius:8px;color:var(--side-fg);font-size:13.5px;text-align:left;transition:background .12s}
.nav:hover{background:rgba(255,255,255,.07)}
.nav.on{background:var(--side-on);color:#fff;font-weight:600}
.nav .n{width:19px;height:19px;flex:none;border-radius:5px;background:rgba(255,255,255,.13);
     display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.nav.on .n{background:var(--amber);color:#1A1206}
.nav .cnt{margin-left:auto;background:rgba(255,255,255,.13);color:#fff;font-size:11px;
     padding:1px 7px;border-radius:20px;font-variant-numeric:tabular-nums}
.nav .cnt.hot{background:#B33}
.nav.soon{opacity:.45;cursor:default}
.nav.soon:hover{background:none}
.sidefoot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
     color:var(--side-fg-dim);font-size:11.5px;line-height:1.6}
.sidefoot b{color:#fff;display:block;font-size:12.5px}
.xdel{margin-left:6px;background:none;border:1px solid var(--line);color:var(--muted);
     border-radius:6px;width:22px;height:22px;line-height:1;font-size:12px;flex:none;padding:0}
.xdel:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}

/* 학원이 보낸 사진 보기 */
.picwrap{position:fixed;inset:0;background:rgba(8,12,20,.72);z-index:60;display:none;
     padding:24px 16px;overflow-y:auto}
.picwrap.on{display:block}
.picbox{max-width:1100px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
     border-radius:14px;overflow:hidden}
.pichead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);
     position:sticky;top:0;background:var(--surface);flex-wrap:wrap}
.picgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:16px}
.picitem{position:relative;display:block;aspect-ratio:1;border:1px solid var(--line);border-radius:9px;
     overflow:hidden;background:var(--surface-2)}
.picitem img{width:100%;height:100%;object-fit:cover;display:block}
.picitem span{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.6);color:#fff;
     font-size:11px;padding:1px 6px;border-radius:20px;font-variant-numeric:tabular-nums}
/* 사진 꼬리표 — 사진 아래 종류·과목 두 칸 */
.piccell{display:flex;flex-direction:column;gap:5px}
.pictag{display:flex;gap:4px}
.pictag select{flex:1;min-width:0;font-size:11.5px;padding:4px 5px;border-radius:7px;
     border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pictag .btn{flex:1;min-width:0;font-size:11.5px;padding:4px 5px}
.pcx{flex:1;display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;
     padding:4px 6px;border:1px solid var(--line);border-radius:7px;cursor:pointer;
     background:var(--surface);white-space:nowrap}
.pcx.on{border-color:var(--bad);color:var(--bad);background:var(--bad-bg)}
.piccell .picitem img{transition:transform .15s}

.vsw{display:flex;background:rgba(255,255,255,.08);border-radius:8px;padding:2px;gap:2px}
.vsw button{flex:1;background:none;border:0;color:var(--side-fg);font-size:11.5px;font-weight:650;
     padding:5px 4px;border-radius:6px;transition:background .12s}
.vsw button.on{background:var(--amber);color:#1A1206}

/* 확인 창 */
.ovl{position:fixed;inset:0;background:rgba(8,14,22,.55);display:grid;place-items:center;
     z-index:60;padding:20px;overflow:auto}
.ovlcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;
     padding:24px;max-width:460px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.ovlcard h3{font-size:17px;margin-bottom:7px}
.ovlcard .lead{color:var(--muted);font-size:13.5px;line-height:1.6;margin-bottom:16px}

/* 고르는 칩 (담당 공동체·상태 거르기) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
     font-size:12px;font-weight:650;padding:4px 10px;border-radius:20px;white-space:nowrap}
.chips button:hover{border-color:var(--info)}
.chips button.on{background:var(--info-bg);border-color:var(--info);color:var(--info)}

/* 내가 맡은 공동체 */
tr.mycomm td{background:color-mix(in srgb,#8B5CF6 12%,transparent)}
tr.mycomm:hover td{background:color-mix(in srgb,#8B5CF6 18%,transparent)}
.minetag{display:inline-block;font-size:10.5px;font-weight:800;color:#6D28D9;
     background:color-mix(in srgb,#8B5CF6 22%,transparent);padding:1px 7px;border-radius:20px;margin-left:6px}
@media (prefers-color-scheme:dark){
  tr.mycomm td{background:color-mix(in srgb,#A78BFA 16%,transparent)}
  .minetag{color:#DDD6FE;background:color-mix(in srgb,#A78BFA 28%,transparent)}
}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);
     padding:12px 26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wrap{padding:24px 26px 60px;max-width:1180px;width:100%}
.head{margin-bottom:16px}
.head .step-of{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--amber);margin-bottom:5px}
.head h1{font-size:22px;font-weight:750}
.head p{color:var(--muted);font-size:13.5px;margin-top:4px}

/* ── 조각 ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.stat b{display:block;font-size:26px;font-weight:750;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.sec{font-size:12.5px;font-weight:750;color:var(--ink-2);margin:26px 0 10px;
     padding-bottom:7px;border-bottom:1px solid var(--line)}
.sec small{font-weight:500;color:var(--muted);margin-left:6px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

table{width:100%;border-collapse:collapse;font-size:13.5px}
.tblbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tblscroll{overflow-x:auto}
th{text-align:left;font-size:11.5px;font-weight:700;color:var(--muted);padding:11px 14px;
   border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;
      padding:3px 9px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.c-wait{color:var(--wait);background:var(--wait-bg)}
.c-info{color:var(--info);background:var(--info-bg)}
.c-ok{color:var(--ok);background:var(--ok-bg)}
.c-bad{color:var(--bad);background:var(--bad-bg)}
.c-off{color:var(--muted);background:var(--ground);border-color:var(--line)}

.lv{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
    font-size:11.5px;font-weight:800;background:var(--info-bg);color:var(--info)}
.lv.l4{background:var(--wait-bg);color:var(--wait)}
.lv.l5{background:var(--amber);color:#1A1206}

.btn{border:1px solid var(--line);background:var(--surface);padding:8px 15px;border-radius:8px;
     font-size:13px;font-weight:600;transition:.12s}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn-p{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn-p:hover{opacity:.9;background:var(--brand)}
.btn-a{background:var(--amber);border-color:var(--amber);color:#1A1206}
.btn-a:hover{opacity:.9;background:var(--amber)}
.btn-s{padding:4px 10px;font-size:12px}
.btn-w{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

.note{background:var(--info-bg);border-left:3px solid var(--info);padding:12px 14px;
      border-radius:0 8px 8px 0;font-size:13px;color:var(--ink-2)}
.note b{color:var(--ink)}
.note.warn{background:var(--wait-bg);border-left-color:var(--wait)}
.note.bad{background:var(--bad-bg);border-left-color:var(--bad)}
.note.ok{background:var(--ok-bg);border-left-color:var(--ok)}

.fld{margin-bottom:13px}
label.f{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
     background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px}
.inp:focus{outline:2px solid var(--amber);border-color:transparent}
select.inp{cursor:pointer}
.msg{font-size:13px;padding:10px 12px;border-radius:8px;margin-bottom:14px}
.msg.err{background:var(--bad-bg);color:var(--bad)}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.warn{background:var(--wait-bg);color:var(--wait)}
.msg b{color:inherit}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:9px 15px;font-size:13.5px;font-weight:600;
     color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--amber)}

.people{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.person h4{font-size:15px;font-weight:700}
.person .meta{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.person input.pk-apply{accent-color:var(--amber);width:17px;height:17px;flex:none}
.person:has(.pk-apply:checked){border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}

/* 여러 명 한꺼번에 처리하는 줄 — 신청이 몰릴 때 씁니다 */
.bulkbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
     background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     padding:11px 14px;margin-bottom:14px}
.bulkbar input[type=checkbox]{accent-color:var(--amber);width:17px;height:17px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;margin:12px 0}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.checks{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin:12px 0}
.checks p{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:7px}
.checks label{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:3px 0;cursor:pointer}
.checks input{margin-top:4px;accent-color:var(--amber)}

.empty{color:var(--muted);font-size:13.5px;text-align:center;padding:34px 20px;
       background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
.screen{display:none} .screen.on{display:block}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
   background:var(--ink);color:var(--ground);padding:11px 18px;border-radius:9px;font-size:13.5px;
   font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:60;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr}
  .people{grid-template-columns:1fr} }
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:sticky;top:0;z-index:6;height:auto;flex-direction:row;overflow-x:auto;
        padding:8px 10px;gap:6px;align-items:center;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .brand,.navlbl,.sidefoot{display:none}
  #navBox{display:flex;gap:6px}
  .nav{width:auto;white-space:nowrap;padding:7px 11px;font-size:13px}
  .top{top:52px;padding:10px 15px}
  .g2{grid-template-columns:1fr} .g4{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:18px 15px 50px}
}

/* ── v3 화면용 추가 ── */
.g5{grid-template-columns:repeat(5,1fr)}
.pane{display:block} .pane.hide{display:none}
.dv{display:none} .dv.on{display:block}
.hl{background:var(--hl)}
:root{--hl:#FFF3B8}
@media (prefers-color-scheme:dark){:root{--hl:#4A3F12}}

.flow{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:16px 18px;margin-bottom:22px}
.flow h4{font-size:13px;font-weight:750;margin-bottom:3px}
.flow .fsub{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.flowrow{display:flex;gap:18px;overflow-x:auto;padding-bottom:4px}
.fgroup{flex:none}
.fgroup>span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}
.fsteps{display:flex;align-items:center;gap:6px}
.fstep{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface-2);
     padding:7px 12px;border-radius:9px;font-size:12.5px;font-weight:620;white-space:nowrap;transition:.12s}
.fstep:hover{border-color:var(--amber);background:var(--surface)}
.fstep b{width:18px;height:18px;border-radius:5px;background:var(--brand);color:var(--on-brand);
     display:grid;place-items:center;font-size:10.5px;flex:none}
.farrow{color:var(--muted);font-size:12px;flex:none}
.fdiv{width:1px;background:var(--line);flex:none;align-self:stretch;margin-top:20px}

.job{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     padding:15px 17px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.job.due{border-color:var(--bad)}
.job h4{font-size:15px;font-weight:680}
.job .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.job .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dday{font-size:12px;font-weight:750;color:var(--bad);background:var(--bad-bg);
      padding:3px 9px;border-radius:6px;white-space:nowrap}
.dday.calm{color:var(--muted);background:var(--ground)}

.bar{height:6px;background:var(--line);border-radius:20px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--ok);border-radius:20px}
.bar.mid i{background:var(--amber)}

/* ⚠️⚠️ `.step` 은 **두 곳에서 서로 다른 것**을 가리킵니다 —
   ① 여기: 교육 진행 알약(승인 → 1차 줌 → 영상 …) ② 아래 478줄쯤: 글쓰기 세 단계 카드.
   예전엔 둘 다 그냥 `.step` 이라 **이쪽 규칙이 카드에도 먹었습니다** →
   카드가 display:flex 가 되어 글자가 한 글자씩 세로로 쏟아지고,
   `.step.now` 의 주황 배경이 카드 전체를 덮었습니다.
   그래서 알약 쪽은 전부 `.steps` 안에서만 먹도록 좁혔습니다. 이 접두사를 떼지 마세요. */
.steps{display:flex;align-items:center;flex-wrap:wrap;font-size:12.5px}
.steps .step{display:flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);
      background:var(--surface);color:var(--muted);font-weight:600;
      border-radius:0;margin-bottom:0}
.steps .step:first-child{border-radius:20px 0 0 20px} .steps .step:last-child{border-radius:0 20px 20px 0}
.steps .step+.step{border-left:0}
.steps .step.done{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.steps .step.now{background:var(--amber);color:#1A1206;border-color:transparent}

.matlist{display:grid;gap:10px}
.mat{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--radius);padding:13px 15px;flex-wrap:wrap}
/* 유튜브 썸네일 — 자동으로 들어옵니다. 못 불러오면 ▶ 만 남습니다 */
.mat .thumb{position:relative;width:112px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
     background:var(--side-bg);color:#fff;display:grid;place-items:center;font-size:15px;flex:none}
.mat .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mat .thumb .pl{position:relative;width:30px;height:30px;border-radius:50%;
     background:rgba(0,0,0,.55);display:grid;place-items:center;font-size:12px;
     padding-left:2px;box-shadow:0 1px 6px rgba(0,0,0,.35)}
@media (max-width:520px){ .mat .thumb{width:84px} }
.mat h4{font-size:14px;font-weight:650}
.mat .meta{color:var(--muted);font-size:12px}

/* 원고 통과 뒤에는 작성 가이드를 접어 둡니다 (주소 넣는 칸이 위로 오게) */
.foldguide{margin-top:18px}
.foldguide>summary{cursor:pointer;font-size:13.5px;color:var(--muted);
     padding:10px 14px;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--radius)}
.foldguide[open]>summary{margin-bottom:14px}

/* 교육 영상 — 페이지 안에서 바로 재생하고 그 아래 요약을 씁니다 */
.matopen:empty{display:none}
.matopen{background:var(--surface);border:1px solid var(--line);border-top:none;
     border-radius:0 0 var(--radius) var(--radius);padding:15px;margin-top:-10px}
.ytwrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;
     border-radius:8px;overflow:hidden}
.ytwrap iframe,.ytwrap>div{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 이 글에서 다룰 이야기 — 학원이 보낸 글감 중 이 글 몫 */
.topicbox{background:color-mix(in srgb,var(--amber) 8%,var(--surface));
     border:1.5px solid color-mix(in srgb,var(--amber) 42%,var(--line));
     border-radius:12px;padding:16px 18px;margin:14px 0}
.topicbox .tb-h{font-size:14px;font-weight:800;color:var(--amber);margin-bottom:9px}
.topicbox .tb-h span{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.topicbox>b{display:block;font-size:15px;font-weight:800;margin-bottom:8px}
.topicbox pre{white-space:pre-wrap;font:inherit;font-size:13.5px;line-height:1.75;margin:0;
     background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:13px 15px;
     max-height:340px;overflow-y:auto}
.topicbox .tb-w{margin-top:11px;font-size:12.5px;line-height:1.65;color:var(--bad);
     background:var(--bad-bg);border-radius:8px;padding:10px 12px}
.topicbox .tb-w b{color:inherit}

/* 광고 표시 문구 — 글마다 다릅니다 */
.adbox{margin:14px 0}
.adline{background:var(--surface-2);border:1px dashed var(--line);border-radius:8px;
     padding:11px 14px;font-size:13.5px;line-height:1.6;margin:0 0 9px}

/* 블로거가 낸 요약 — 그대로 읽어야 하므로 밝은 바탕에 진한 글씨 */
.sumtext{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.75;margin:0;
     background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
     border-left:3px solid var(--info);padding:13px 15px;border-radius:8px}
.wbar{position:relative;margin-top:10px;height:24px;border-radius:12px;
     background:var(--side-bg);overflow:hidden;display:flex;align-items:center}
.wbar .wfill{position:absolute;left:0;top:0;bottom:0;background:var(--ok);
     transition:width .4s ease}
.wbar span{position:relative;padding:0 12px;font-size:12px;color:#fff;font-variant-numeric:tabular-nums}

.pickwrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.picklist{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     overflow:hidden;display:flex;flex-direction:column}
.pickhead{background:var(--surface-2);border-bottom:1px solid var(--line);padding:10px 14px;
     display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pickhead b{font-size:13.5px}
.pickhead input{accent-color:var(--amber)}
.pickhead .cntx{margin-left:auto;font-size:12.5px;font-weight:750;color:var(--amber);font-variant-numeric:tabular-nums}
.pickbody{max-height:340px;overflow-y:auto}
.pickrow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);
     font-size:13.5px;cursor:pointer}
.pickrow:last-child{border-bottom:0}
.pickrow:hover{background:var(--surface-2)}
.pickrow input{accent-color:var(--amber);flex:none}
.pickrow .sub{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap}
.pickbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     padding:14px 18px;margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
.crumb button{border:0;background:none;color:var(--info);font-weight:650;padding:0}
.mixcell{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pill{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;white-space:nowrap}
.pill.todo{background:var(--bad-bg);color:var(--bad)}
.pill.done{background:var(--ok-bg);color:var(--ok)}
.pill.off{background:var(--ground);color:var(--muted)}

.formdoc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.formdoc .fh{background:var(--surface-2);border-bottom:1px solid var(--line);padding:11px 16px;
     font-size:12.5px;font-weight:700;color:var(--ink-2)}
.formline{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:10px 16px;
     border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.formline:last-child{border-bottom:0}
.formline .lb{font-weight:700;font-size:12.5px}
.formline .lb.me{color:var(--amber)}
.formline .ds{color:var(--muted);font-size:12.5px}
.mine{display:inline-block;font-size:10.5px;font-weight:800;color:#1A1206;background:var(--amber);
     padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}
tr.sent td{background:var(--hl)}
tr.clickme{cursor:pointer}

@media (max-width:1000px){ .g5{grid-template-columns:repeat(2,1fr)} .pickwrap{grid-template-columns:1fr} }
@media (max-width:820px){ .g5{grid-template-columns:repeat(2,1fr)} .formline{grid-template-columns:1fr;gap:2px} }

/* 상태 여러 개 고르기 */
.chipbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.chipbar .ck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);padding:5px 11px;border-radius:20px;cursor:pointer}
.chipbar .ck:has(input:checked){background:var(--amber);border-color:var(--amber);color:#1A1206}
.chipbar .ck input{accent-color:var(--brand);margin:0}
/* 공동체 멤버 펼치기 */
.memlist{padding:10px 14px;background:var(--surface-2);border-top:1px solid var(--line)}
.memlist .m{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 10px;margin:3px 4px 3px 0}

/* 끌어서 맡기기 */
.pickrow .grip{color:var(--muted);cursor:grab;font-size:13px;user-select:none}
.pickrow[draggable="true"]:active{opacity:.6}
.drop.canhit{outline:1px dashed var(--amber);outline-offset:-3px}
.drop.over{background:var(--amber);color:#1A1206}
.drop.over .mono,.drop.over .sub{color:#1A1206}

/* 소재 나누기 (4 키워드 만들기 아래) */
.tprow{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--surface-2)}
.tpn{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;
     background:var(--amber);color:#1A1206;font-size:12px;font-weight:800}
.tpnote{white-space:pre-wrap;font:inherit;font-size:12.5px;line-height:1.7;margin:10px 0 0;
     background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;
     max-height:260px;overflow-y:auto}

/* 주문 카드 안 「블로거에게 나가는 정보」 접이식 (3 주문 · 입금) */
.outbox{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:0}
.outbox>summary{cursor:pointer;padding:13px 15px;font-size:13.5px;font-weight:750;list-style:none}
.outbox>summary::-webkit-details-marker{display:none}
.outbox>summary::before{content:'▸ ';color:var(--amber);font-weight:800}
.outbox[open]>summary::before{content:'▾ '}
.outbox>summary .mono{font-weight:500;margin-left:6px}
.outbox .obody{padding:0 15px 16px}
.outbox .osec{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.03em;
     margin:16px 0 9px;text-transform:none}
.obit{border:1px solid var(--line);border-radius:9px;background:var(--surface);margin-bottom:7px}
.obit>summary{cursor:pointer;padding:9px 12px;font-size:13px;list-style:none;
     display:flex;gap:9px;align-items:center}
.obit>summary::-webkit-details-marker{display:none}
.obit>summary b{flex:1;min-width:0;font-weight:650}
.obit pre{white-space:pre-wrap;font:inherit;font-size:12.5px;line-height:1.75;
     margin:0;padding:0 12px 12px;color:var(--muted)}
.obit .n{display:grid;place-items:center;width:21px;height:21px;flex:none;border-radius:50%;
     background:var(--amber);color:#1A1206;font-size:11px;font-weight:800}
.obit.none .n{background:var(--line);color:var(--muted)}
.adlist{counter-reset:ad;font-size:12.5px;line-height:1.9;color:var(--muted);
     max-height:240px;overflow-y:auto;padding:11px 13px;background:var(--surface);
     border:1px solid var(--line);border-radius:9px}
.adlist div::before{counter-increment:ad;content:counter(ad) '. ';color:var(--amber);font-weight:700}

/* 분배표 — 비율보다 모자라거나 적자인 줄 */
tr.badrow{background:var(--bad-bg)}
td.num.bad{color:var(--bad)}
/* 학원 회원 구분 배지 — 지급 단가가 여기서 갈리므로 눈에 띄게 둡니다 */
.mem{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
     font-size:11.5px;font-weight:800;letter-spacing:.01em}
.mem.pre{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.mem.nor{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}

/* 태그 — 관리자 미리보기와 블로거 화면이 같은 모양 */
.tagbox{margin:14px 0}
.tagline{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.tagline span{font-size:12.5px;font-weight:650;padding:3px 9px;border-radius:999px;
     background:color-mix(in srgb,var(--amber) 13%,transparent);color:var(--amber)}

/* 글쓰기 세 단계 — 지금 할 칸만 색이 살고, 끝난 칸은 회색, 아직인 칸은 잠깁니다.
   ⚠️ display 를 명시합니다 — 위쪽 알약 규칙이 다시 새어 들어와도 카드가 안 깨지게. */
.step{display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface);
     padding:16px 18px;margin-bottom:12px;color:var(--ink);font-weight:400}
.step .sh{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:750;margin-bottom:12px}
.step .sn{display:grid;place-items:center;width:23px;height:23px;flex:none;border-radius:50%;
     background:var(--line);color:var(--muted);font-size:12px;font-weight:800}
.step .sh .chip{margin-left:auto}
.step.now{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.step.now .sn{background:var(--amber);color:#1A1206}
.step.ok{border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.step.ok .sn{background:var(--ok);color:#fff}
.step.bad{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
.step.bad .sn{background:var(--bad);color:#fff}
.step.wait{border-color:var(--wait);background:var(--surface-2)}
.step.wait .sn{background:var(--wait);color:#fff}
/* 끝난 칸·아직인 칸은 연한 회색으로 물러나 있습니다 */
.step.done,.step.lock{background:var(--surface-2);border-style:dashed}
.step.done .sh,.step.lock .sh{color:var(--muted)}
.step.done .sn{background:var(--ok);color:#fff}
.step.lock{opacity:.72}
.step.lock .inp{background:var(--ground);color:var(--muted);cursor:not-allowed}

/* 블로거 목록의 이웃 수 — 눌러서 그 자리에서 고칩니다 */
.nbbtn{background:none;border:1px dashed var(--line);border-radius:6px;padding:2px 8px;
     font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:650}
.nbbtn:hover{border-color:var(--amber);color:var(--amber);border-style:solid}
.nbbtn.none{color:var(--muted);font-weight:500}

/* 줌 참석 본인 체크 */
.attpick{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.attvid{margin-top:4px}

/* 블로거 목록 — 이름을 눌러 신청 내용 펼치기 */
.nmbtn{background:none;border:0;padding:0;font:inherit;font-weight:750;color:var(--ink);
     text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.nmbtn:hover{color:var(--amber)}
tr.bdetail td{background:var(--surface-2);padding:0}
.bdbox{padding:16px 18px;border-left:3px solid var(--amber)}
.bdbox .kv{margin:0}

/* ══ 갈래 전환 (블로그 / 리뷰) ══ */
.tracksw{display:flex;gap:3px;background:rgba(255,255,255,.09);border-radius:9px;
     padding:3px;margin:0 2px 12px}
.tracksw button{flex:1;background:none;border:0;color:var(--side-fg);font-size:12.5px;
     font-weight:700;padding:7px 4px;border-radius:7px;white-space:nowrap;transition:background .12s}
.tracksw button:hover{background:rgba(255,255,255,.07)}
.tracksw button.on{background:var(--amber);color:#0B1B26}

/* 리뷰 갈래일 때는 화면 전체가 하늘색으로 바뀝니다 — 지금 어느 일을 하는지 헷갈리지 않게 */
body.tk-review{
  --amber:#1B7FB8; --side-bg:#123B57; --side-on:#1A5A80; --brand:#123B57;
  --info:#1B6FA8; --info-bg:#E6F2FA;
}
@media (prefers-color-scheme:dark){
  body.tk-review{
    --amber:#5FB6E8; --side-bg:#0D1D28; --side-on:#17394F; --brand:#7FC4EC;
    --info:#7FC4EC; --info-bg:#132635;
  }
}
body.tk-review .brand .mk{background:var(--amber);color:#0B1B26}
body.tk-review .tracksw button.on{color:#fff}

/* 리뷰 구성 줄 */
.rvrow{display:flex;gap:6px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.rvrow .inp{padding:5px 8px;font-size:12.5px}

/* ── 달력 (진행 현황) ──
   신청한 달부터 마감까지, 며칠에 어떤 글이 올라갔는지 한눈에 봅니다.
   ⚠️ 같은 규칙이 status.html 안에도 따로 적혀 있습니다 (학원 화면은 바깥 파일을 안 씁니다) */
.pcal{display:flex;flex-direction:column;gap:20px}
.pcal-m{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.pcal-m > h4{font-size:14px;font-weight:800;padding:11px 14px;background:var(--surface-2);
     border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
.pcal-m > h4 small{font-weight:600;color:var(--muted);font-size:12px}
.pcal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.pcal-g > div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.pcal-g > div:nth-child(7n){border-right:0}
.pcal-hd{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center;padding:6px 0;
     background:var(--surface-2)}
.pcal-hd.sun{color:var(--bad)}
.pcal-d{min-height:78px;padding:5px 5px 7px;display:flex;flex-direction:column;gap:3px}
.pcal-d.out{background:var(--ground)}
.pcal-d.today{background:var(--amber-bg);box-shadow:inset 0 0 0 2px var(--amber)}
.pcal-n{font-size:11px;font-weight:700;color:var(--muted)}
.pcal-d.sun .pcal-n{color:var(--bad)}
.pcal-x{font-size:11px;line-height:1.35;border-radius:5px;padding:3px 5px;border:1px solid transparent;
     background:var(--ok-bg);color:var(--ok);word-break:break-all}
.pcal-x b{font-weight:800}
.pcal-x.plan{background:var(--ground);color:var(--muted);border-color:var(--line)}
.pcal-x.late{background:var(--bad-bg);color:var(--bad)}
.pcal-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);
     padding:9px 14px;border-top:1px solid var(--line);background:var(--surface-2)}
.pcal-leg{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;align-items:center;margin-bottom:12px}
.pcal-leg span{display:inline-flex;align-items:center;gap:5px}
.pcal-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}
@media(max-width:720px){
  .pcal-d{min-height:56px;padding:4px 3px}
  .pcal-x{font-size:10px;padding:2px 3px}
}

/* ── 진행 현황: 글 한 편이 지나가는 길 ── */
.stepline{display:flex;flex-wrap:wrap;align-items:stretch;gap:5px;margin-top:10px}
.stepar{align-self:center;color:var(--muted);font-size:13px}
.stepbox{display:flex;flex-direction:column;gap:2px;padding:6px 9px;border-radius:8px;
     border:1px solid var(--line);background:var(--surface);min-width:0}
.stepbox b{font-size:12.5px;white-space:nowrap}
.stepbox small{font-size:11px;color:var(--muted);line-height:1.35}
.stepbox.spending{background:var(--ground)}
.stepbox.sassigned,.stepbox.ssubmitted,.stepbox.sapproved{background:var(--info-bg);
     border-color:var(--info)}
.stepbox.srework{background:var(--bad-bg);border-color:var(--bad)}
.stepbox.spublished{background:var(--amber-bg);border-color:var(--amber)}
.stepbox.sverified{background:var(--ok-bg);border-color:var(--ok)}

/* 달력 칸 안의 「지금 단계」 */
.pcal-st{margin-top:2px;font-size:10px;font-weight:800;border-radius:3px;padding:1px 4px;
     display:inline-block;background:var(--ground);color:var(--muted)}
.pcal-st.sassigned,.pcal-st.swriting{background:var(--info-bg);color:var(--info)}
.pcal-st.ssubmitted{background:var(--amber-bg);color:var(--amber)}
.pcal-st.srework{background:var(--bad-bg);color:var(--bad)}
.pcal-st.sapproved{background:var(--info-bg);color:var(--info)}
.pcal-st.spublished,.pcal-st.sverified,.pcal-st.spaid{background:var(--ok-bg);color:var(--ok)}
@media(max-width:720px){ .pcal-st{font-size:9px} .stepbox small{display:none} }

/* ── 검수 중 「보는 중」 표시 ──
   원고를 열어만 보고 아직 승인·돌려보내기를 안 한 글. 내 브라우저에만 남습니다
   (localStorage). ⚠️ .sent(노란 줄, 다시 쓰기 이력)와 겹칠 수 있으므로 주황이 이깁니다 */
tr.seen td{background:var(--amber-bg)}
tr.seen td:first-child{box-shadow:inset 4px 0 0 var(--amber)}
.seenmark{background:var(--amber-bg);border-left:4px solid var(--amber);
     padding:1px 5px 1px 8px;border-radius:3px}