/* 위티프렌즈 사무실 — H1 문서함 리더 (reader.js 짝꿍) + 문서함 '결과물' 탭(docs.js)
   styles.css 토큰·컴포넌트(.sheet-dialog .btn .pill .note-* .waiting …)를 그대로 쓰고 새 모양만 여기(접두사 rd-).
   색은 모두 토큰이라 라이트·다크가 같이 바뀌어요. 320–430px에서 가로 스크롤이 생기지 않게 min-width:0 · 줄바꿈을 챙겨요. */

/* =========================================================
   시트 틀
   ========================================================= */
.rd-sheet{height:calc(100dvh - max(12px, env(safe-area-inset-top)));max-height:none}
.rd-sheet[open]{display:flex;flex-direction:column}
.rd-bar{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;align-items:center;gap:6px;padding:8px 8px 8px 6px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}
.rd-icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:none;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-icon-btn:hover{background:var(--surface-2)}
.rd-icon-btn:focus-visible,.rd-ver:focus-visible,.rd-cite:focus-visible,.rd-toc-btn:focus-visible,.rd-table-wide:focus-visible,.rd-menu-item:focus-visible,.rd-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-more{font-size:22px;grid-column:4}
.rd-who{display:flex;align-items:center;gap:8px;min-width:0}
.rd-who-av{flex:none}
.rd-who-av .av{width:30px;height:30px;border-radius:10px}
.rd-who-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.rd-who-name{font-weight:700}
.rd-who-duty{color:var(--ink-2)}
.rd-ver{display:inline-flex;align-items:center;gap:3px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;grid-column:3}
.rd-ver.is-old{background:var(--appr-bg);color:var(--appr-ink)}
.rd-ver-caret{font-size:10px;color:var(--ink-3)}
.rd-ver.is-old .rd-ver-caret{color:inherit}
.rd-ver[hidden],.rd-more[hidden]{display:none}

/* ⋯ 메뉴 */
.rd-menu{position:absolute;z-index:5;right:8px;top:calc(100% + 4px);min-width:208px;max-width:calc(100% - 16px);padding:8px;border-radius:16px;background:var(--surface);box-shadow:0 12px 32px -12px var(--shadow-strong),0 0 0 1px var(--line);display:flex;flex-direction:column}
.rd-menu[hidden]{display:none}
.rd-menu-item{min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:none;text-align:left;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;word-break:keep-all}
.rd-menu-item:hover:not(:disabled){background:var(--surface-2)}
.rd-menu-item:disabled{color:var(--ink-3);cursor:default}
.rd-menu-item small{font-size:12.5px}

/* 읽기 진행 막대 */
.rd-progress{flex:none;height:3px;background:var(--surface);overflow:hidden}
.rd-progress>span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.rd-progress>span{transition:none}}

.rd-body{flex:1 1 auto;min-height:0;overflow-x:hidden;padding-top:0;padding-bottom:80px;background:var(--bg)} /* 끝에서도 [목차] 버튼이 글을 가리지 않게 */
.rd-article{min-width:0;max-width:680px;margin:0 auto;padding-top:16px}

