/* Purity UI(Chakra) 기반 — 카드 radius 15px / padding 22px / shadow 0 3.5px 5.5px rgba(0,0,0,.02),
   사이드바 260px 흰 카드, 배경 gray.50, 폰트 Roboto. 강조색만 주황.
   운영 화면이므로 본문 16px 기준으로 키우고 클릭 대상을 크게 잡는다. */


:root{
  --bg:#f7fafc; --card:#fff; --sunk:#fff;
  --ink:#1f2733; --mid:#5f6c7f; --dim:#64748b; --line:#e2e8f0; --soft:#edf2f7;
  --accent:#101010; --accent-hover:#000; --accent-soft:#f2f2f3; --accent-line:#d8d8db;
  --ok:#2f855a; --ok-soft:#f0fff4; --no:#c53030; --no-soft:#fff5f5;
  --warn:#8a6d3b; --warn-soft:#faf7f0;
  --r:15px; --r-sm:12px;
  --shadow:0 3.5px 5.5px rgba(0,0,0,.02);
  --shadow-lift:0 7px 23px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-game)}
body{font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── 레이아웃 ── */
.shell{display:flex;align-items:flex-start;gap:0}
.rail{width:212px;flex:none;background:var(--card);border-right:1px solid var(--line);
      padding:18px 12px;position:sticky;top:0;height:100vh;
      display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 14px;font-size:16px;font-weight:700}
.brand svg{width:20px;height:20px;color:var(--accent)}
.brand small{display:block;font-weight:400;color:var(--dim);font-size:13px;line-height:1.4}
.rail hr{border:0;border-top:1px solid var(--line);margin:0 0 14px}

.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);
     color:var(--mid);cursor:pointer;font-size:15px;font-weight:500;margin-bottom:3px;
     transition:box-shadow .18s,background .18s}
.nav .ib{width:30px;height:30px;border-radius:var(--r-sm);background:var(--soft);
         color:var(--accent);display:grid;place-items:center}
.nav:hover{background:var(--soft)}
.nav.on{background:var(--card);box-shadow:var(--shadow-lift);color:var(--ink);font-weight:700}
.nav.on .ib{background:var(--accent);color:#fff}
.nav .badge{margin-left:auto;background:var(--accent);color:#fff;font-size:13px;font-weight:700;
            min-width:26px;text-align:center;padding:2px 8px;border-radius:99px;
            font-variant-numeric:tabular-nums}
.nav .badge.zero{background:var(--soft);color:var(--dim);font-weight:500}
.rail-foot{margin-top:auto;background:var(--accent);color:#fff;border-radius:var(--r-sm);
           padding:12px 13px;font-size:13px;line-height:1.7;white-space:nowrap}
.rail-foot b{display:block;font-size:15px;margin-bottom:8px}
.rail-foot .kbd{background:rgba(255,255,255,.25);border-radius:6px;padding:2px 8px;font-size:13px}

main{flex:1;min-width:0;padding:22px 24px 60px;max-width:1600px}
.head{display:flex;align-items:center;gap:12px;margin-bottom:3px}
.head h1{font-size:24px;margin:0;font-weight:700;letter-spacing:-.5px}
.head .who{font-size:15px;color:var(--dim)}
.head-sub{color:var(--mid);font-size:14px;margin-bottom:16px}
.head-sub b{color:var(--ink);font-weight:700}
section{display:none} section.on{display:block}

/* ── 카드 ── */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
      padding:18px;margin-bottom:16px}
.card h2{font-size:12px;margin:0 0 14px;color:var(--dim);font-weight:700;letter-spacing:.6px;
         text-transform:uppercase;display:flex;align-items:center;gap:9px}
.card h2 svg{width:16px;height:16px;color:var(--accent)}
.card h2 .side{margin-left:auto;text-transform:none;letter-spacing:0;font-size:14px;
               color:var(--mid);font-weight:400}

/* ── 오늘 할 일: 큰 액션 카드 3개 ── */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:16px}
.act{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;
     display:flex;align-items:center;gap:14px;
     cursor:pointer;transition:box-shadow .18s,transform .18s;border:2px solid transparent}
.act:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.act.hot{border-color:var(--accent);background:var(--accent-soft)}
.act .ib{width:44px;height:44px;border-radius:var(--r-sm);background:var(--accent);color:#fff;
         display:grid;place-items:center;flex:none}
.act .ib svg{width:22px;height:22px}
.act h3{margin:0 0 2px;font-size:16px;font-weight:700}
.act p{margin:0;color:var(--mid);font-size:14px}

/* ── 통계 타일 ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px}
.tile{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:15px 17px;
      display:flex;align-items:center;justify-content:space-between;gap:14px}
.tile .lab{color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.3px;
           text-transform:uppercase;margin-bottom:6px}
.tile b{display:block;font-size:26px;font-weight:700;letter-spacing:-1px;
        font-variant-numeric:tabular-nums;line-height:1.1}
.tile .ib{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent);color:#fff;
          display:grid;place-items:center}
.tile .ib svg{width:21px;height:21px}
.tile.alert .ib{background:var(--warn)}

/* ── 요소 ── */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;
      padding:6px 13px;border-radius:99px;background:var(--soft);color:var(--mid);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.no{background:var(--no-soft);color:var(--no)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.pill.big{font-size:17px;font-weight:700;padding:8px 16px}

button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
       background:var(--accent);color:#fff;border:0;border-radius:999px;
       padding:10px 18px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;
       transition:background .18s,box-shadow .18s}
button:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--shadow-lift)}
button.ghost{background:var(--soft);color:var(--ink)}
button.ghost:hover:not(:disabled){background:#e2e8f0}
button.no{background:var(--no-soft);color:var(--no)}
button.no:hover:not(:disabled){background:#fed7d7}
button.sm{padding:8px 14px;font-size:14px}
button.wide{width:100%}
button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

input,select,textarea{background:#fff;color:var(--ink);border:1px solid var(--line);
       border-radius:var(--r-sm);padding:9px 12px;font:inherit;font-size:15px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent);
       box-shadow:0 0 0 3px var(--accent-soft)}
input[type=number]{width:92px}
textarea{width:100%;min-height:320px;line-height:1.8;resize:vertical}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
label{color:var(--mid);font-size:15px;font-weight:500}

.sw{position:relative;width:52px;height:30px;background:var(--line);border-radius:99px;
    cursor:pointer;transition:background .2s;flex:none}
.sw.on{background:var(--accent)}
.sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;
      transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sw.on i{transform:translateX(22px)}

.bar{height:8px;background:var(--soft);border-radius:99px;overflow:hidden;margin:16px 0 0}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s}
pre{background:var(--soft);border-radius:var(--r-sm);padding:16px;font-size:14px;line-height:1.75;
    max-height:260px;overflow:auto;white-space:pre-wrap;margin:16px 0 0;color:var(--mid);
    font-family:var(--font-game)}

/* ── 오늘 타임라인 ── */
.tl{display:flex;flex-direction:column;gap:8px}
.tl-i{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
      background:var(--soft);flex-wrap:wrap}
.tl-i.next{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-line)}
.tl-i.done{opacity:.55}
.tl-t{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;width:64px;flex:none}
.tl-d{flex:1 1 160px;min-width:0;color:var(--mid);font-size:15px}

/* ── 주간 ── */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{background:var(--soft);border-radius:var(--r-sm);padding:12px 6px;text-align:center}
.day.today{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.day .d{font-size:14px;color:var(--mid);font-weight:700;margin-bottom:10px}
.day.today .d{color:var(--accent)}
.day .t{font-size:16px;font-variant-numeric:tabular-nums;line-height:1.8;font-weight:500}
.day .off{font-size:14px;color:var(--dim);font-weight:400}

/* ── 시간대 설정 ── */
.wins{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.win{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:var(--r-sm);
     padding:14px 16px}
.win select{background:#fff;width:auto}
.days{display:flex;gap:10px;flex-wrap:wrap}
.dchip{width:48px;height:48px;border-radius:var(--r-sm);background:var(--soft);color:var(--mid);
       display:grid;place-items:center;cursor:pointer;font-weight:700;font-size:16px;
       transition:background .15s,color .15s}
.dchip.off{background:var(--accent);color:#fff}

/* ── 글 고르기: 미리보기 + 판단 2단 ── */
.pick{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
@media(max-width:1100px){.pick{grid-template-columns:1fr}}
/* ── 쓰레드 실물 미리보기 ──
   실제 앱 구조를 따른다: 왼쪽 아바타 열 + 세로 연결선, 오른쪽 본문,
   하단 액션 아이콘 4종. 구분 라벨은 프리뷰 '바깥'에 두어 실물 감각을 깨지 않는다. */
.tpwrap{max-width:520px}
.tpbar{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:13px;
       color:var(--mid);font-weight:600}
.tpbar .dotline{flex:1;height:1px;background:var(--line)}

.tp{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:4px 0;overflow:hidden}
body.dark .tp{background:var(--sunk);border-color:var(--line)}

.tpost{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px 16px 10px;
       position:relative}
.tpost .col{position:relative;display:flex;flex-direction:column;align-items:center}
.tpost .av{width:36px;height:36px;border-radius:50%;background:#e9e9ed;flex:none}
body.dark .tpost .av,body.dark .ava{background:var(--soft)}
/* 다음 글로 이어지는 세로선 — 쓰레드가 체인을 표현하는 방식 */
.tpost.linked .col::after{content:"";position:absolute;top:42px;bottom:-14px;width:2px;
                          background:#e4e4e7;border-radius:2px}
body.dark .tpost.linked .col::after{background:var(--line)}
.tpost .who{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.tpost .nm{font-weight:600;font-size:15px;letter-spacing:-.2px}
.tpost .tm{color:#999;font-size:14px}
.tpost .txt{font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;
            letter-spacing:-.1px}
.tpost .tag{display:inline-block;margin-top:8px;font-size:14px;color:#4a6ea8;font-weight:400}
body.dark .tpost .tag{color:#7dabf5}
.tpost .acts{display:flex;gap:16px;margin-top:12px;color:#111}
body.dark .tpost .acts{color:#e8e8e8}
.tpost .acts span{display:flex;align-items:center;gap:5px;font-size:13px;color:#666}
.tpost .acts svg{width:21px;height:21px;stroke-width:1.6;color:#111}
body.dark .tpost .acts svg{color:#e8e8e8}
.tpsep{height:1px;background:#efeff1;margin:0 16px}
body.dark .tpsep{background:var(--line)}

/* 접힘선 — 피드에서 잘리는 지점 */
.fold{border-top:1.5px dashed var(--accent-line);margin:9px 0;position:relative}
.fold::after{content:"여기부터 접힘";position:absolute;right:0;top:-10px;background:#fff;
             padding:0 8px;font-size:12px;color:var(--accent);font-weight:600}
body.dark .fold::after{background:var(--sunk)}
.tp-hidden{color:#8e8e93}

/* 글자수는 프리뷰 밖에 */
.tpmeta{display:flex;gap:8px;margin-top:8px;font-size:12.5px;color:var(--dim);
        justify-content:flex-end}
.tpmeta .over{color:var(--no);font-weight:700}

.judge .sc{display:flex;justify-content:space-between;align-items:center;
           padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.judge .sc:last-of-type{border:0}
.judge .sc b{font-variant-numeric:tabular-nums}
.gradebox{text-align:center;padding:20px 0 22px}
.gradebox .g{font-size:52px;font-weight:700;line-height:1;letter-spacing:-2px}
.gradebox .gt{color:var(--mid);font-size:16px;margin-top:6px}

.dim{color:var(--mid)}
.empty{color:var(--dim);font-size:16px;padding:44px 0;text-align:center}

/* ── 댓글 ── */
.thread{border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px}
.thread.hot{border-color:var(--accent);background:var(--accent-soft)}
.thread-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:16px;font-weight:500}
.rep{border-top:1px solid var(--line);padding:16px 0 0;margin-top:16px}
.rep-u{font-size:15px;font-weight:700}
.rep-t{font-size:14px;color:var(--dim);margin-left:8px}
.rep-b{margin:6px 0 12px;font-size:16px;white-space:pre-wrap}
.rep-in{display:flex;gap:10px}
.rep-in input{flex:1;background:#fff}

table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;color:var(--dim);font-weight:700;font-size:13px;padding:0 12px 14px;
   letter-spacing:.4px;text-transform:uppercase}
td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:middle}
td.num{font-variant-numeric:tabular-nums;color:var(--mid)}
a{color:var(--accent);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}


/* ─────────── 개선 사항 ─────────── */

/* 사이드바가 길어지면 자체 스크롤. 화면 밖으로 밀리지 않게 한다 */
.rail{overflow-y:auto;scrollbar-width:thin}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

/* 좁은 화면: 사이드바를 위로 접어 가로 배치 */
@media(max-width:1000px){
  .shell{flex-direction:column;gap:0}
  .rail{width:100%;position:static;height:auto;border-right:0;
        border-bottom:1px solid var(--line);
        flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:14px}
  .rail .brand,.rail hr,.rail-foot{display:none}
  .nav{margin:0;flex:1 1 auto;justify-content:center;padding:10px 12px}
  .nav .ib{display:none}
  main{padding:20px 16px 60px}
  .head h1{font-size:24px}
}

/* 미리보기 접힘선: pre-wrap 안에서 여백이 겹치지 않도록 블록으로 분리 */
.tp-b{display:block}
.tp-seen,.tp-hidden{display:block;white-space:pre-wrap}
.tp-hidden{color:var(--dim)}

/* 표 셀 말줄임 — 긴 첫 줄이 레이아웃을 밀지 않게 */
td.ell{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table{table-layout:fixed}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
       background:var(--ink);color:#fff;padding:14px 22px;border-radius:var(--r);
       font-size:16px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.18);
       opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;
       display:flex;align-items:center;gap:14px}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast button{padding:7px 14px;font-size:14px;background:var(--accent)}

/* 답글 완료 표시 */
.rep.done{opacity:.5}
.rep.done .rep-in{display:none}

/* 저장 안 된 변경 */
.dirty{background:var(--warn-soft);color:var(--warn)}

/* 로딩 */
.skel{background:linear-gradient(90deg,var(--soft) 25%,#f8fafc 50%,var(--soft) 75%);
      background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-sm);height:16px;
      margin-bottom:10px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 키보드 접근성. 흰 카드 위에서도 보이도록 진한 색으로 */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.act:focus-visible,.nav:focus-visible{box-shadow:var(--shadow-lift)}

/* 단축키 안내(검수 화면 인라인) */
.hint{display:flex;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:14px;margin-top:14px}
.hint .kbd{background:var(--soft);border-radius:6px;padding:2px 9px;font-weight:700;color:var(--mid)}

/* 500자 초과 경고 */
.overwarn{background:var(--no-soft);color:var(--no);border-radius:var(--r-sm);
          padding:12px 14px;font-size:15px;font-weight:500;margin-bottom:12px}


/* ─────────── 검수: 훑어보기 그리드 ─────────── */
.tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
       border-radius:var(--r);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:14px;
       position:sticky;top:0;z-index:20}
.tools .sp{margin-left:auto}
.tools .cnt{font-size:16px;font-weight:700}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media(max-width:1200px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
.gc{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;
    display:flex;flex-direction:column;gap:12px;cursor:pointer;border:2px solid transparent;
    transition:box-shadow .16s,border-color .16s}
.gc:hover{box-shadow:var(--shadow-lift)}
.gc.sel{border-color:var(--accent);background:var(--accent-soft)}
.gc-top{display:flex;align-items:center;gap:8px}
.gc-g{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
      font-weight:700;font-size:16px;color:#fff;flex:none}
.gc-hook{font-size:17px;line-height:1.6;white-space:pre-wrap;flex:1;
         display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.gc-more{color:var(--dim);font-size:14px}
.gc-meta{display:flex;gap:6px;flex-wrap:wrap}
.gc-meta .pill{font-size:12px;padding:3px 9px}
.gc-btns{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.gc-btns{flex-wrap:wrap}
.gc-btns button{flex:1 1 calc(50% - 3px);padding:10px;font-size:14px}
.chk{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);flex:none;
     display:grid;place-items:center;background:#fff}
.gc.sel .chk{background:var(--accent);border-color:var(--accent);color:#fff}
.chk svg{width:14px;height:14px;stroke-width:3;opacity:0}
.gc.sel .chk svg{opacity:1}

/* 자세히 보기 패널 */
.ov{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;z-index:60;
    justify-content:flex-end}
.ov.on{display:flex}
.panel{background:var(--bg);width:min(760px,100%);height:100%;overflow-y:auto;padding:26px;
       animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.panel-h{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.panel-h h2{margin:0;font-size:22px;flex:1}


/* 넓은 화면에서 오늘 화면을 2단으로 나눠 스크롤을 줄인다 */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:1180px){.cols{grid-template-columns:1fr}}
.cols .card{margin-bottom:0}
.cols>div{display:flex;flex-direction:column;gap:16px}


/* ── 전역 상태 배너 ── */
.banner{display:none;align-items:center;gap:12px;background:var(--no-soft);color:var(--no);
        border:1px solid #fcc;border-radius:var(--r);padding:14px 18px;margin-bottom:16px;
        font-size:15px;font-weight:500}
.banner.on{display:flex}
.banner b{font-weight:700}
.banner button{margin-left:auto;background:var(--no);padding:8px 14px;font-size:14px}

/* ── 자가진단 ── */
.hc{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);
    font-size:15px}
.hc:last-child{border:0}
.hc .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.hc.bad .dot{background:var(--no)}
.hc .nm{font-weight:500;width:130px;flex:none}
.hc .ms{color:var(--mid)}

/* ── 검수 진행률 ── */
.prog{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mid)}
.prog .track{width:120px;height:6px;background:var(--soft);border-radius:99px;overflow:hidden}
.prog .track i{display:block;height:100%;background:var(--accent)}

/* 카드 포커스(키보드 이동) */
.gc.cursor{outline:3px solid var(--accent);outline-offset:2px}
.gc .warn-tag{color:var(--warn);font-size:12px;font-weight:700}

/* ── 다크 모드 ──
   어두운 배경에서 주황을 그대로 깔면 진흙색이 된다. 면은 반투명 틴트로 얹고,
   글자·아이콘용 주황은 한 단계 밝힌다. 배경·카드·입력칸은 세 단계로 띄운다. */
body.dark{
  --bg:#0d1017; --card:#161a21; --soft:#1e242e; --sunk:#0a0d12;
  --ink:#e6eaf2; --mid:#a3adbd; --dim:#8794a6; --line:#262d38;
  --accent:#f5f5f6; --accent-hover:#fff;
  --accent-soft:rgba(255,255,255,.09); --accent-line:rgba(255,255,255,.24);
  --ok:#4ade80; --ok-soft:rgba(74,222,128,.13);
  --no:#f87171; --no-soft:rgba(248,113,113,.13);
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.13);
  --shadow:0 2px 6px rgba(0,0,0,.35); --shadow-lift:0 10px 30px rgba(0,0,0,.5);
}
body.dark .tp,body.dark .thread{background:var(--sunk);border-color:var(--line)}
body.dark .fold::after{background:var(--sunk)}
body.dark input,body.dark select,body.dark textarea{
  background:var(--sunk);color:var(--ink);border-color:var(--line)}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus{
  border-color:var(--accent-line)}

/* 밝은 주황 위의 흰 글씨는 대비가 모자란다. 어두운 글씨가 더 잘 읽힌다. */
body.dark button:not(.ghost):not(.icon):not(.sm):not(.tl-more):not(.nt-fix):not(.bell):not(.tl-time):not(.chk):not(.chip):not(.fb-chk),
body.dark button.sm:not(.ghost):not(.chip),
body.dark .btn{color:#111}
body.dark .nav.on .ib,body.dark .act .ib,body.dark .tile .ib,
body.dark .badge:not(.zero),body.dark .bell-n,body.dark .acct-n{color:#111}
body.dark .ava.ph{color:#111}

.themebtn{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;
          background:var(--card);border:1px solid var(--line);color:var(--mid);
          display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-lift);z-index:40}

/* 온보딩 */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
      background:var(--soft);font-size:15px}
.step.done{opacity:.5}
.step .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
         display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.step.done .n{background:var(--ok)}
.step button{margin-left:auto}

/* 시간대 막대 */
.hbar{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:8px}
.hbar div{flex:1;background:var(--accent-soft);border-radius:4px 4px 0 0;position:relative;
          min-height:3px}
.hbar div.hot{background:var(--accent)}
.hbar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:22px;text-align:center;font-size:10px;
           color:var(--dim)}

/* 카드: 전체 보기 · 약점 코멘트 */
.linkbtn{background:none;border:0;border-radius:0;color:var(--accent);font-size:13px;font-weight:700;
         padding:0;cursor:pointer;align-self:flex-start}
.linkbtn:hover{background:none;box-shadow:none;text-decoration:underline}
.gc-weak{background:var(--warn-soft);color:var(--warn);border-radius:9px;padding:10px 12px;
         font-size:13.5px;line-height:1.55}
.gc-hook{white-space:pre-wrap}

/* 태그 관리 */
.tagwrap{display:flex;gap:8px;flex-wrap:wrap}
.tagchip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);
         color:var(--accent);border:1px solid var(--accent-line);border-radius:99px;
         padding:7px 14px;font-size:14px;font-weight:600}
.tagchip button{background:none;border:0;color:var(--accent);padding:0;width:18px;height:18px;
                display:grid;place-items:center;cursor:pointer;opacity:.6}
.tagchip button:hover{background:none;box-shadow:none;opacity:1}
.tagchip button svg{width:13px;height:13px;stroke-width:2.5}


/* ── 댓글 응대: 쓰레드 스레드 뷰 구조 ── */
.thread{border:1px solid #e4e4e7;border-radius:16px;padding:0;overflow:hidden;margin-bottom:16px;
        background:#fff}
body.dark .thread{background:var(--sunk);border-color:var(--line)}
.thread.hot{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.thread-h{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:14px;
          border-bottom:1px solid #efeff1;font-weight:500;margin:0}
body.dark .thread-h{border-color:var(--line)}
.thread-h .src{color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rep{display:grid;grid-template-columns:34px 1fr;gap:11px;padding:14px 16px;
     border-top:1px solid #efeff1;margin:0}
body.dark .rep{border-color:var(--line)}
.rep:first-of-type{border-top:0}
.rep .rav{width:32px;height:32px;border-radius:50%;background:#e9e9ed}
body.dark .rep .rav{background:var(--soft)}
.rep-u{font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.rep-t{font-size:14px;color:#999;margin-left:6px;font-weight:400}
.rep-b{margin:3px 0 10px;font-size:15px;line-height:1.45;white-space:pre-wrap}
.rep-in{display:flex;gap:8px;align-items:center}
.rep-in input{flex:1;border-radius:999px;padding:9px 16px;font-size:14.5px;
              background:#f5f5f7;border-color:transparent}
body.dark .rep-in input{background:var(--soft)}
.rep-in input:focus{background:#fff;border-color:var(--accent)}
body.dark .rep-in input:focus{background:var(--sunk)}
.rep.done{opacity:.45}
.rep.done .rep-in{display:none}

/* 모바일에서 흐트러질 줄 표시 */
.tpost[data-long]{position:relative}
.tpost[data-long]::after{content:"긴 줄 " attr(data-long) "개";position:absolute;right:14px;top:12px;
  background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:99px}

/* 위험 안내 */
.banner.soft{background:var(--warn-soft);color:var(--warn);border-color:var(--accent-line)}
.banner.soft button{background:var(--warn)}
.hc.warn .dot{background:var(--warn)}
.hc{align-items:flex-start}
.hc .nm2{font-weight:700;margin-bottom:2px}
.hc .ms{font-size:14px;line-height:1.5}

/* 한 번에 만들고 올리기 */
.card.quick{border:2px solid var(--accent-line);background:var(--accent-soft)}
.card.quick .tp{background:#fff}
body.dark .card.quick{background:var(--accent-soft)}


/* ═══════ 사용성 개선 ═══════ */

/* 1. 처리 중 표시 — 버튼이 먹통처럼 보이지 않게 */
button.busy{position:relative;color:transparent!important;pointer-events:none}
button.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite}
button.ghost.busy::after{border-color:rgba(0,0,0,.2);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

/* 2. 방금 바뀐 항목 강조 */
@keyframes flash{0%{background:var(--accent-soft)}100%{background:transparent}}
.flash{animation:flash 1.2s ease-out}

/* 3. 카드 사라질 때 */
.gc.leaving{opacity:0;transform:scale(.96);transition:opacity .18s,transform .18s}

/* 4. 상단 고정 도구바에 그림자(스크롤 시 구분) */
.tools.stuck{box-shadow:0 4px 16px rgba(0,0,0,.08)}

/* 5. 빈 상태를 안내로 */
.empty-box{text-align:center;padding:40px 20px}
.empty-box .ico{width:56px;height:56px;border-radius:16px;background:var(--soft);
  display:grid;place-items:center;margin:0 auto 16px;color:var(--dim)}
.empty-box .ico svg{width:26px;height:26px}
.empty-box h3{margin:0 0 6px;font-size:17px}
.empty-box p{margin:0 0 18px;color:var(--mid);font-size:15px}

/* 6. 도움말 물음표 */
.help{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--soft);color:var(--dim);font-size:11px;font-weight:700;cursor:help;
  margin-left:6px}

/* 7. 단축키 안내 오버레이 */
.keys-ov{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;z-index:70;
  place-items:center}
.keys-ov.on{display:grid}
.keys-card{background:var(--card);border-radius:var(--r);padding:28px;max-width:460px;width:90%}
.keys-card h3{margin:0 0 18px;font-size:18px}
.keys-row{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.keys-row:last-child{border:0}
.keys-row kbd{background:var(--soft);border-radius:6px;padding:3px 9px;font-size:13px;
  font-weight:700;margin-left:4px}

/* 8. 스크롤 맨 위로 */
.totop{position:fixed;right:18px;bottom:76px;width:46px;height:46px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--mid);display:none;
  place-items:center;cursor:pointer;box-shadow:var(--shadow-lift);z-index:40}
.totop.on{display:grid}

/* 9. 표 행 hover */
tbody tr:hover{background:var(--soft)}

/* 10. 긴 작업 중 상단 진행 바 */
.topbar{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;
  transition:width .3s;z-index:80}

/* 11. 모바일에서 버튼 크게 */
@media(max-width:640px){
  button{padding:12px 18px;font-size:15px}
  .gc-btns button{flex:1 1 100%}
  .grid{grid-template-columns:1fr}
  main{padding:16px 12px 60px}
  .head h1{font-size:22px}
  .tiles{grid-template-columns:1fr 1fr}
  .week{grid-template-columns:repeat(4,1fr)}
}

/* 12. 선택 강조를 더 분명히 */
.gc.sel{box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-lift)}

/* ── 설정: 하루 24시간 막대 ── */
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.preset{background:var(--soft);border:1px solid transparent;border-radius:999px;
  padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;color:var(--mid)}
.preset:hover{background:#e2e8f0}
.preset.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

.daybar{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:44px;margin-bottom:6px}
.daybar div{background:var(--soft);border-radius:3px;cursor:pointer;transition:background .12s}
.daybar div:hover{background:#dde3ea}
.daybar div.on{background:var(--accent)}
.daybar div.edge{border-radius:6px}
.daybar div.bad{background:#f1d6d6}
.daylabels{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;
  font-size:10.5px;color:var(--dim);text-align:center;margin-bottom:20px}
.daylabels span{overflow:hidden}

.wins{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.win{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:var(--r-sm);
  padding:12px 14px;font-size:15px}
.win .rng{font-weight:700;font-variant-numeric:tabular-nums}
.win .cnt{color:var(--mid);font-size:13.5px}

.dchip{width:52px;height:52px;border-radius:var(--r-sm);background:var(--soft);color:var(--mid);
  display:grid;place-items:center;cursor:pointer;font-weight:700;font-size:16px;
  transition:background .15s,color .15s;position:relative}
.dchip:hover{background:#e2e8f0}
.dchip.off{background:var(--accent);color:#fff}
.dchip.off::after{content:"쉼";position:absolute;bottom:5px;font-size:9px;font-weight:600;opacity:.85}

/* 하단 고정 저장 바 */
.savebar{position:fixed;left:0;right:0;bottom:0;display:none;align-items:center;gap:14px;
  background:var(--card);border-top:1px solid var(--line);padding:14px 24px;z-index:45;
  box-shadow:0 -4px 20px rgba(0,0,0,.06);font-size:15px;font-weight:500}
.savebar.on{display:flex}
.savebar button:last-child{margin-left:auto}
.savebar span{color:var(--warn)}

/* 주간 칸: 배정 여부를 색으로 구분 */
.day .t div{padding:2px 0;border-radius:4px}
.day .t div.off{color:var(--dim);opacity:.55}
.day .t div.dim{opacity:.4}
.tl-i .tl-d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 글쓰기 규칙 편집 */
.prompt{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden}
.prompt-h{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  background:var(--soft);font-size:15px}
.prompt-h:hover{background:#e6ebf1}
.prompt-h .pname{font-weight:700}
.prompt-h .pdesc{color:var(--mid);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1}
.prompt-h .pchev{color:var(--dim)}
.prompt-b{display:none;padding:16px;background:var(--card)}
.prompt-b textarea{min-height:220px;font-size:14px;line-height:1.7;
  font-family:var(--font-game)}

/* 타임라인에서 시각 직접 수정 */
/* 시각은 직접 만든 선택기로 — 브라우저 기본 입력은 표기가 제각각이다 */
.tl-time{width:auto;min-width:104px;flex:0 0 auto;font-size:16px;font-weight:700;
  padding:8px 12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink);justify-content:flex-start}
.tl-time:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent-line);
  box-shadow:none}
body.dark .tl-time{background:var(--card)}
.tl-i{position:relative}
/* 줄 안에서 바로 바꾼다 — 띄우면 아랫줄과 겹친다 */
.tl-edit{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}
.tl-edit select{padding:7px 9px;font-size:14px;background:#fff}
body.dark .tl-edit select{background:var(--card)}
.tl-time:hover{border-color:var(--line)}
.tl-time:focus{border-color:var(--accent)}
body.dark .tl-time{background:var(--card)}
.tl-i.done .tl-time{opacity:.6}
.tl-a{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}


/* ── 홈 화면 여백 축소 ── */
#t-ops .card{padding:15px 16px;margin-bottom:12px}
#t-ops .card h2{margin-bottom:11px;font-size:11.5px}
#t-ops .cols{gap:12px}
#t-ops .cols>div{gap:12px}
#t-ops .acts{gap:12px;margin-bottom:12px}
#t-ops .act{padding:13px 15px;gap:12px}
#t-ops .act .ib{width:38px;height:38px}
#t-ops .act .ib svg{width:18px;height:18px}
#t-ops .act h3{font-size:15px}
#t-ops .act p{font-size:13.5px}
#t-ops .tiles{gap:12px;margin-bottom:12px}
#t-ops .tile{padding:13px 15px}
#t-ops .tile b{font-size:23px}
#t-ops .tile .ib{width:36px;height:36px}
#t-ops .tile .ib svg{width:18px;height:18px}
#t-ops .tl{gap:6px}
#t-ops .tl-i{padding:9px 12px}
#t-ops .hc{padding:9px 0}
#t-ops .hc .ms{font-size:13.5px}
#t-ops .card.quick{padding:16px 18px}
#t-ops .head-sub{margin-bottom:0}
main{padding-top:18px}
.head{margin-bottom:2px}
.head-sub{margin-bottom:12px}

/* ── 홈: 한 줄 요약 바 ── */
.strip{display:flex;gap:0;background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);padding:4px;margin-bottom:12px;flex-wrap:wrap}
.s-item{flex:1;min-width:110px;display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-radius:var(--r-sm);position:relative}
.s-item + .s-item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;
  width:1px;background:var(--line)}
.s-lab{font-size:11.5px;color:var(--dim);font-weight:700;letter-spacing:.2px}
.s-val{font-size:21px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.s-val .u{font-size:14px;color:var(--dim);font-weight:500}
.s-item.warn .s-val{color:var(--warn)}
.s-item.accent .s-val{color:var(--accent)}

/* ── 홈: 2단 / 3단 ── */
.cols.main2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.cols.main3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1180px){.cols.main2,.cols.main3{grid-template-columns:1fr}}
.cols.main3>.card{margin-bottom:0}
.auto-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* ── 접이식 부가 영역 ── */
.fold-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);
  padding:0;margin-bottom:12px;overflow:hidden}
.fold-card>summary{padding:14px 18px;cursor:pointer;font-size:14px;font-weight:700;
  color:var(--mid);list-style:none;display:flex;align-items:center;gap:8px}
.fold-card>summary::-webkit-details-marker{display:none}
.fold-card>summary::before{content:"▸";color:var(--dim)}
.fold-card[open]>summary::before{content:"▾"}
.fold-card>summary:hover{background:var(--soft)}
.fold-card .cols{padding:0 14px 14px}

/* 홈 액션 카드를 요약 바 아래 얇게 */
#t-ops .act{padding:12px 14px}
#t-ops .act h3{font-size:14.5px;margin:0 0 1px}
#t-ops .act p{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#t-ops .act .ib{width:34px;height:34px}
#t-ops .act .ib svg{width:16px;height:16px}
#t-ops .quick{border-width:2px}
#t-ops .tl-i{padding:8px 11px}
#t-ops .tl-t{font-size:16px}


/* 오늘 일정이 좁은 칼럼에 들어가도 잘리지 않게 */
@media(max-width:1400px){
  .cols.main2 .tl-i{gap:10px}
  .cols.main2 .tl-a{margin-left:auto}
}
@media(max-width:900px){
  .tl-time{min-width:140px}
  .tl-a{width:100%;margin-left:0;justify-content:flex-end}
}

/* 요약 바 항목을 눌러 이동 */
.s-item.go{cursor:pointer}
.s-item.go:hover{background:var(--soft)}
#checkfold .cols{padding:0 14px 14px}
#checkfold summary .pill{vertical-align:middle}

/* 오늘 올릴 글 개수 조절 */
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--soft);
  border-radius:999px;padding:2px}
.stepper button{background:transparent;color:var(--ink);padding:4px 10px;font-size:16px;
  font-weight:700;line-height:1;border-radius:999px;min-width:30px}
.stepper button:hover:not(:disabled){background:#fff;box-shadow:none}
.stepper .cnt{min-width:22px;text-align:center;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.card h2 .side{display:flex;align-items:center;gap:8px}
.tl-more{font-size:12.5px;color:var(--dim);padding:6px 12px}

/* 글별 자동 스위치 (작은 형태) */
.mini-sw{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12.5px;
  font-weight:700;color:var(--dim);background:var(--soft);border-radius:999px;padding:4px 10px 4px 5px}
.mini-sw i{width:28px;height:16px;background:var(--line);border-radius:999px;position:relative;
  transition:background .18s;flex:none}
.mini-sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;
  background:#fff;border-radius:50%;transition:transform .18s}
.mini-sw.on{color:var(--accent);background:var(--accent-soft)}
.mini-sw.on i{background:var(--accent)}
.mini-sw.on i::after{transform:translateX(12px)}
/* 전체 자동이 꺼져 있으면 글별 스위치를 흐리게 — 켜져 있어도 안 나간다는 뜻 */
.mini-sw.muted{opacity:.45}
.mini-sw.muted.on{opacity:.55}

/* 시각 선택기 — 세그먼트 + 증감 */
.seg{display:inline-flex;background:var(--soft);border-radius:999px;padding:2px}
.seg button{background:transparent;color:var(--mid);padding:6px 13px;font-size:13.5px;
  font-weight:700;border-radius:999px}
.seg button.on{background:var(--accent);color:#fff}
.seg button:hover:not(.on){background:#fff;box-shadow:none}
.numpick{display:inline-flex;align-items:center;background:var(--soft);border-radius:999px;
  padding:2px;gap:1px}
.numpick button{background:transparent;color:var(--ink);padding:5px 9px;font-size:15px;
  font-weight:700;border-radius:999px;min-width:28px}
.numpick button:hover{background:#fff;box-shadow:none}
.numpick b{min-width:44px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.tl-time.empty{color:var(--mid);background:transparent;border-color:transparent}
.tl-time.empty:hover{background:#fff;border-color:var(--accent-line);color:var(--accent)}

/* 규칙 편집 */
.prompt-b textarea{min-height:260px}
.pwarn{margin-top:10px}
.pwarn div{background:var(--warn-soft);color:var(--warn);border-radius:8px;
  padding:9px 12px;font-size:13.5px;margin-top:6px}
button.need{box-shadow:0 0 0 3px var(--accent-soft)}
.card h2 .side{flex-wrap:wrap}

/* 카드에서 전체 본문 보기 */
.gc-body{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto}
.gc-body::-webkit-scrollbar{width:5px}
.gc-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.gc-part{display:flex;flex-direction:column;gap:5px}
.gc-part + .gc-part{border-top:1px solid var(--line);padding-top:11px}
.gc-plabel{font-size:11px;font-weight:700;color:var(--dim);letter-spacing:.2px}
.gc-part:first-child .gc-plabel{color:var(--accent)}
.gc-text{font-size:15.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.gc-fold{border-top:1.5px dashed var(--accent-line);margin:8px 0;position:relative}
.gc-fold::after{content:"여기부터 접힘";position:absolute;right:0;top:-9px;background:var(--card);
  padding:0 6px;font-size:10.5px;color:var(--accent)}

/* 시각을 한 번 눌러 고른다 */
.tl-edit{flex:1;flex-wrap:nowrap;align-items:center;min-width:0}


/* 설정: 현재 상태 요약 */
.nowset{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ns-row{background:var(--soft);border-radius:var(--r-sm);padding:13px 15px}
.ns-k{display:block;font-size:12px;font-weight:700;color:var(--dim);margin-bottom:4px}
.ns-v{font-size:16px;font-weight:700}
.setlabel{font-size:13px;font-weight:700;color:var(--mid);margin-bottom:10px}

/* 프리셋을 설명과 함께 */
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  margin-bottom:4px}
.preset{display:flex;flex-direction:column;gap:2px;text-align:left;border-radius:var(--r-sm);
  padding:13px 15px;background:var(--soft);border:1.5px solid transparent;cursor:pointer}
.preset b{font-size:15px;color:var(--ink)}
.preset span{font-size:13px;color:var(--mid);font-variant-numeric:tabular-nums}
.preset .pd{font-size:12.5px;color:var(--dim)}
.preset.on{background:var(--accent-soft);border-color:var(--accent)}
.preset.on b{color:var(--accent)}

/* 시각을 눌러 바꿀 수 있다는 표시 */
.tl-time{display:inline-flex;align-items:center;gap:7px;
  border-bottom:2px solid var(--accent-line)}
.tl-time .pen{display:inline-flex;opacity:.45}
.tl-time .pen svg{width:14px;height:14px}
.tl-time:hover .pen{opacity:1}
.tl-time:hover{border-color:var(--accent)}
.tl-time.empty{border-bottom:2px dashed var(--line)}
.tl-time.empty:hover{border-bottom-color:var(--accent)}


/* ═══ 데스크톱 기준 정돈 ═══
   폭을 무조건 늘리면 읽기도 조작도 나빠진다. 요소마다 적정 폭을 준다. */

/* 모든 탭이 같은 폭·같은 여백을 쓴다. 탭마다 다르면 옮겨 다닐 때 흔들린다. */
main{max-width:1240px}
section{max-width:100%}
/* 글 읽는 영역만 문단 폭을 제한한다(폭이 넓으면 읽기 어렵다) */
.card .head-sub, .prompt-h .pdesc{max-width:820px}

/* 24시간 막대: 칸이 과하게 커지지 않게 */
.daybar, .daylabels{max-width:720px}
.daybar{height:38px}

/* 고른 시간대를 가로 칩으로 — 세로로 길게 늘어놓을 내용이 아니다 */
.wins{flex-direction:row;flex-wrap:wrap;gap:8px}
.win{padding:10px 14px;gap:9px;font-size:14.5px;background:var(--soft);width:auto}
.win .cnt{font-size:13px}
.win button{margin-left:2px !important;padding:5px 10px;font-size:13px}

/* 현재 설정 요약: 값이 길어도 한 줄 */
.nowset{grid-template-columns:repeat(4,minmax(0,1fr))}
.ns-v{font-size:15px;line-height:1.45}
@media(max-width:1100px){.nowset{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 프리셋 4개를 한 줄로 */
.presets{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.presets{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 요일 칩을 적정 크기로 */
.days{gap:8px}
.dchip{width:46px;height:46px;font-size:15px}

/* 설명 문단 폭 제한 — 한 줄이 너무 길면 읽기 어렵다 */
.card .head-sub{max-width:760px}

/* 표: 짧은 열만 줄바꿈을 막는다. 전부 막으면 표가 화면을 넘친다. */
th{white-space:nowrap}
td.num, td.act{white-space:nowrap}
td.ell{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table{table-layout:fixed;width:100%}

/* 이 시각에 넣을 글 고르기 */
.slotchoose{flex-basis:100%;order:9}
.slotpick{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);max-height:260px;overflow-y:auto}
.spick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;
  width:100%}
.spick:hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
.spick.on{background:var(--accent-soft);border-color:var(--accent)}
.sp-head{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.sp-meta{font-size:12px;color:var(--dim);font-weight:400}
body.dark .spick{background:var(--card)}


/* 표에서 첫 줄을 눌러 전체 보기 */
td.ell{cursor:pointer}
td.ell:hover{color:var(--accent)}
tr.open td.ell{max-width:none;overflow:visible;white-space:nowrap;color:var(--ink)}
tr.open{background:var(--accent-soft)}
tr.open td{vertical-align:top}
.rowfull{white-space:normal}
/* 표에서 펼친 본문 — 쓰레드 미리보기와 같은 결로 */
.rowfull{padding:12px 0 4px;cursor:default}
.rf-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0;max-width:600px;overflow:hidden}
body.dark .rf-box{background:var(--card)}
.rf-part{padding:14px 16px}
.rf-part + .rf-part{border-top:1px solid var(--line)}
.rf-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rf-label{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:var(--soft);color:var(--mid)}
.rf-label.main{background:var(--accent);color:#fff}
.rf-len{font-size:12px;color:var(--dim);margin-left:auto}
.rf-len.over{color:var(--no);font-weight:700}
.rf-text{font-size:15.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.rf-dim{color:var(--dim)}
.rf-fold{border-top:1.5px dashed var(--accent-line);margin:9px 0;position:relative}
.rf-fold::after{content:"여기부터 접힘";position:absolute;right:0;top:-9px;background:#fff;
  padding:0 7px;font-size:11px;color:var(--accent)}
body.dark .rf-fold::after{background:var(--card)}
.rf-close{padding:0 16px 12px;text-align:right}


/* ── 표 레이아웃 통일 ── */
table{table-layout:fixed;width:100%;border-collapse:collapse}
th{white-space:nowrap}
td{vertical-align:middle}
td.num{white-space:nowrap}
td.act{white-space:normal;text-align:right}
td.act button, td.act a{margin:2px 0 2px 6px}

/* 올릴 차례 / 올린 글 열 폭 */
#queue col.c-no,   #hist col.c-no{width:52px}
#queue col.c-time{width:240px}
#hist col.c-time{width:170px}
#queue col.c-act{width:230px}
#hist col.c-act{width:150px}
#queue td.act button{padding:7px 12px;font-size:13px}
#hist td.act button{padding:7px 12px;font-size:13px}

/* 작업 열 버튼은 줄바꿈되지 않게 */
td.act button, td.act a{white-space:nowrap}
td.act{text-align:right}
/* 카드 우측 설명은 좁으면 감춘다 — 오른쪽 끝에 붙어 보이는 것을 막는다 */
@media(max-width:1320px){.card h2 .side .longnote{display:none}}

/* 시각 직접 입력 (1분 단위) */
.tin{display:inline-flex;align-items:center;gap:5px;background:var(--soft);
  border-radius:999px;padding:4px 12px;flex:none}
.tin input{width:56px;text-align:center;font-size:15px;font-weight:700;padding:5px 4px;
  border:1px solid transparent;background:#fff;border-radius:8px}
.tin input:focus{border-color:var(--accent)}
.tin span{font-size:13.5px;font-weight:700;color:var(--mid)}


/* 올릴 차례 표 안에서 시각 편집 */
.qedit{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.qedit select{padding:6px 8px;font-size:13.5px}
.qedit .tin{padding:3px 9px}
.qedit .tin input{width:48px;font-size:14px;padding:4px 3px}
.tl-time.sm{font-size:14px;padding:6px 10px;min-width:0}
#queue col.c-act{width:250px}

/* 개수를 알 수 없을 때는 흐르는 막대로 — 가짜 퍼센트보다 정직하다 */
.bar.indet i{width:35% !important;animation:flow 1.1s ease-in-out infinite}
@keyframes flow{0%{margin-left:-35%}100%{margin-left:100%}}

/* 작업 열: 버튼이 두 개면 줄을 바꿔서라도 온전히 보이게 */
#queue td.act{white-space:normal;line-height:2.2}
#queue td.act button{margin:2px 0 2px 6px}

/* 뺀 글감 */
.hidden-topics{width:100%;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.hidden-topics .dim{font-size:13px;font-weight:700}
.tagchip.off{background:var(--soft);color:var(--dim);border-color:var(--line)}
.tagchip.off button{color:var(--dim);font-size:15px;font-weight:700}

/* 글 만들기 */
.mk-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mk-row > label{width:44px;flex:none;font-size:13px;font-weight:700;color:var(--mid);
  text-transform:none;letter-spacing:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:14px;font-weight:600;cursor:pointer;color:var(--mid)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
body.dark .chip{background:var(--card)}
.mk-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--accent-line)}
.mk-foot .dim{font-size:13px}
.mk-row select{flex:1;min-width:0}

/* 글감 자동 제안 */
.sug{margin-top:16px;padding:16px;background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:var(--r)}
.sug-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px}
.sug-head b{font-size:15px}
.sug-head button:nth-of-type(1){margin-left:auto}
.sug-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff;
  border-radius:var(--r-sm);margin-bottom:6px;cursor:pointer;font-size:15px}
.sug-item:hover{box-shadow:var(--shadow)}
.sug-item input{width:18px;height:18px;accent-color:var(--accent);margin:0}
body.dark .sug-item{background:var(--card)}

/* 계정 전환 */
.acct{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.acct-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);
  cursor:pointer;font-size:13.5px;color:var(--mid)}
.acct-row:hover{background:var(--soft)}
.acct-row.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.acct-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.acct-dot.off{background:var(--warn)}
.acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-n{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:99px}
.acct-row.add{color:var(--dim);font-size:13px}
.acct-row.add:hover{color:var(--accent)}
.gc-link{font-size:12px;color:var(--accent);background:var(--accent-soft);
  border-radius:8px;padding:6px 10px}

/* 카드에서 바로 고쳐쓰기 */
.gc.editing{border-color:var(--accent);background:var(--accent-soft)}
.gc-edit textarea{min-height:260px;font-size:15px;line-height:1.7;background:#fff}
body.dark .gc-edit textarea{background:var(--card)}
.dim.over, .gc-edit .over{color:var(--no);font-weight:700}

/* 커스텀 알림·확인 창 */
.modal-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;z-index:80;
  place-items:center;padding:20px}
.modal-ov.on{display:grid}
.modal{background:var(--card);border-radius:var(--r);padding:26px;max-width:460px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.22);animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.97);opacity:.6}to{transform:none;opacity:1}}
.modal h3{margin:0 0 12px;font-size:19px;letter-spacing:-.3px}
.modal-body p{margin:0 0 7px;font-size:15px;line-height:1.65;color:var(--mid)}
.modal-body p:empty{height:6px;margin:0}
.modal-input{width:100%;margin-top:14px;font-size:15px}
.modal-btns{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}

/* 카드 아이콘 버튼 */
.gc-btns button.icon{flex:0 0 42px;padding:8px 0;display:grid;place-items:center;
  background:var(--soft);color:var(--mid)}
.gc-btns button.icon:hover{background:#e2e8f0;color:var(--ink)}
.gc-btns button.icon svg{width:17px;height:17px}
.gc-btns button:not(.icon){flex:1 1 auto}

/* 태그를 분명히 */
.tagpick{display:flex;flex-direction:column;gap:10px}
.tagpick-now{font-size:22px;font-weight:700;color:var(--accent);letter-spacing:-.4px}

/* 계정 전환 창 */
.swap{display:flex;align-items:stretch;gap:12px;margin-bottom:16px}
.swap-card{flex:1;background:var(--soft);border-radius:var(--r-sm);padding:14px;
  border:2px solid transparent}
.swap-card.to{background:var(--accent-soft);border-color:var(--accent)}
.swap-label{font-size:11.5px;font-weight:700;color:var(--dim);margin-bottom:5px}
.swap-card.to .swap-label{color:var(--accent)}
.swap-name{font-size:17px;font-weight:700;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swap-meta{font-size:12.5px;color:var(--mid);margin-top:3px}
.swap-arrow{align-self:center;color:var(--dim);font-size:20px;font-weight:700}
.modal-btns button{white-space:nowrap}

/* 카드 맨 위 태그 — 등급보다 먼저 눈에 들어와야 한다 */
.gc-tag{background:var(--accent-soft);color:var(--accent);font-weight:700;
  font-size:13.5px;padding:5px 11px;border-radius:999px;letter-spacing:-.2px;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-tag.none{background:#fdeaea;color:#c53030}
.gc-top .gc-g{margin-left:auto;width:24px;height:24px;font-size:12px;opacity:.85}

/* 시각 다시 뽑기(주사위) */
.dice #dice-face{font-size:15px;line-height:1;margin-right:2px}
.dice-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dice-row{display:flex;gap:12px;align-items:baseline;background:var(--soft);
  padding:9px 12px;border-radius:var(--r-sm)}
.dice-row b{color:var(--accent);font-size:14.5px;min-width:64px}
.dice-row span{font-size:13.5px;color:var(--mid);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── 오늘 타임라인 v2 ── */
.tl-sum{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.tl-bar{height:5px;background:var(--soft);border-radius:999px;overflow:hidden}
.tl-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;
  transition:width .35s ease}
.tl-sumtx{font-size:13px;color:var(--mid);display:flex;align-items:center;gap:6px;
  flex-wrap:wrap}
.tl-sumtx b{color:var(--ink);font-weight:700}
.tl-sumtx .dot{width:3px;height:3px;border-radius:50%;background:var(--dim);
  display:inline-block;margin:0 3px}

.tl-i{display:flex;align-items:center;gap:14px;padding:13px 15px;
  border-radius:var(--r-sm);background:var(--soft);margin-bottom:9px;
  border:1.5px solid transparent;flex-wrap:wrap}
.tl-i.blank{background:transparent;border:1.5px dashed var(--line)}
.tl-i.next.filled{background:var(--accent-soft);border-color:var(--accent)}
.tl-i.next.blank{border-color:var(--accent);border-style:dashed}
.tl-i.done{opacity:.5}

.tl-when{display:flex;flex-direction:column;gap:2px;min-width:104px}
.tl-when.wide{min-width:0;flex:1}
.tl-time{background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:6px 10px;font-size:15px;font-weight:700;letter-spacing:-.3px;
  display:flex;align-items:center;gap:5px;cursor:pointer;color:var(--ink)}
.tl-time:hover{border-color:var(--accent);color:var(--accent)}
.tl-time.empty{background:transparent;color:var(--mid)}
.tl-time .pen{opacity:0;display:flex}
.tl-time .pen svg{width:12px;height:12px}
.tl-i:hover .tl-time .pen{opacity:.45}
.tl-in{font-size:11.5px;color:var(--dim);padding-left:3px}
.tl-i.next .tl-in{color:var(--accent);font-weight:700}

.tl-c{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px}
.tl-post{font-size:14.5px;font-weight:600;letter-spacing:-.3px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-post.dim{font-weight:500;color:var(--mid)}
.tl-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gc-tag.sm{font-size:12px;padding:3px 8px;max-width:150px}

.tl-a{display:flex;align-items:center;gap:7px;flex-shrink:0}
.peek{max-height:58vh;overflow:auto;margin-bottom:6px}

.tl-more{width:100%;background:transparent;border:1px dashed var(--line);
  color:var(--mid);font-size:12.5px;padding:8px;border-radius:var(--r-sm);
  cursor:pointer;font-weight:600}
.tl-more:hover{border-color:var(--accent);color:var(--accent)}

/* 타임라인 한 줄은 한 줄로 — 액션이 아래로 떨어지면 어느 글 것인지 헷갈린다 */
.tl-i{flex-wrap:nowrap}
.tl-c{min-width:0}
.tl-a button.icon{flex:0 0 32px;height:32px;padding:0;display:grid;
  place-items:center;background:#fff;border:1px solid var(--line);
  color:var(--mid);border-radius:9px}
.tl-a button.icon:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.tl-a button.icon svg{width:15px;height:15px}
.tl-a .mini-sw{flex-shrink:0}
@media(max-width:880px){
  .tl-i{flex-wrap:wrap}
  .tl-a{width:100%;justify-content:flex-end}
}

/* 글 고르기 서랍이 같은 flex 줄에 끼어 칸을 먹던 문제 — 줄과 서랍을 분리한다 */
.tl-i{display:block}
.tl-row{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.tl-row .slotchoose{display:none}
.tl-i > .slotchoose:not(:empty){margin-top:12px}
@media(max-width:880px){ .tl-row{flex-wrap:wrap} }

/* 프로필 사진 — 계정 구분용 */
.ava{border-radius:50%;object-fit:cover;flex:none;display:inline-block;
  background:#e9e9ed;vertical-align:middle}
.ava.ph{display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),#f0995a);letter-spacing:-.5px}
.acct-row .ava{margin-right:2px}
.swap-card .ava{margin-bottom:8px}
.tpost .col .ava{width:36px;height:36px}

/* 한 줄 요약이 두 줄로 접히면 줄 높이가 들쭉날쭉해진다 */
.tl-sub{flex-wrap:nowrap;overflow:hidden}
.tl-sub .pill{flex:none}
.tl-sub .pill.accent{background:var(--accent-soft)}
.tl-sub .gc-tag{flex:none}
.tl-when{min-width:96px}

/* 계정 줄 — 초록 점 대신 프로필 사진으로 구분한다 */
.acct-dot{display:none}
.acct-ava{display:flex;flex:none}
.acct-ava.off .ava{filter:grayscale(1);opacity:.45}

/* 네비바 폭 — 계정 이름이 잘리지 않게 */
.rail{width:250px}
.acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 면으로 그린 로고는 전역 svg 규칙(선 그리기)에 걸려 깨진다 */
svg.glyph{fill:currentColor !important;stroke:none !important}

/* ── 상단 알림(점검) ── */
.bellwrap{position:relative}
.bell{background:transparent;border:1px solid var(--line);border-radius:10px;
  width:36px;height:34px;display:grid;place-items:center;cursor:pointer;
  color:var(--mid);padding:0;position:relative}
.bell:hover{border-color:var(--accent);color:var(--accent)}
.bell.has{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
.bell svg{width:17px;height:17px}
.bell-n{display:none}
.bell-n.on{display:grid;place-items:center;position:absolute;top:-6px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);
  color:#fff;font-size:11px;font-weight:800;border:2px solid var(--card)}
.bell-n.bad{background:var(--no)}

.notices{display:none;position:absolute;right:0;top:calc(100% + 10px);width:380px;
  max-height:min(66vh,560px);overflow:auto;background:var(--card);z-index:60;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 44px rgba(15,23,42,.14)}
.notices.on{display:block}
.nt-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.nt-head b{font-size:15px}
.nt-head .dim{font-size:12.5px;flex:1}
.nt{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line);
  align-items:flex-start}
.nt:last-child{border-bottom:0}
.nt .dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none;margin-top:6px}
.nt.warn .dot{background:var(--accent)}
.nt.bad .dot{background:var(--no)}
.nt.ok .dot{background:#2f855a}
.nt-kind{font-size:11px;font-weight:700;color:var(--dim);margin-bottom:3px}
.nt-t{font-size:13.5px;font-weight:600;line-height:1.4}
.nt-w{font-size:12.5px;color:var(--mid);margin-top:3px;line-height:1.45}
.nt-fix{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:5px;
  background:none;border:0;padding:0;cursor:default;text-align:left}
button.nt-fix{cursor:pointer;text-decoration:underline}
@media(max-width:640px){ .notices{width:min(92vw,380px)} }

/* 화면을 더 넓게 */
main{max-width:1920px}

/* 넓은 화면 — 폭만 늘리고 비율은 유지한다.
   카드가 한없이 늘어나면 한 줄이 너무 길어져 오히려 읽기 어렵다. */
main{max-width:1760px}
@media(min-width:1560px){
  .cols.main2{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tl-when{min-width:112px}
  .tl-post{font-size:15px}
}
@media(min-width:1860px){ main{padding-left:40px;padding-right:40px} }

/* ── 계정이 여러 개일 때 ── */
.acct-row{align-items:center;gap:10px}
.acct-c{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.acct-name{font-size:14px;font-weight:600}
.acct-row.on .acct-name{font-weight:700}
.acct-sub{font-size:11.5px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acct-row.on .acct-sub{color:var(--accent)}

/* 지금 어느 계정에 올리는지 헤더에서도 얼굴로 확인한다 */
.head .who{display:inline-flex;align-items:center;gap:7px}

/* 빈 화면 일러스트 */
.empty-box .ico{width:120px;height:120px;border-radius:0;background:none;margin-bottom:6px}
.empty-box .ico .art{width:120px;height:120px;display:block}
body.dark .empty-box .ico .art{opacity:.92}

/* 다크에서 시각 버튼이 배경에 묻혔다 */
body.dark .tl-time{background:var(--soft);color:var(--ink);border-color:var(--line)}
body.dark .tl-time:hover{border-color:var(--accent);color:var(--accent)}
body.dark .tl-i.next.filled,body.dark .tl-i.next.blank{border-color:var(--accent-line)}
body.dark .tl-a button.icon{background:var(--soft);border-color:var(--line)}
body.dark .bell{border-color:var(--line)}
body.dark .notices{box-shadow:0 20px 50px rgba(0,0,0,.6)}

/* ── 만드는 중 진행 화면 ── */
.mkjob{margin-top:16px;padding:16px;background:var(--card);border:1px solid var(--accent-line);
  border-radius:var(--r-sm)}
.mkjob-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.mkjob-pct{font-size:30px;font-weight:800;color:var(--accent);letter-spacing:-1.5px;
  line-height:1;min-width:66px;font-variant-numeric:tabular-nums}
.mkjob-pct small{font-size:15px;font-weight:700;margin-left:1px}
.mkjob-now{flex:1;min-width:0}
.mkjob-stage{font-size:15px;font-weight:700;letter-spacing:-.3px}
.mkjob-meta{font-size:12.5px;color:var(--mid);margin-top:3px}
.mkjob .bar{height:7px;background:var(--soft);border-radius:99px;overflow:hidden;
  display:block;margin-bottom:14px}
.mkjob .bar i{display:block;height:100%;background:var(--accent);border-radius:99px;
  transition:width .5s ease}

.mkjob-steps{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.mkstep{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);
  white-space:nowrap}
.mkstep-n{width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--dim);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.mkstep-n svg{width:11px;height:11px}
.mkstep.done{color:var(--mid)}
.mkstep.done .mkstep-n{background:var(--ok-soft);color:var(--ok)}
.mkstep.now{color:var(--accent);font-weight:700}
.mkstep.now .mkstep-n{background:var(--accent);color:#fff;
  animation:mkpulse 1.4s ease-in-out infinite}
@keyframes mkpulse{0%,100%{box-shadow:0 0 0 0 var(--accent-line)}
                   50%{box-shadow:0 0 0 5px transparent}}
.mkstep-line{flex:1;min-width:10px;height:1.5px;background:var(--line);margin:0 8px}

.mkjob-log{margin-top:14px}
.mkjob-log summary{font-size:12.5px;color:var(--dim);cursor:pointer}
.mkjob-log pre{margin:8px 0 0;max-height:150px;overflow:auto;font-size:11.5px;
  background:var(--soft);padding:10px;border-radius:8px;color:var(--mid);
  white-space:pre-wrap;word-break:break-all}
body.dark .mkjob{background:var(--sunk)}
/* 배지는 버튼 밖(감싼 칸)에 두어야 버튼이 잘린 것으로 잡히지 않는다 */
.bellwrap{display:inline-flex}
.bell-n.on{top:-5px;right:-5px;pointer-events:none}

/* 넓은 화면에서 설명 문단이 한 줄로 늘어지면 읽기 힘들다 */
@media(min-width:1400px){
  .card > .dim, .card > p, .head-sub, .mk-note, .empty-box p{max-width:78ch}
}
body.dark .tl-more{color:var(--mid);border-color:var(--line)}
body.dark .tl-more:hover{color:var(--accent);border-color:var(--accent-line)}
.gc-url{display:block;margin-top:4px;font-size:12px;color:var(--mid);
  word-break:break-all;font-weight:500}
.gc-link.off{background:var(--soft);color:var(--dim)}

/* 넓은 화면에서 표가 통째로 늘어나면 칸 사이가 멀어 읽기 힘들다 */
@media(min-width:1400px){
  #t-stats table{max-width:1080px}
  #t-stats .card > h2{max-width:1080px}
}

/* 자동으로 붙는 링크는 본문 안 실제 자리에 그린다(글쓴 사람이 쓴 줄과 구분되게) */
.gc-tail{display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--accent-line);
  color:var(--accent);font-weight:500;white-space:pre-wrap;word-break:break-all;position:relative}
.gc-tail::after{content:'자동으로 붙습니다';position:absolute;right:0;top:-8px;
  background:var(--card);padding:0 5px;font-size:10.5px;color:var(--dim);font-weight:600}

/* 글 고르기 카드의 태그 — 나머지 칩과 확실히 달라 보이게 (채운 주황) */
.gc-top .gc-tag{background:var(--accent);color:#fff;font-size:15px;font-weight:800;
  padding:7px 14px;letter-spacing:-.3px;box-shadow:none;
  max-width:210px}
.gc-top .gc-tag.none{background:var(--no);color:#fff;box-shadow:none}
body.dark .gc-top .gc-tag{color:#1b0f04;box-shadow:none}
body.dark .gc-top .gc-tag.none{color:#fff}
/* 태그가 주인공이 되도록 옆 칩들은 한 톤 낮춘다 */
.gc-top .pill{font-size:12.5px;padding:4px 10px;background:transparent;
  border:1px solid var(--line);color:var(--mid)}
.gc-top .pill.accent{border-color:var(--accent-line);color:var(--accent);background:transparent}
.gc-top .pill.warn{border-color:var(--warn);color:var(--warn)}
.gc-top .pill.no{border-color:var(--no);color:var(--no)}
.gc-tag-ar{opacity:.65;margin-right:5px;font-weight:700}
.tagpick-now .gc-tag-ar{opacity:.5}
/* 칩이 많은 카드에서 태그가 '→'만 남고 잘리던 문제 */
.gc-top{flex-wrap:wrap;row-gap:8px}
.gc-top .gc-tag{flex:none;max-width:none}

/* 올리기 목록의 버리기 — 파괴적인 동작이니 눈에 덜 띄게 */
td.act button.icon{background:transparent;border:1px solid var(--line);color:var(--dim);
  width:34px;height:34px;padding:0;display:inline-grid;place-items:center;border-radius:9px}
td.act button.icon:hover{border-color:var(--no);color:var(--no);background:var(--no-soft)}
td.act button.icon svg{width:15px;height:15px}
body.dark td.act button.icon{background:var(--soft);border-color:var(--line)}

/* 브랜드를 누르면 오늘로 — 로고는 홈 버튼이라고 기대한다 */
.brand{cursor:pointer;border-radius:10px;transition:background .15s}
.brand:hover{background:var(--soft)}

/* ═══════════════════════════════════════════════════════════
   고급감 패스 — 색을 늘리지 않고 타이포·여백·경계·모션으로 올린다.
   흑백 한 축이라 밀도와 리듬이 곧 품질이 된다.
   ═══════════════════════════════════════════════════════════ */

/* 1. 글자 — Roboto는 한글이 없어 시스템 한글 폰트로 떨어진다.
      한글을 앞에 두고 자간을 좁혀 화면이 정돈돼 보이게 한다. */
html,body{
  font-family:var(--font-game);
  letter-spacing:-0.014em;
  font-feature-settings:'ss01','cv01','tnum';
}
h1,h2,h3,.tl-time,.mkjob-pct,.s-val,.tile b,.gc-tag{letter-spacing:-0.03em}
.num,.tl-in,.acct-sub,.s-val,.mkjob-pct{font-variant-numeric:tabular-nums}

/* 2. 표면 — 그림자 대신 얇은 경계와 아주 옅은 층으로 띄운다 */
:root{
  --line:#e8e8ec; --soft:#f4f4f6; --bg:#fafafa;
  --ink:#111114; --mid:#5c5c66; --dim:#9a9aa4;
  --shadow:0 1px 2px rgba(17,17,20,.04);
  --shadow-lift:0 8px 28px rgba(17,17,20,.08), 0 2px 6px rgba(17,17,20,.04);
  --r:14px; --r-sm:10px;
}
.card{border:1px solid var(--line);box-shadow:none}
.card:hover{border-color:#dcdce2}
.rail{border-right:1px solid var(--line);background:#fff}

/* 3. 위계 — 제목은 크고 얇게, 본문은 차분하게 */
.head h1{font-size:27px;font-weight:700;letter-spacing:-.045em}
.card>h2{font-size:13px;font-weight:700;color:var(--dim);
  text-transform:none;letter-spacing:0;margin-bottom:16px}
.head-sub{color:var(--mid)}

/* 4. 버튼 — 눌리는 느낌을 만든다 */
button{transition:background .16s ease,border-color .16s ease,
  transform .08s ease,box-shadow .16s ease}
button:active{transform:translateY(1px)}
button:not(.ghost):not(.icon):not(.sm):not(.tl-more):not(.nt-fix):not(.bell){
  box-shadow:0 1px 2px rgba(17,17,20,.12)}
.ghost{border:1px solid var(--line);background:#fff}
.ghost:hover{border-color:#c9c9d2;background:#fff}

/* 5. 사이드바 — 선택된 항목만 검게, 나머지는 조용하게 */
.nav{border-radius:10px;transition:background .15s ease}
.nav .ib{background:transparent;color:var(--dim)}
.nav:hover .ib{color:var(--mid)}
.nav.on{background:var(--ink);color:#fff;box-shadow:none;font-weight:600}
.nav.on .ib{background:transparent;color:#fff}
.nav.on .badge{background:#fff;color:var(--ink)}
.acct-row{border-radius:10px}
.acct-row.on{background:var(--soft)}

/* 6. 숫자 띠 — 대시보드의 첫인상 */
.strip{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.s-val{font-size:26px;font-weight:700;letter-spacing:-.05em}
.s-lab{font-size:12.5px;color:var(--dim);font-weight:500}

/* 7. 오늘 타임라인 — 다음 차례만 도드라지게 */
.tl-i{border:1px solid transparent;background:var(--soft)}
.tl-i.next.filled{background:#fff;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(17,17,20,.05)}
.tl-i.blank{background:#fff;border:1px dashed var(--line)}
.tl-time{border-color:var(--line);font-variant-numeric:tabular-nums}
.tl-i.next .tl-time{border-color:var(--ink)}
.tl-bar i{background:var(--ink)}

/* 8. 글 카드 — 읽는 화면이므로 본문 리듬을 살린다 */
.gc{border:1px solid var(--line);box-shadow:none;transition:border-color .16s ease}
.gc:hover{border-color:#c9c9d2}
.gc-text{line-height:1.62}
.gc-plabel{font-size:11px;letter-spacing:.02em;color:var(--dim);font-weight:600}

/* 9. 알림 패널 */
.notices{border-radius:var(--r);box-shadow:var(--shadow-lift)}
.bell.has{background:var(--ink);color:#fff;border-color:var(--ink)}
.bell-n.on{background:var(--ink);border-color:#fff}
.bell-n.bad{background:var(--no)}

/* 10. 다크 — 검정 한 축이라 층만 정확히 나누면 된다 */
body.dark{
  --bg:#0b0b0d; --card:#141417; --soft:#1b1b1f; --sunk:#08080a;
  --line:#26262c; --ink:#f0f0f3; --mid:#a0a0aa; --dim:#6a6a74;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lift:0 12px 36px rgba(0,0,0,.6);
}
body.dark .rail{background:var(--card)}
body.dark .card:hover{border-color:#33333b}
body.dark .nav.on{background:#fff;color:#111}
body.dark .nav.on .ib{color:#111}
body.dark .nav.on .badge{background:#111;color:#fff}
body.dark .tl-i.next.filled{background:var(--soft);border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.07)}
body.dark .ghost{background:var(--soft);border-color:var(--line)}
body.dark .bell.has{background:#fff;color:#111;border-color:#fff}
body.dark .bell-n.on{background:#fff;color:#111;border-color:var(--card)}

/* 마무리 다듬기 */
/* 글 만들기 카드가 회색 덩어리로 보였다. 흰 카드에 얇은 테두리로 */
.card.quick,#t-ops .cols.main2>.card:last-child{background:#fff;border:1px solid var(--line)}
body.dark .card.quick,body.dark #t-ops .cols.main2>.card:last-child{background:var(--card)}

/* 등급 배지 — 색점 하나로 충분하다. 흑백 화면에서 원색이 튄다 */
.gc-g{width:22px;height:22px;font-size:11px;font-weight:700;opacity:.9}
.gc-top .gc-g{margin-left:auto}

/* 고정폭 필드가 제각각이라 줄이 안 맞았다 */
.tools select,.tools input{height:38px;border-radius:10px;border:1px solid var(--line)}
select{border-radius:10px;border:1px solid var(--line);background:#fff}
body.dark select{background:var(--sunk)}
input,textarea{border-radius:10px;border:1px solid var(--line)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(17,17,20,.06)}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus{
  border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* 접힘 안내선 — 점선이 굵어 시선을 뺏었다 */
.gc-fold,.fold{border-top:1px dashed var(--line)}
.gc-fold::after,.fold::after{color:var(--dim);font-size:10.5px}

/* 링크 안내 줄 */
.gc-link{background:var(--soft);color:var(--mid);font-size:12.5px;border-radius:8px}
.gc-link.off{background:transparent;border:1px dashed var(--line)}

/* 토글 */
.sw,.mini-sw{transition:background .18s ease}
.sw.on,.mini-sw.on{background:var(--ink)}
body.dark .sw.on,body.dark .mini-sw.on{background:#fff}
body.dark .mini-sw.on span{color:#111}
body.dark .mini-sw.on i{background:#111}

/* 화면 전환을 아주 짧게 — 있는 듯 없는 듯 */
main section.on{animation:fadeUp .18s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* 다크에서 흰 배경을 박아 둔 곳들 — 글자가 안 보였다 */
body.dark .strip{background:var(--card);border-color:var(--line)}
body.dark .ghost:hover{border-color:#3a3a44}
body.dark .tl-time{background:var(--soft);color:var(--ink);border-color:var(--line)}
body.dark .tl-i.next .tl-time{border-color:#fff;color:#fff}
body.dark .tl-i.blank{background:transparent;border-color:var(--line)}
body.dark .gc-link{background:var(--soft);color:var(--mid)}
body.dark .card:hover{border-color:#33333b}
body.dark .acct-row.on{background:var(--soft)}
body.dark .tl-time.empty{background:transparent;color:var(--mid);border-color:var(--line)}
body.dark .tl-time.empty:hover{color:#fff;border-color:#fff}

/* ── 미리보기: 쓰레드 실물에 가깝게 ── */
.tpwrap{max-width:560px}
.tpbar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);
  margin-bottom:10px;font-weight:600}
.tpbar-dot{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.tp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:2px 0;overflow:visible}
body.dark .tp{background:var(--sunk);border-color:var(--line)}

.tpost{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px 16px;border:0}
.tpost + .tpost{padding-top:2px}
.tpost .col{position:relative;display:flex;flex-direction:column;align-items:center}
.thread-line{position:absolute;top:44px;bottom:-18px;width:2px;background:var(--line);
  border-radius:2px}
.tpost.linked .col::after{display:none}
.tpsep{display:none}

.tpost .who{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.tpost .nm{font-weight:700;font-size:15px;letter-spacing:-.02em}
.tpost .tm{color:var(--dim);font-size:14px;font-weight:400}
.tp-more{margin-left:auto;color:var(--dim);letter-spacing:1px;font-size:13px}
.tpost .txt{font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  color:var(--ink);border:0;padding:0}
.tp-hidden{display:none}
.tpost.open .tp-hidden{display:inline}
.tp-fold{display:block;background:none;border:0;padding:4px 0 0;color:var(--dim);
  font-size:14px;cursor:pointer;box-shadow:none;font-weight:400}
.tp-fold:hover{color:var(--mid)}
.tpost.open .tp-open,.tpost:not(.open) .tp-close{display:none}
.tpost .tag{display:inline-block;margin-top:8px;font-size:14px;color:#5b7fb8;font-weight:400}
body.dark .tpost .tag{color:#7dabf5}
.tpost .acts{display:flex;gap:18px;margin-top:12px;color:var(--ink);opacity:.85}
.tpost .acts svg{width:19px;height:19px;stroke-width:1.7}
.tpmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--dim)}
.tpmeta span{background:var(--soft);padding:4px 9px;border-radius:7px}
.tpmeta .over{background:var(--no-soft);color:var(--no);font-weight:600}

/* ── 올리기 표: 시각이 두 줄로 깨졌다 ── */
#queue td:nth-child(3){white-space:nowrap}
.tl-time.sm{white-space:nowrap;font-size:13.5px;padding:6px 10px}

/* ── 오늘 올릴 글: 한 장의 일정표처럼 ── */
.tl{display:flex;flex-direction:column;gap:0}
.tl-i{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.tl-i + .tl-i{border-top:1px solid var(--line)}
.tl-row{padding:14px 4px;gap:16px;align-items:center;position:relative}
.tl-i.next .tl-row::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;
  width:3px;border-radius:2px;background:var(--ink)}
.tl-i.done .tl-row{opacity:.42}
.tl-i.next .tl-row{background:transparent}

/* 시각 — 버튼 티를 빼고 숫자만 크게 */
.tl-when{min-width:92px;gap:1px}
.tl-time{background:transparent;border:0;padding:2px 0;font-size:17px;font-weight:700;
  color:var(--ink);letter-spacing:-.03em}
.tl-time:hover{color:var(--ink);background:transparent}
.tl-time:hover .pen{opacity:.55}
.tl-time.empty{color:var(--dim);font-weight:600}
.tl-in{font-size:11.5px;color:var(--dim);padding-left:0;font-weight:500}
.tl-i.next .tl-in{color:var(--ink);font-weight:700}

/* 내용 */
.tl-post{font-size:15px;font-weight:600;letter-spacing:-.02em}
.tl-sub{gap:8px;margin-top:3px}
.tl-sub .pill{background:transparent;border:0;padding:0;font-size:12.5px;color:var(--dim)}
.tl-sub .gc-tag.sm{background:var(--soft);color:var(--mid);font-weight:600;
  font-size:11.5px;padding:3px 8px}
.tl-i.next .tl-sub .gc-tag.sm{background:var(--ink);color:#fff}

/* 조작 — 평소엔 숨고 마우스를 올리면 나온다 */
.tl-a{gap:4px;opacity:.32;transition:opacity .15s ease}
.tl-i:hover .tl-a,.tl-i.next .tl-a{opacity:1}
.tl-a button.icon{border:0;background:transparent;width:30px;height:30px}
.tl-a button.icon:hover{background:var(--soft);color:var(--ink)}
.tl-a .ghost.sm{border:1px solid var(--line);font-size:13px;padding:6px 12px}
.tl-i.next .tl-a .ghost.sm{background:var(--ink);color:#fff;border-color:var(--ink)}
body.dark .tl-i.next .tl-a .ghost.sm{background:#fff;color:#111;border-color:#fff}
body.dark .tl-i.next .tl-sub .gc-tag.sm{background:#fff;color:#111}
body.dark .tl-time{background:transparent;border:0;color:var(--ink)}
body.dark .tl-time.empty{background:transparent;color:var(--dim)}
body.dark .tl-i.next .tl-row::before{background:#fff}

/* 요약 줄 */
.tl-sum{margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tl-bar{height:3px}
.tl-more{margin-top:12px;border:0;background:var(--soft);color:var(--mid)}
.tl-more:hover{background:var(--line);color:var(--ink)}

/* 시각이 아직 버튼 상자로 보였다 */
.tl-when .tl-time,body.dark .tl-when .tl-time{
  background:transparent;border:0;box-shadow:none;border-radius:6px}
.tl-when .tl-time:hover{background:var(--soft)}

/* 자동 토글 — 라벨이 사라져 무슨 스위치인지 알 수 없었다 */
.tl-a .mini-sw{display:inline-flex;align-items:center;gap:7px;background:transparent;
  padding:4px 6px;border-radius:8px;cursor:pointer;width:auto;height:auto}
.tl-a .mini-sw i{width:30px;height:18px;border-radius:99px;background:var(--line);
  position:relative;flex:none;transition:background .18s ease}
.tl-a .mini-sw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .18s ease}
.tl-a .mini-sw.on i{background:var(--ink)}
.tl-a .mini-sw.on i::after{transform:translateX(12px)}
.tl-a .mini-sw span{font-size:12.5px;color:var(--dim);font-weight:600}
.tl-a .mini-sw.on span{color:var(--ink)}
.tl-a .mini-sw.muted{opacity:.45}
body.dark .tl-a .mini-sw.on i{background:#fff}
body.dark .tl-a .mini-sw.on i::after{background:#111}
body.dark .tl-a .mini-sw.on span{color:#fff}

/* 카드 아래 빈 공간 */
#t-ops .cols.main2>.card:first-child{display:flex;flex-direction:column}
.tl{flex:1}
.auto-row{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}

/* ── KPI 다섯 칸을 각각 카드로 ── */
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;
  background:transparent;border:0;padding:0}
.s-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;position:relative;
  transition:border-color .16s ease}
.s-item::after{display:none}
.s-item + .s-item{border-left:1px solid var(--line)}
.s-item.go{cursor:pointer}
.s-item.go:hover{border-color:var(--ink)}
.s-item .s-lab{font-size:12px;color:var(--dim);font-weight:600;letter-spacing:0}
.s-item .s-val{font-size:25px;font-weight:700;line-height:1.1;letter-spacing:-.05em}
.s-item .u{font-size:15px;color:var(--dim);font-weight:600}
body.dark .s-item{background:var(--card)}
@media(max-width:1180px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 이름이 길어졌다 */
.brand{font-size:14.5px;line-height:1.3;align-items:flex-start;padding:2px 6px 14px}
.brand>span{display:block}
.brand small{font-size:12px;margin-top:2px}

/* ── 글쓰기 규칙: 읽는 화면이므로 문서처럼 ── */
#t-prompt textarea,.pr-body textarea{
  font-family:var(--font-game);
  font-size:14.5px;line-height:1.75;letter-spacing:-.01em;
  padding:18px 20px;border-radius:12px;background:var(--soft);
  border:1px solid var(--line);min-height:260px;color:var(--ink);tab-size:2}
#t-prompt textarea:focus{background:#fff}
body.dark #t-prompt textarea{background:var(--sunk)}
body.dark #t-prompt textarea:focus{background:var(--soft)}

/* 항목 머리 — 무엇을 고치는 곳인지 먼저 읽히게 */
#t-prompt details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
  background:#fff;overflow:hidden}
body.dark #t-prompt details{background:var(--card)}
#t-prompt details[open]{border-color:#d2d2d9}
#t-prompt summary{padding:15px 18px;cursor:pointer;display:flex;align-items:center;
  gap:10px;font-size:15px;font-weight:700;letter-spacing:-.02em;list-style:none}
#t-prompt summary::-webkit-details-marker{display:none}
#t-prompt summary::after{content:"";margin-left:auto;width:8px;height:8px;flex:none;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .18s ease}
#t-prompt details[open] summary::after{transform:rotate(-135deg)}
#t-prompt summary:hover{background:var(--soft)}
#t-prompt .pr-desc{font-weight:400;font-size:13px;color:var(--dim);letter-spacing:0}
#t-prompt .pr-body{padding:0 18px 18px}

/* 글감 칩 */
.tagchip{background:var(--soft);border:1px solid transparent;border-radius:8px;
  font-size:13.5px;padding:7px 10px 7px 12px;color:var(--ink)}
.tagchip:hover{border-color:var(--line)}
.tagchip button{color:var(--dim)}
.tagchip button:hover{color:var(--no)}
.tagchip.off{background:transparent;border:1px dashed var(--line);color:var(--dim)}
/* 칩이 다크에서 글자와 배경이 같은 색이 됐다 */
.chip{background:var(--soft);color:var(--mid);border:1px solid transparent}
.chip:hover{border-color:var(--line);color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
body.dark .chip{background:var(--soft);color:var(--mid)}
body.dark .chip.on{background:#fff;color:#111;border-color:#fff}

/* ── 글 고르기 격자: 카드 안 스크롤을 없애고 폭을 고정한다 ──
   카드마다 안쪽 스크롤바가 생겨 지저분했고, 개수가 적으면 오른쪽이 휑했다. */
.grid{grid-template-columns:repeat(auto-fill,minmax(340px,400px));
  justify-content:start;gap:18px;align-items:stretch}
@media(max-width:1200px){.grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* 카드는 같은 높이로, 버튼은 항상 맨 아래 */
.gc{display:flex;flex-direction:column;height:100%}
.gc-body{max-height:none;overflow:visible;flex:1}
.gc-btns{margin-top:auto;padding-top:14px}

/* 길면 카드가 한없이 길어진다. 접어 두고 카드를 눌러 자세히 본다. */
.gc-part{position:relative}
.gc-body{max-height:360px;overflow:hidden;-webkit-mask-image:none}
.gc.tall .gc-body{position:relative}
.gc.tall .gc-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none}
.gc.tall .gc-more{display:block;margin-top:-6px;font-size:12.5px;color:var(--dim);
  font-weight:600;text-align:center;padding:6px}
.gc-more{display:none}
body.dark .gc.tall .gc-body::after{
  background:linear-gradient(to bottom,transparent,var(--card))}
/* 체크는 오른쪽 끝으로. 글이 먼저 읽혀야 한다 */
.gc-top .gc-g{margin-left:auto}
.gc-top .chk{margin-left:0;order:99}

/* ── 강조색: 검정이 주인, 파랑은 '지금 볼 것'에만 ── */
:root{
  --key:#2f6bff; --key-soft:#eef3ff; --key-line:#c9d9ff;
  --ok:#0f9d58; --ok-soft:#eaf7ef;
  --no:#d93025; --no-soft:#fdecea;
  --warn:#b8860b; --warn-soft:#fbf6e8;
}
body.dark{
  --key:#7aa2ff; --key-soft:rgba(122,162,255,.14); --key-line:rgba(122,162,255,.35);
  --ok:#5bd68b; --ok-soft:rgba(91,214,139,.14);
  --no:#ff7a70; --no-soft:rgba(255,122,112,.14);
  --warn:#e8c15a; --warn-soft:rgba(232,193,90,.14);
}
/* 다음에 나갈 것 · 지금 봐야 할 것에만 쓴다 */
.tl-i.next .tl-row::before{background:var(--key)}
.tl-i.next .tl-in{color:var(--key)}
.tl-i.next .tl-time{color:var(--key)}
.tl-bar i{background:var(--key)}
.bell-n.on{background:var(--key)}
.bell-n.bad{background:var(--no)}
.nav .badge:not(.zero){background:var(--key);color:#fff}
.nav.on .badge:not(.zero){background:#fff;color:var(--key)}
.acct-n{background:var(--key);color:#fff}
.nt-fix,button.nt-fix{color:var(--key)}
.gc-tag{background:var(--ink)}
.tl-i.next .tl-sub .gc-tag.sm{background:var(--key);color:#fff}
body.dark .tl-i.next .tl-row::before{background:var(--key)}
body.dark .tl-i.next .tl-sub .gc-tag.sm{background:var(--key);color:#fff}
body.dark .nav.on .badge:not(.zero){background:var(--key);color:#fff}

/* ── 예약 시각 강조: 언제 나가는지가 이 화면의 핵심 ── */
#queue td:nth-child(3){font-variant-numeric:tabular-nums}
.tl-time.sm{font-size:14.5px;font-weight:700;color:var(--ink);
  background:var(--key-soft);border:1px solid var(--key-line);border-radius:9px}
.tl-time.sm:hover{border-color:var(--key);color:var(--key)}
.tl-time.empty.sm{background:transparent;border-style:dashed;
  border-color:var(--line);color:var(--dim);font-weight:600}
body.dark .tl-time.sm{background:var(--key-soft);border-color:var(--key-line);color:#fff}
body.dark .tl-time.empty.sm{background:transparent;color:var(--dim)}

/* ── 체크 형태 구성 ── */
.cbox{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:14px;
  font-weight:600;color:var(--mid);padding:6px 4px;user-select:none}
.cbox:hover{color:var(--ink)}
.cbox.fixed{cursor:default;opacity:.75}
.cbox-box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);
  display:grid;place-items:center;color:transparent;transition:all .15s ease}
.cbox-box.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cbox-box svg{width:12px;height:12px;stroke-width:3}
body.dark .cbox-box.on{background:#fff;border-color:#fff;color:#111}
.chip.sm{font-size:12.5px;padding:5px 11px}

/* 만들기 버튼은 이 카드의 결론이다. 넓게 */
.mk-foot{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
#qgo{flex:1;min-width:200px;justify-content:center;height:46px;font-size:15.5px;
  font-weight:700;border-radius:12px}
.mk-foot .dim{flex:none;font-size:13px}

/* ── 줄바꿈으로 깨지던 곳들 ── */
.mk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mk-row>label{width:64px;flex:none;font-size:13.5px;color:var(--dim);font-weight:600}
.mk-row .chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.mk-row select,.mk-row input{flex:1;min-width:0}
.chip{white-space:nowrap}
.tools{gap:8px}
.tools select,.tools input{min-width:0}
.s-item .s-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-post,.acct-name,.gc-tag{white-space:nowrap}
.head h1{white-space:nowrap}
.head .who{white-space:nowrap}
.nt-fix{word-break:keep-all}
.card>h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card>h2 .side{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.setlabel,.mk-note{word-break:keep-all}
label,button,.pill,.s-lab{word-break:keep-all}

/* 올릴 시각 — 자동 배정도 '언제 나가는지'는 똑같이 중요하다.
   확정 예약은 채운 파랑, 자동 배정은 테두리 파랑. 둘 다 또렷하게. */
#queue .tl-time.sm{background:var(--key);border-color:var(--key);color:#fff;
  font-size:14.5px;font-weight:700;padding:8px 13px}
#queue .tl-time.sm:hover{background:var(--key);filter:brightness(1.08);color:#fff}
#queue .tl-time.empty.sm{background:transparent;border:1.5px solid var(--key-line);
  color:var(--key);border-style:solid;font-weight:700}
#queue .tl-time.empty.sm:hover{border-color:var(--key);background:var(--key-soft)}
#queue .tl-time .pen{opacity:0}
#queue tr:hover .tl-time .pen{opacity:.5}
#queue td:nth-child(3){padding-right:8px}
body.dark #queue .tl-time.sm{color:#fff}
body.dark #queue .tl-time.empty.sm{color:var(--key)}

/* ── 올리기 표: 버튼이 칸 밖으로 삐져나왔다 ── */
#queue col.c-act{width:180px}
#queue td.act{display:flex;align-items:center;gap:8px;justify-content:flex-end;
  padding-right:4px}
#queue td.act button.sm{white-space:nowrap}
#hist col.c-act{width:170px}
#hist td:last-child{white-space:nowrap}
#hist a{margin-right:4px}
#hist tbody tr[hidden]{display:none}

/* '지금 올리기' 카드가 버튼 두 개로 카드 하나를 다 썼다 */
#t-send>.card:first-child{padding:14px 18px}
#t-send>.card:first-child>h2{margin-bottom:10px}

/* ── 사이드바가 긴 페이지에서 끊겨 보였다 ── */
.shell{background:linear-gradient(to right,var(--card) 0 250px,var(--bg) 250px)}
@media(max-width:1000px){.shell{background:var(--bg)}}
body.dark .shell{background:linear-gradient(to right,var(--card) 0 250px,var(--bg) 250px)}

/* ── 성과: 채점 표 3개가 세로로 늘어져 페이지가 길었다 ── */
#t-stats.on{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
#t-stats>#stats{display:contents}
#t-stats>#stats>.card:first-child,#t-stats>.card:nth-of-type(1){grid-column:1 / -1}
#t-stats>.card:last-child{grid-column:1 / -1}
@media(max-width:1100px){#t-stats.on{grid-template-columns:1fr}}
#stats table{font-size:14px}
#stats td,#stats th{padding:9px 10px}

/* 실제 조회수가 이 화면의 결론이다 */
#stats .card td:nth-child(3) b{font-size:17px;color:var(--key)}
#reachslot .card{border-color:var(--key-line)}
#reachslot .card>h2{color:var(--ink);font-size:15px}

/* 시간대 그래프 */
#localbars i{border-radius:3px 3px 0 0}

/* 뺀 글감은 접어 둔다 — 15개씩 늘어져 페이지 절반을 먹었다 */
.hidden-topics{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hidden-topics summary{cursor:pointer;font-size:13px;color:var(--dim);font-weight:600;
  list-style:none;padding:4px 0}
.hidden-topics summary::-webkit-details-marker{display:none}
.hidden-topics summary{display:flex;align-items:center;gap:7px}
.hidden-topics summary::after{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);margin-top:-3px;transition:transform .16s ease}
.hidden-topics[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.hidden-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* 규칙 편집칸이 과하게 컸다 */
#t-prompt textarea{min-height:200px;max-height:420px}

/* 글감 칩 줄 간격 */
#topics{display:flex;flex-wrap:wrap;gap:8px}
/* 규칙 항목 머리 — 무엇을 고치는 곳인지 한 줄로 */
.prompt{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff;
  overflow:hidden}
body.dark .prompt{background:var(--card)}
.prompt-h{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer}
.prompt-h:hover{background:var(--soft)}
.pname{font-size:15px;font-weight:700;letter-spacing:-.02em}
.pdesc{font-size:13px;color:var(--dim);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pchev{color:var(--dim);font-size:12px}
.prompt-b{padding:0 18px 16px}
/* 새벽 시간대 표시 — 분홍이 검정 테마와 안 맞았다 */
.hours>div.bad{background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 3px,
  var(--line) 3px,var(--line) 6px)}
.hours>div.bad.on{background:var(--ink);opacity:.55}
body.dark .hours>div.bad.on{background:#fff;opacity:.4}

/* 설정 페이지 — 섹션이 7개라 길다. 번호를 크게 해 훑기 쉽게 */
#t-time .card>h2{font-size:14px;color:var(--ink);font-weight:700}
#t-time .card{scroll-margin-top:16px}

/* ═══════════════════════════════════════════════════════════
   좁은 화면 — 사이드바를 아래 탭바로 내리고, 가로 넘침을 막는다.
   메뉴가 상단에서 화면 절반을 먹고 콘텐츠가 오른쪽으로 삐져나갔다.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:820px){
  html,body{overflow-x:hidden}
  .shell{flex-direction:column;background:var(--bg)}

  /* 사이드바 → 아래 고정 탭바 */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;
    z-index:50;flex-direction:row;gap:0;padding:6px 4px
    calc(6px + env(safe-area-inset-bottom));border-right:0;
    border-top:1px solid var(--line);background:var(--card);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);overflow:visible}
  .rail .brand,.rail hr,.rail-foot,.rail .acct{display:none}
  .nav{flex:1;flex-direction:column;gap:3px;justify-content:center;align-items:center;
    padding:7px 2px;margin:0;font-size:11px;font-weight:600;border-radius:10px;
    text-align:center;line-height:1.2}
  .nav .ib{display:grid;width:22px;height:22px;background:transparent}
  .nav .ib svg{width:19px;height:19px}
  .nav.on{background:transparent;color:var(--ink);box-shadow:none}
  .nav.on .ib{background:transparent;color:var(--ink)}
  .nav.on::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:22px;height:2.5px;border-radius:2px;background:var(--ink)}
  .nav{position:relative}
  .nav .badge{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;
    padding:0 4px;font-size:10px;line-height:16px;margin:0}
  .nav .badge.zero{display:none}
  body.dark .nav.on::after{background:#fff}

  main{padding:14px 14px calc(84px + env(safe-area-inset-bottom));max-width:100%}
  .head{flex-wrap:wrap;gap:8px}
  .head h1{font-size:22px}
  .head-sub{font-size:13px}

  /* 계정은 헤더에서 바꾼다 */
  .head .who{order:2}

  /* 격자·표 */
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .s-item{padding:12px 14px}
  .s-item .s-val{font-size:22px}
  .cols,.cols.main2,.cols.main3,#t-stats.on{grid-template-columns:1fr;gap:12px}
  .grid{grid-template-columns:1fr}
  .card{padding:16px 14px}
  .pick{grid-template-columns:1fr}

  /* 표는 좌우로 밀어 본다 */
  .card table{display:block;overflow-x:auto;white-space:nowrap}
  #queue col.c-time,#hist col.c-time,#queue col.c-act,#hist col.c-act{width:auto}

  /* 줄이 넘치던 것들 */
  .tl-row{flex-wrap:wrap;gap:10px}
  .tl-when{min-width:78px}
  .tl-c{flex:1 1 55%}
  .tl-a{width:100%;justify-content:flex-end;opacity:1}
  .tl-sub{flex-wrap:wrap}
  .mk-row>label{width:100%}
  .mk-foot{flex-direction:column;align-items:stretch}
  #qgo{width:100%}
  .tools{flex-direction:column;align-items:stretch}
  .tools>*{width:100%}
  .notices{position:fixed;left:12px;right:12px;top:64px;width:auto}
  .hidden-list{max-width:100%}
  .tpwrap{max-width:100%}
  .themebtn{bottom:calc(78px + env(safe-area-inset-bottom))}
  .totop{bottom:calc(134px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  .savebar{bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* 아주 좁은 화면 */
@media(max-width:400px){
  .nav{font-size:10px}
  main{padding-left:12px;padding-right:12px}
}

/* 카드 머리의 버튼 줄이 좁은 화면에서 오른쪽으로 삐져나갔다 */
@media(max-width:820px){
  .card>h2{flex-wrap:wrap;row-gap:8px}
  .card>h2 .side{margin-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .stepper{flex:none}
  .card>h2 .side button{flex:none}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-item:last-child:nth-child(odd){grid-column:1 / -1}
  .themebtn{right:12px;bottom:calc(84px + env(safe-area-inset-bottom));
    width:40px;height:40px}
  .tl-i.next .tl-row::before{left:-6px}
}

/* 긴 글감 이름이 칩 폭을 넘겼다 */
.tagchip{max-width:100%;white-space:normal;word-break:keep-all;line-height:1.35}
.hidden-list{max-width:100%;overflow:hidden}

/* 격자 칸이 내용 최소폭 때문에 안 줄어들었다(grid 기본값 min-width:auto) */
.cols,.cols.main2,.cols.main3,.grid,.strip,#t-stats.on,.pick{
  grid-auto-columns:minmax(0,1fr)}
.cols>*,.cols.main2>*,.cols.main3>*,.grid>*,.strip>*,#t-stats.on>*,.pick>*{min-width:0}
@media(max-width:820px){
  .cols,.cols.main2,.cols.main3,#t-stats.on,.pick,.grid{
    grid-template-columns:minmax(0,1fr)}
  #qgo{min-width:0}
  .mk-row .chips{min-width:0}
}

/* 글감 칩이 눌려 글자가 안 보였다 */
.tagchip{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
.tagchip button{flex:none}
.hidden-list{align-items:flex-start}

/* 칩 안의 맨 텍스트가 flex 항목이 되어 눌렸다. 블록으로 되돌린다. */
.tagchip{display:inline-block;min-width:auto;padding:7px 10px 7px 12px;
  line-height:1.35;white-space:normal;word-break:keep-all;max-width:100%}
.tagchip button{display:inline-flex;vertical-align:middle;margin-left:6px}
.hidden-list{align-items:flex-start;overflow:visible}

/* 타임라인 부제가 좁아지면 넘쳤다 */
.tl-sub{flex-wrap:wrap;overflow:visible;row-gap:4px}
.tl-sub .pill{white-space:nowrap}

/* 칩이 flex 항목이라 눌려 글자가 22px로 잘렸다. 줄이지 말고 줄바꿈하게 한다. */
#topics .tagchip,.hidden-list .tagchip{flex:0 0 auto;max-width:100%}
#topics,.hidden-list{align-content:flex-start}

/* 1200~1400px 구간에서 타임라인 한 줄이 눌렸다 */
@media(min-width:821px) and (max-width:1400px){
  .tl-row{flex-wrap:wrap;row-gap:10px}
  .tl-c{flex:1 1 auto;min-width:150px}
  .tl-a{flex:0 0 auto}
  .tl-a .ghost.sm{padding:6px 10px;font-size:12.5px}
}

/* ═══ 가독성 ═══
   화면이 정보 밀도가 높다. 글자 크기보다 '위계와 여백'으로 읽히게 만든다. */

/* 본문 기준을 조금 키우고 줄간을 넓힌다 */
body{font-size:15.5px;line-height:1.62}
.dim,.head-sub{line-height:1.6}

/* 회색 글자가 너무 옅어 안 읽혔다 */
:root{--mid:#4e4e58; --dim:#84848f}
body.dark{--mid:#b0b0ba; --dim:#7d7d88}

/* 표 — 줄 간격과 헤더 */
table{border-collapse:collapse;width:100%}
th{font-size:12.5px;font-weight:700;color:var(--dim);text-align:left;
  padding:10px 10px 12px;border-bottom:1px solid var(--line)}
td{padding:13px 10px;border-bottom:1px solid var(--line);font-size:14.5px;
  vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums}

/* 카드 안 여백 */
.card{padding:20px 22px}
.card>h2{margin-bottom:14px}
.card + .card{margin-top:16px}

/* 안내 문구 — 읽을 사람이 있는 문장이다 */
.head-sub{font-size:14px;color:var(--mid)}
.card .dim{font-size:13.5px}
.setlabel{font-size:13px;font-weight:700;color:var(--dim);margin-bottom:8px}

/* 글 카드 본문 — 여기가 제일 오래 읽는 곳 */
.gc-text{font-size:14.8px;line-height:1.68}
.gc-plabel{margin-bottom:6px}
.gc-part + .gc-part{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* 미리보기 */
.tpost .txt{font-size:15.2px;line-height:1.56}

/* 규칙 편집칸 */
#t-prompt textarea{font-size:14.8px;line-height:1.8}

/* 입력칸 높이를 눌러 쓰기 좋게 */
input,select,textarea{font-size:14.5px}
input,select{min-height:40px;padding:9px 12px}
button{font-size:14px}
.ghost.sm,button.sm{font-size:13.5px;padding:8px 14px}

/* ── 조회수로 배우기 ── */
.card.learn{border-color:var(--key-line)}
.learn-dim + .learn-dim{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.learn-lab{font-size:12.5px;font-weight:700;color:var(--dim);margin-bottom:8px}
.learn-rows{display:flex;flex-direction:column;gap:7px}
.learn-row{display:grid;grid-template-columns:120px 1fr 74px 42px 34px;
  align-items:center;gap:10px;font-size:13.5px}
.learn-key{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learn-bar{height:7px;background:var(--soft);border-radius:99px;overflow:hidden}
.learn-bar i{display:block;height:100%;background:var(--key);border-radius:99px}
.learn-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.learn-n{text-align:right;color:var(--dim);font-size:12px}
.learn-w{text-align:center;font-size:11.5px;font-weight:700;color:var(--key);
  background:var(--key-soft);border-radius:6px;padding:2px 0}
@media(max-width:820px){
  .learn-row{grid-template-columns:92px 1fr 62px 34px;}
  .learn-w{display:none}
}

/* 시각 편집이 세로로 쌓여 행이 튀었다. 한 줄로 */
#queue .tl-edit,#queue td .row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
#queue .tl-edit select{min-width:74px;height:34px;padding:4px 8px}
#queue .tl-edit input{width:52px;height:34px;padding:4px 6px;text-align:center}
#queue .tl-edit button{height:34px;padding:0 12px;font-size:13px;white-space:nowrap}
#queue col.c-time{width:300px}
#queue td:nth-child(3){padding-right:10px}
@media(max-width:820px){
  #queue .tl-edit{flex-wrap:wrap}
}

/* 시각 편집 한 줄 — 요소가 여섯 개라 칸이 좁으면 두 줄로 접혔다 */
#queue col.c-time{width:352px}
.qedit{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.qedit select{min-width:82px;width:auto;height:34px;padding:4px 26px 4px 9px;
  font-size:13.5px;min-height:0}
.qedit .tin{display:inline-flex;align-items:center;gap:4px}
.qedit .tin input{width:50px;height:34px;min-height:0;padding:4px 4px;text-align:center;
  font-size:13.5px}
.qedit .tin span{font-size:13px;color:var(--dim)}
.qedit button{height:34px;padding:0 11px;font-size:13px;flex:none}
@media(max-width:900px){ .qedit{flex-wrap:wrap;white-space:normal} }
.learn-meta{font-size:12.5px;color:var(--dim);padding:8px 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.learn-hist{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.learn-hist summary{cursor:pointer;font-size:12.5px;color:var(--dim);font-weight:600;
  list-style:none}
.learn-hist summary::-webkit-details-marker{display:none}
.learn-hrow{display:flex;gap:10px;font-size:12.5px;color:var(--mid);
  padding:6px 0;border-bottom:1px solid var(--line)}
.learn-hrow:last-child{border:0}
.learn-hwhen{color:var(--dim);flex:none;min-width:62px}

/* ── 이 도구에 바라는 점 ── */
.fb-form{display:flex;flex-direction:column;gap:10px}
.fb-form textarea{min-height:64px;resize:vertical;border-radius:10px;padding:12px 14px}
#fbkind{display:flex;gap:6px}

.fb-list{margin-top:16px;border-top:1px solid var(--line)}
.fb-item.done{opacity:.45}
.fb-item.done .fb-text{text-decoration:line-through}
.fb-chk{width:20px;height:20px;flex:none;margin-top:2px;border-radius:6px;
  border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;
  color:#fff;padding:0;box-shadow:none;cursor:pointer}
.fb-chk svg{width:12px;height:12px;stroke-width:3}
.fb-item.done .fb-chk{background:var(--ink);border-color:var(--ink)}
body.dark .fb-chk{background:var(--sunk)}
body.dark .fb-item.done .fb-chk{background:#fff;border-color:#fff;color:#111}
.fb-body{flex:1;min-width:0}
.fb-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mid);
  margin-bottom:3px;font-weight:600}
.fb-kind{padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700}
.fb-kind.k-버그{background:var(--no-soft);color:var(--no)}
.fb-kind.k-바람{background:var(--key-soft);color:var(--key)}
.fb-kind.k-칭찬{background:var(--ok-soft);color:var(--ok)}
.fb-text{font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.fb-item>button.icon{flex:none;width:30px;height:30px;border:0;background:transparent;
  opacity:0;transition:opacity .15s}
.fb-item:hover>button.icon{opacity:.5}
.fb-item>button.icon:hover{opacity:1;color:var(--no)}
@media(max-width:820px){
  .fb-send{flex-direction:column}
  .fb-send input{flex:1}
  .fb-item>button.icon{opacity:.4}
}
/* 칩은 sm이어도 칩 규칙을 따른다 */
body.dark button.chip{background:var(--soft);color:var(--mid)}
body.dark button.chip.on{background:#fff;color:#111}



/* ══ 개발자에게 요청사항 — 오른쪽에 늘 펼쳐져 있다 ══ */
.shell{background:linear-gradient(to right,var(--card) 0 250px,var(--bg) 250px)}
/* 자리를 차지하지 않고 본문 위에 떠 있다 */
.fbpanel{position:fixed;right:16px;top:16px;bottom:16px;width:288px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 12px 40px rgba(17,17,20,.10), 0 2px 8px rgba(17,17,20,.05);
  display:flex;flex-direction:column;z-index:45;overflow:hidden}
body.dark .fbpanel{box-shadow:0 16px 48px rgba(0,0,0,.5)}
.fbp-head{display:flex;align-items:center;gap:9px;padding:18px 18px 14px;
  border-bottom:1px solid var(--line);flex:none}
.fbp-head .ib{display:grid;place-items:center;color:var(--dim)}
.fbp-head .ib svg{width:16px;height:16px}
.fbp-head b{font-size:14.5px;letter-spacing:-.02em;flex:1}
.fbtab-n{display:none}
.fbtab-n.on{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:99px;background:var(--key);color:#fff;font-size:11px;font-weight:800}
.fbp-body{flex:1;overflow-y:auto;padding:16px 18px 24px}
.fbp-body::-webkit-scrollbar{width:6px}
.fbp-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.fb-form{display:flex;flex-direction:column;gap:9px}
.fb-form textarea{width:100%;min-height:74px;resize:vertical;border-radius:10px;
  padding:11px 13px;font-size:14px}
.fb-form>button{width:100%;height:40px;font-size:14px;font-weight:700}
#fbkind{display:flex;gap:5px}
#fbkind .chip{flex:1;justify-content:center;padding:6px 0;font-size:12.5px}

.fb-list{margin-top:16px;border-top:1px solid var(--line)}
.fb-item{padding:12px 0;gap:9px}
.fb-meta{gap:6px;font-size:11.5px;flex-wrap:wrap}
.fb-text{font-size:13.5px;line-height:1.5}
.fb-where{background:var(--soft);color:var(--mid);padding:1px 6px;border-radius:5px;
  font-size:10.5px;font-weight:700}
.fb-kind{padding:1px 7px;font-size:10.5px}
.fb-chk{width:18px;height:18px}

/* 떠 있는 만큼 본문 오른쪽을 비워 둔다 */
main{max-width:none;padding-right:326px}
.themebtn{right:322px}
.totop{right:322px}

@media(max-width:1180px){
  .fbpanel{width:262px}
  main{padding-right:298px}
  .themebtn,.totop{right:294px}
}
/* 좁은 화면에서는 접었다 펴는 방식으로 되돌린다 */
@media(max-width:1000px){
  .fbpanel{right:12px;left:12px;top:auto;bottom:12px;width:auto;
    max-height:70vh;transform:translateY(calc(100% - 54px));
    transition:transform .22s cubic-bezier(.3,.8,.4,1)}
  .fbpanel.on{transform:none}
  .fbp-head{cursor:pointer}
  main{padding-right:16px;padding-bottom:90px}
  .themebtn,.totop{right:12px}
  .themebtn{bottom:76px}
}
@media(max-width:820px){
  .fbpanel{bottom:calc(72px + env(safe-area-inset-bottom))}
  .themebtn{bottom:calc(136px + env(safe-area-inset-bottom))}
  .totop{bottom:calc(190px + env(safe-area-inset-bottom))}
}
/* 종류마다 물어보는 칸 */
.fb-field{display:block;margin-bottom:9px}
.fb-field>span{display:block;font-size:12px;font-weight:700;color:var(--mid);
  margin-bottom:5px}
.fb-field textarea{width:100%;min-height:54px;resize:vertical;border-radius:9px;
  padding:9px 11px;font-size:13.5px;line-height:1.5}
.fb-ctx{font-size:11.5px;color:var(--dim);background:var(--soft);border-radius:8px;
  padding:8px 10px;margin-bottom:10px;line-height:1.45}
.fb-ctx b{color:var(--mid)}
/* 남긴 글의 질문/답 구분 — 지금은 한 덩어리로 붙어 보인다 */
.fb-text{white-space:pre-wrap}
.fb-q{display:block;font-size:11.5px;font-weight:700;color:var(--dim);margin-top:6px}
.fb-q:first-child{margin-top:0}
.fb-a{display:block;font-size:13.5px;line-height:1.5;margin-top:2px}

/* ── 요청사항 패널 크기 조정 ── */
.fbp-head{padding:13px 14px 11px;gap:7px}
.fbp-head b{font-size:13.5px}
.fbp-head .ib svg{width:15px;height:15px}
.fbtab-n.on{min-width:18px;height:18px;font-size:10.5px;padding:0 5px}
.fbtab-n.urgent{background:var(--no)}
.fbp-body{padding:12px 14px 18px}

#fbkind .chip,#fbview .chip{padding:5px 0;font-size:11.5px;font-weight:700}
.fb-field{margin-bottom:7px}
.fb-field>span{font-size:11.5px;margin-bottom:4px}
.fb-field textarea{min-height:46px;padding:8px 10px;font-size:13px;line-height:1.45}
.fb-form{gap:7px}
.fb-form>button{height:36px;font-size:13.5px}
.fb-ctx{font-size:11px;padding:7px 9px;margin-bottom:8px}

.fb-urgent{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--mid);cursor:pointer;padding:2px 0}
.fb-urgent input{width:15px;height:15px;min-height:0;padding:0;margin:0;accent-color:var(--no)}
.fb-urgent:hover{color:var(--ink)}

/* 칩과 찾기를 한 줄에 넣으니 '안 한 것'이 32px로 눌렸다. 줄을 나눈다. */
.fb-filter{display:flex;flex-direction:column;gap:7px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.fb-filter #fbview{display:flex;gap:4px;width:100%}
.fb-filter input{width:100%;min-height:30px;height:30px;padding:4px 10px;
  font-size:12.5px;border-radius:8px}

.fb-list{margin-top:10px;border-top:0}
.fb-item{padding:10px 0;gap:8px;border-bottom:1px solid var(--line)}
.fb-item.urgent .fb-body{border-left:2px solid var(--no);padding-left:8px;margin-left:-2px}
.fb-hot{background:var(--no);color:#fff;padding:1px 6px;border-radius:5px;
  font-size:10px;font-weight:800}
.fb-q{font-size:11px;margin-top:5px}
.fb-a{font-size:13px;line-height:1.45}
.fb-meta{font-size:11px;gap:5px;margin-bottom:2px}
.fb-kind,.fb-where{font-size:10px;padding:1px 5px}
.fb-chk{width:16px;height:16px;margin-top:1px}
.fb-chk svg{width:10px;height:10px}
.fb-reply{margin-top:7px;background:var(--key-soft);border-radius:7px;
  padding:7px 9px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.fb-reply b{color:var(--key);font-size:11px;margin-right:5px}
.fb-rbtn{background:none;border:0;padding:4px 0 0;color:var(--dim);font-size:11.5px;
  font-weight:600;cursor:pointer;box-shadow:none}
.fb-rbtn:hover{color:var(--key)}
.fb-none{padding:18px 0;text-align:center;color:var(--dim);font-size:12.5px}

/* ══ 요청사항 목록 — 종류가 한눈에 갈리게 ══ */
#fbview{display:flex;gap:4px;flex:1}
#fbview .chip{flex:1;text-align:center;padding:5px 2px;font-size:11.5px}

.fb-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.fb-item{display:block;padding:10px 11px;border:1px solid var(--line);
  border-radius:10px;border-left-width:3px;background:var(--card)}
.fb-item.k-bug{border-left-color:var(--no)}
.fb-item.k-wish{border-left-color:var(--key)}
.fb-item.k-praise{border-left-color:var(--ok)}
.fb-item.done{opacity:.5;background:var(--soft)}
.fb-item.done .fb-text{text-decoration:line-through}
.fb-item.urgent{border-color:var(--no);background:var(--no-soft)}
body.dark .fb-item.urgent{background:var(--no-soft)}

.fb-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.fb-kind{font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:5px;
  background:var(--soft);color:var(--mid)}
.k-bug .fb-kind{background:var(--no-soft);color:var(--no)}
.k-wish .fb-kind{background:var(--key-soft);color:var(--key)}
.k-praise .fb-kind{background:var(--ok-soft);color:var(--ok)}
.fb-hot{background:var(--no);color:#fff;padding:2px 6px;border-radius:5px;
  font-size:10px;font-weight:800}
.fb-where{font-size:10px;padding:2px 6px;border-radius:5px;
  background:var(--soft);color:var(--dim);font-weight:700}
.fb-when{font-size:10.5px;color:var(--dim);margin-left:auto}
.fb-chk{width:17px;height:17px;flex:none;border-radius:5px;border:1.5px solid var(--line);
  background:transparent;display:grid;place-items:center;color:#fff;padding:0;
  box-shadow:none;cursor:pointer}
.fb-chk svg{width:10px;height:10px;stroke-width:3.5}
.fb-item.done .fb-chk{background:var(--ink);border-color:var(--ink)}
body.dark .fb-item.done .fb-chk{background:#fff;border-color:#fff;color:#111}

.fb-text{font-size:13px;line-height:1.45}
.fb-q{display:block;font-size:10.5px;font-weight:700;color:var(--dim);margin-top:5px}
.fb-q:first-child{margin-top:0}
.fb-a{display:block;margin-top:1px}
.fb-reply{margin-top:7px;background:var(--key-soft);border-radius:7px;padding:6px 8px;
  font-size:12px;line-height:1.45}
.fb-reply b{color:var(--key);font-size:10.5px;margin-right:5px;font-weight:800}
.fb-acts{display:flex;gap:10px;margin-top:7px}
.fb-rbtn{background:none;border:0;padding:0;color:var(--dim);font-size:11px;
  font-weight:700;cursor:pointer;box-shadow:none}
.fb-rbtn:hover{color:var(--key)}
.fb-rbtn.del:hover{color:var(--no)}

/* ── 화면이 바뀔 때 오른쪽이 움직이던 문제 ──
   페이지마다 길이가 달라 스크롤바가 생겼다 사라진다. 그때마다 창 폭이
   달라져서 오른쪽에 붙은 패널이 좌우로 흔들렸다. 자리를 늘 비워 둔다. */
html{scrollbar-gutter:stable}

/* 칩이 글자 길이만큼만 커져서 폭이 제각각이었다(flex-basis:auto) */
#fbview .chip,#fbkind .chip{flex:1 1 0;min-width:0}

/* ── 진행 중일 때 겹치던 것들 ────────────────────────────
   창을 좁히면 줄의 왼쪽 시각 칸이 눌리는데, 안의 버튼은 104px을
   고집해서 밖으로 삐져나왔다. 칸이 줄면 버튼도 같이 줄게 한다. */
.tl-when{min-width:0;flex:0 1 auto}
.tl-time{min-width:0;max-width:100%}
/* 종 옆 숫자 배지가 감싸는 칸 밖으로 나가 가로 스크롤을 만들었다 */
.bellwrap{padding:5px;margin:-5px}

/* ══ 칸 크기에 맞춰 접기 ═══════════════════════════════════
   창은 넓은데 그 안의 칸(2단 배치의 오른쪽 등)은 좁을 때가 있다.
   지금까지는 창 너비만 보고 배치를 정해서, 좁은 칸 안에서 글이
   6px까지 눌리거나 표가 칸 밖으로 튀어나갔다.
   창이 아니라 '칸' 너비를 보고 접도록 바꾼다. */
.card,.tl{container-type:inline-size}

/* 오늘 줄: 칸이 좁으면 시각 / 내용 / 버튼을 아래로 흘린다 */
.tl-c{flex:1 1 200px;min-width:0}
.tl-a{flex:0 0 auto}
@container (max-width:560px){
  .tl-row{flex-wrap:wrap;row-gap:10px}
  .tl-c{flex:1 1 100%;order:3}
  .tl-a{order:2;margin-left:auto}
}

/* 표: 칸보다 넓어지면 표만 옆으로 넘긴다(화면 전체가 밀리지 않게) */
.card table{display:block;overflow-x:auto;max-width:100%}
.card table > *{display:table;width:100%;table-layout:fixed}

/* 요일 칸: 7칸이 각자 최소폭을 고집해 칸 밖으로 나갔다 */
.week{grid-template-columns:repeat(7,minmax(0,1fr))}
.week > *{min-width:0}
@container (max-width:520px){ .week{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* 조회수로 배우기: 고정폭 5칸(270px)이 좁은 칸에서 넘쳤다 */
.learn-row{grid-template-columns:minmax(0,110px) minmax(0,1fr) 66px 38px 30px}
@container (max-width:340px){
  .learn-row{grid-template-columns:minmax(0,1fr) 56px 30px}
  .learn-bar,.learn-n{display:none}
}

/* 종 옆 배지가 감싸는 칸 밖으로 나가 가로 스크롤을 만들었다 */
.bell-n.on{top:0;right:0}

/* 표 안에서 글자가 칸을 밀어내던 자리들 */
td.ell .dim{overflow:hidden;text-overflow:ellipsis}
tr.open td.ell{white-space:normal;word-break:break-word}
tr.open td.ell .dim{overflow:visible;white-space:normal}
.day .d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 칸이 좁으면 머리글은 두 줄로, 표는 옆으로 밀어서 본다 */
@container (max-width:620px){
  th{white-space:normal;word-break:keep-all}
  /* 칸이 좁으면 '순서'를 감추고 시각·버튼 폭을 줄여 한 화면에 들어가게 한다.
     (예전엔 표를 옆으로 밀어야 해서 '올릴 시각' 버튼이 잘려 안 눌렸다) */
  #queue col.c-no,#hist col.c-no{width:0}
  /* 자리로 지운다 — #hist 는 '올린 시각'과 '길이'가 둘 다 td.num 이라
     클래스로 지우면 시각까지 사라졌다 */
  #queue td:first-child,#queue th:first-child,
  #hist td:nth-child(3),#hist th:nth-child(3){padding:0;font-size:0;width:0}
  #queue col.c-time{width:180px}
  #queue col.c-act{width:158px}
  #queue td.act button,#hist td.act button{padding:6px 9px;font-size:12.5px}
  /* 버튼이 칸보다 넓으면 왼쪽 칸(올릴 시각) 위로 넘쳐 덮어버렸다.
     줄을 바꿔 아래로 내려가게 한다 */
  td.act{white-space:normal}
  td.act button,td.act a{margin:2px 0 2px 5px}
  .card table > *{min-width:470px}
}


/* ── 헤더에서 계정 바꾸기 ──
   820px 이하에서는 사이드바가 탭바로 바뀌며 계정 목록(.rail .acct)이 숨겨진다.
   그동안 헤더의 계정 이름은 눌러도 아무 일이 없어 휴대폰에서는 계정을 못 바꿨다.
   이름을 누르는 자리로 만들고, 뜨는 창의 줄은 손가락으로 누르기 좋게 키운다. */
.head .who.can{cursor:pointer;padding:5px 11px 5px 6px;border-radius:999px;
  background:var(--soft);color:var(--mid);user-select:none;
  -webkit-tap-highlight-color:transparent}
.head .who.can:hover,.head .who.can:focus-visible{background:var(--accent-soft);
  color:var(--accent)}
.who-sw{font-size:12px;font-weight:700;color:var(--accent);margin-left:2px}
.pick-list{margin:0 0 8px}
.pick-list .acct-row{padding:11px 12px;font-size:15px;min-height:52px}
.pick-list .acct-row.on::after{content:"지금";margin-left:auto;font-size:11.5px;
  font-weight:800;color:var(--accent);background:#fff;border-radius:999px;padding:2px 8px}
.pick-list .acct-row.on:has(.acct-n)::after{margin-left:8px}
body.dark .pick-list .acct-row.on::after{background:var(--card)}
@media(max-width:820px){
  .head .who.can{font-size:15px;min-height:38px;padding:6px 12px 6px 7px}
}
/* 계정 확인 창의 두 카드가 좁은 화면에서 나란히 눌려 이름이 잘렸다. 세로로 쌓는다. */
@media(max-width:480px){
  .swap{flex-direction:column;gap:8px}
  .swap-arrow{transform:rotate(90deg);align-self:center;line-height:1}
  .modal-btns{flex-wrap:wrap}
  .modal-btns button{flex:1 1 auto;white-space:normal}
}

body,input,button,textarea,select{font-family:var(--font-game)}