/* 상태 (불러오는 중 · 오류) */
.rd-state{margin-top:16px}
.rd-error{padding:24px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-align:center}
.rd-state-av .av{width:56px;height:56px;border-radius:18px;margin:0 auto 8px;background:var(--lead-tint)}
.rd-state-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.3px;word-break:keep-all}
.rd-state-text{margin:6px 0 0;font-size:14px;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.rd-state-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.rd-empty{margin:24px 0;padding:24px 12px;border-radius:18px;border:1px dashed var(--line);color:var(--ink-3);text-align:center;word-break:keep-all}

/* 제목 · 메타 */
.rd-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:24px}
.rd-pill{padding:3px 9px;font-size:12px}
.rd-pill.is-soft{background:var(--surface-2)}
.rd-kind{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.rd-title{margin:10px 0 0;font-family:var(--font-display);font-weight:700;font-size:25px;line-height:1.3;letter-spacing:-.5px;word-break:keep-all;overflow-wrap:anywhere}
.rd-title:focus{outline:none}
.rd-meta{margin:8px 0 0;font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rd-old{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:12px 0 0;padding:10px 12px;border-radius:14px;background:var(--appr-bg);color:var(--appr-ink);font-size:14px;font-weight:500;word-break:keep-all}
.rd-old span{flex:1 1 160px;min-width:0}
.rd-old .btn{flex:none}

/* =========================================================
   본문 글자 (모바일 읽기)
   ========================================================= */
.rd-md{margin-top:20px;font-size:17px;line-height:1.7;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;min-width:0}
.rd-md>*:first-child{margin-top:0}
.rd-md p{margin:0 0 .9em}
.rd-md h1,.rd-md h2,.rd-md h3,.rd-md h4{margin:1.7em 0 .55em;line-height:1.35;letter-spacing:-.3px;scroll-margin-top:12px}
.rd-md h1{font-family:var(--font-display);font-size:23px}
.rd-md h2{font-family:var(--font-display);font-size:21px;padding-top:2px}
.rd-md h3{font-size:18.5px;font-weight:700}
.rd-md h4{font-size:17px;font-weight:700;color:var(--ink-2)}
.rd-md h2:focus,.rd-md h3:focus{outline:none}
.rd-md strong{font-weight:700}
.rd-md em{font-style:italic}
.rd-md del{color:var(--ink-3)}
.rd-md ul,.rd-md ol{margin:0 0 .9em;padding-left:1.35em}
.rd-md li{margin:.3em 0}
.rd-md li>ul,.rd-md li>ol{margin:.3em 0 0}
.rd-md li>p{margin:0 0 .5em}
.rd-md li::marker{color:var(--ink-3)}
.rd-md ol>li::marker{font-variant-numeric:tabular-nums;font-weight:700}
.rd-md blockquote{margin:0 0 1em;padding:12px 14px 12px 16px;border-radius:14px;background:var(--accent-soft);border-left:4px solid var(--brand);color:var(--ink)}
.rd-md blockquote>*:last-child{margin-bottom:0}
.rd-md blockquote blockquote{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.rd-md hr{border:0;height:1px;background:var(--line);margin:1.8em 0}
.rd-md a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rd-md code{font-family:var(--font-mono);font-size:.86em;padding:.1em .38em;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);word-break:break-all}
.rd-pre{margin:0 0 1em;padding:14px 16px;border-radius:14px;background:var(--code-bg);color:var(--code-ink);overflow-x:auto;font-size:14px;line-height:1.55;-webkit-overflow-scrolling:touch}
.rd-pre code{padding:0;border:0;background:none;color:inherit;font-size:inherit;word-break:normal;white-space:pre}
.rd-md img{max-width:100%;height:auto}
.rd-figure{margin:1.2em 0}
.rd-img{display:block;width:100%;height:auto;border-radius:14px;background:var(--surface-2);cursor:zoom-in}
.rd-img:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-figure figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink-3);text-align:center}

/* 출처 칩 [M3] — 글 줄 높이를 지키면서 누르는 곳은 넓게 */
.rd-cite{position:relative;display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:24px;margin:0 2px;padding:0 6px;border:0;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-text);font-family:var(--font-body);font-size:11.5px;font-weight:700;line-height:1;vertical-align:2px;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-cite::after{content:"";position:absolute;inset:-12px -4px}
.rd-cite:hover{background:color-mix(in srgb,var(--accent) 22%,var(--accent-soft))}
.rd-cite:disabled{cursor:default}
.rd-cite.is-static{cursor:inherit;vertical-align:0}
.rd-cite.is-static::after{content:none}

/* 표: 가로 스크롤 · 첫 열 고정 · 숫자 오른쪽 */
.rd-table{margin:1.2em 0;min-width:0}
.rd-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:14px;border:1px solid var(--line);background:var(--surface);max-width:100%}
.rd-table-scroll:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-table table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:15px;line-height:1.45}
.rd-table th,.rd-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:4.5em;max-width:15em;word-break:keep-all;overflow-wrap:break-word}
.rd-table tbody tr:last-child>*{border-bottom:0}
.rd-table thead th{background:var(--surface-2);font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.rd-table tbody th{font-weight:700}
.rd-table tr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line);min-width:7.5em;max-width:min(11em, 42vw)}
.rd-table thead tr>:first-child{background:var(--surface-2);z-index:2}
.rd-table .rd-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.rd-table-tools{display:flex;justify-content:flex-end;margin-top:2px}
.rd-table-wide{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;border:0;border-radius:10px;background:none;color:var(--ink-2);font-size:13.5px;font-weight:700;cursor:pointer}
.rd-table-wide:hover{background:var(--surface-2)}
.rd-table-wide span{font-size:15px}

/* 끝: 출처 절 · 바닥 정보 */
.rd-sources{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.rd-sources-title{margin:0 0 8px;font-family:var(--font-display);font-size:18px;letter-spacing:-.3px}
.rd-src-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rd-src-item{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;gap:10px;width:100%;min-height:52px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.rd-src-item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.rd-src-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-src-item .rd-cite{flex:none;margin:2px 0 0}
.rd-src-text{display:flex;flex-direction:column;min-width:0}
.rd-src-title{font-size:14.5px;font-weight:700;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.rd-src-sub{margin-top:2px;font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere}
.rd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:24px;padding:12px 0 8px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rd-dot{color:var(--line)}
.rd-link{min-height:44px;padding:0 4px;margin:-12px 0;border:0;background:none;color:var(--accent-text);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* =========================================================
   아래 고정 줄 · 목차 버튼
   ========================================================= */
.rd-dock-wrap{position:relative;flex:none}
.rd-dock{padding:12px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:var(--surface);border-top:1px solid var(--line)}
.rd-dock[hidden]{display:none}
.rd-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}
.rd-actions>.btn:only-child{grid-column:1 / -1}
.rd-actions .btn{min-width:0;padding-left:10px;padding-right:10px;word-break:keep-all}
.rd-note{margin-bottom:10px}
.rd-note-input{max-height:calc(1.5em * 4 + 26px)}
.rd-status{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:14px;font-weight:500;line-height:1.45;word-break:keep-all}
.rd-status:only-child{margin-bottom:0}
.rd-status:focus{outline:none}
.rd-status.is-working{background:var(--work-bg);color:var(--work)}
.rd-status.is-done{background:var(--done-bg);color:var(--done)}
.rd-status-dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;animation:rdPulse 1.4s ease-in-out infinite}
@keyframes rdPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.rd-status-dot{animation:none}}
.rd-toc-btn{position:absolute;right:max(16px, env(safe-area-inset-right));bottom:calc(100% + 12px);z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:999px;
  background:var(--charcoal);color:var(--charcoal-ink);font-size:14px;font-weight:700;box-shadow:0 8px 20px -8px var(--shadow-strong);cursor:pointer}
.rd-toc-btn[hidden]{display:none}
.rd-toc-btn span{font-size:13px}

/* =========================================================
   작은 시트들 (버전 · 출처 · 목차 · 크게 보기)
   ========================================================= */
.rd-mini{max-height:min(82dvh, calc(100dvh - 40px))}
.rd-mini .sheet-bar{grid-template-columns:minmax(64px,1fr) minmax(0,auto) minmax(64px,1fr)}
.rd-mini .sheet-bar h2{grid-column:2}
.rd-mini-body{padding-top:12px}
.rd-mini-lead{margin:0 0 12px;font-size:14px;color:var(--ink-2);word-break:keep-all}
.rd-ver-list,.rd-toc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rd-ver-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.rd-ver-item:focus-visible,.rd-toc-item:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-ver-item.is-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.rd-ver-no{flex:none;min-width:40px;font-family:var(--font-display);font-size:18px;font-variant-numeric:tabular-nums}
.rd-ver-text{display:flex;flex-direction:column;min-width:0;flex:1}
.rd-ver-when{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rd-ver-now{font-size:12px;font-weight:700;color:var(--accent-text)}
.rd-latest{flex:none;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:700}
.rd-cite-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rd-src-kind{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface-2);color:var(--ink-2)}
.rd-src-kind.is-metric{background:var(--accent-soft);color:var(--accent-text)}
.rd-src-kind.is-data{background:var(--idle-bg);color:var(--idle)}
.rd-src-kind.is-web{background:var(--work-bg);color:var(--work)}
.rd-cite-title{margin:0;font-size:17px;font-weight:700;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere}
.rd-src-dl{margin:14px 0 0;display:grid;gap:10px}
.rd-src-dl>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:baseline}
.rd-src-dl dt{font-size:13px;font-weight:700;color:var(--ink-3)}
.rd-src-dl dd{margin:0;font-size:14.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.rd-src-url{color:var(--accent-text);word-break:break-all}
.rd-src-query{display:block;font-family:var(--font-mono);font-size:13px;padding:6px 8px;border-radius:8px;background:var(--surface-2);word-break:break-all}
.rd-cite-actions{margin-top:16px}
.rd-toc-list li.is-h3{padding-left:16px}
.rd-toc-item{all:unset;box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:48px;padding:10px 12px;border-radius:12px;background:var(--surface);font-size:15px;font-weight:700;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere;cursor:pointer}
.rd-toc-list li.is-h3 .rd-toc-item{font-weight:500;color:var(--ink-2);background:none;min-height:44px}
.rd-toc-item:hover{background:var(--surface-2)}
/* 표 크게 보기: 화면을 꽉 채워요 (가로로 돌리면 더 넓게) */
.rd-wide{width:100%;max-width:100%;height:calc(100dvh - max(12px, env(safe-area-inset-top)));max-height:none}
.rd-wide .rd-table{margin:0}
.rd-table-big .rd-table-scroll{max-height:calc(100dvh - 120px);overflow:auto}
.rd-table-big table{font-size:14.5px}
.rd-table-big th,.rd-table-big td,.rd-table-big tr>:first-child{max-width:none;white-space:nowrap} /* 한 줄씩 펼쳐 놓고 가로로 밀어 봐요 */
.rd-table-big thead th{position:sticky;top:0;z-index:2}
.rd-table-big thead tr>:first-child{z-index:3}
.rd-zoom{width:100%;max-width:100%;height:calc(100dvh - max(12px, env(safe-area-inset-top)));max-height:none}
.rd-zoom .sheet-body{display:flex;align-items:center;justify-content:center;flex:1}
.rd-zoom-fig{margin:0;width:100%}
.rd-zoom-fig img{display:block;width:100%;height:auto;max-height:calc(100dvh - 180px);object-fit:contain;border-radius:12px;background:var(--surface-2)}
.rd-zoom-fig figcaption{margin-top:10px;font-size:14px;color:var(--ink-2);text-align:center;word-break:keep-all}
.rd-zoom-hint{margin:6px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center}

@media (max-width:359px){
  .rd-title{font-size:22px}
  .rd-md{font-size:16.5px}
  .rd-who-av{display:none}
  .rd-ver{padding:0 8px}
}

/* =========================================================
   문서함 '결과물' 탭 (docs.js) — 카드 모양은 docs.css의 .docs-card를 그대로 써요
   ========================================================= */
.rd-dl-filters{display:flex;align-items:flex-start;gap:8px;margin-top:12px;min-width:0}
.rd-dl-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.rd-dl-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:500;cursor:pointer;max-width:100%}
.rd-dl-chip.is-all{padding-left:14px;padding-right:14px}
.rd-dl-chip .av{width:26px;height:26px;border-radius:9px;flex:none}
.rd-dl-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.rd-dl-chip:focus-visible,.rd-dl-arch:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.rd-dl-arch{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:13.5px;font-weight:700;cursor:pointer}
.rd-dl-arch[aria-pressed="true"]{background:var(--charcoal);color:var(--charcoal-ink)}
.rd-dl-arch-note{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:13px;word-break:keep-all}
.rd-dl-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.rd-dl-top .pill{padding:1px 8px;font-size:11.5px;gap:4px}
.rd-dl-top .pill::before{width:5px;height:5px}
.rd-dl-kind{font-size:12px;font-weight:700;color:var(--accent-text)}
.rd-dl-date{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rd-dl-more{display:flex;justify-content:center;margin-top:12px}
.rd-dl-more .btn{min-width:140px}