body { font-family: -apple-system, system-ui, "Malgun Gothic", sans-serif;
       background:#fff; color:#111; margin:0; padding:24px 16px; }
h1 { font-size:20px; margin:0 0 20px; }
.card { background:#fbfbff; border:1px solid #e5e5e8; border-radius:14px;
        padding:16px; margin-bottom:16px; }
.label { color:#777; font-size:13px; margin-bottom:6px; }
#footer { text-align:center; color:#bbb; font-size:11px; margin:24px 0 4px; }
#versionButton { width:auto; margin:0; padding:4px; border-radius:4px; background:transparent;
                 color:#777; font:inherit; text-decoration:underline; cursor:pointer; }
#versionButton:focus-visible { outline:2px solid #1a73e8; outline-offset:2px; }
#updatesDialog { box-sizing:border-box; width:min(480px, calc(100vw - 32px)); max-height:80vh;
                 overflow:auto; border:0; border-radius:16px; padding:24px; color:#111; background:#fff; }
#updatesDialog::backdrop { background:rgba(0,0,0,.45); }
#updatesDialog h2 { margin:0 0 20px; font-size:20px; }
.update-release + .update-release { border-top:1px solid #eee; margin-top:20px; padding-top:20px; }
.update-release h3 { margin:0 0 8px; font-size:16px; }
.update-release time { display:inline-block; color:#777; font-size:12px; font-weight:normal; margin-left:8px; }
.update-release ul { padding-left:20px; margin:0; font-size:14px; line-height:1.7; }
.update-release li + li { margin-top:6px; }
#updatesDialog button { padding:12px; font-size:15px; background:#eee; color:#333; }
.value { font-size:16px; line-height:1.5; word-break:break-all; }
.value a { color:#1a73e8; }
button { width:100%; padding:18px; font-size:18px; font-weight:bold;
         border:none; border-radius:14px; background:#1a73e8; color:#fff;
         margin-top:8px; }
button:disabled { background:#bbb; }
#videoDownloadDialog { width:min(440px, calc(100vw - 64px)); border:0; border-radius:18px; padding:24px; max-height:80vh; overflow:auto; }
#videoDownloadDialog::backdrop { background:rgba(0,0,0,.45); }
#videoDownloadDialog h2 { font-size:20px; margin:0 0 12px; }
#videoDownloadDialog p { font-size:14px; line-height:1.6; color:#666; }
#videoDownloadDialog label { display:block; font-size:14px; margin:16px 0 8px; }
#videoDownloadUrl { box-sizing:border-box; width:100%; border:1px solid #ccc; border-radius:10px; padding:12px; font-size:16px; }
#videoDownloadStatus.error { color:#c0392b; }
.video-download-link { display:block; padding:15px; margin-top:10px; border-radius:12px; text-align:center; background:#1a7f37; color:white; text-decoration:none; font-weight:bold; }
#videoDownloadDialog .video-download-close { background:#eee; color:#333; font-size:15px; padding:12px; }
#result { margin-top:16px; white-space:pre-wrap; font-size:14px; color:#1a7f37; }
#result.err { color:#c0392b; }
#log { margin-top:12px; white-space:pre-wrap; word-break:break-all; font-size:12px;
       font-family:Consolas, monospace; color:#555; background:#f3f3f5;
       border-radius:10px; padding:12px; display:none; }
/* 2행 그리드: 1행은 체크박스+제목(체크박스가 제목 좌측), 2행은 편집 버튼을
   제목 아래 우측에 배치(justify-self:end). flex-wrap 기반 계산(calc 폭 나누기)은
   반올림 오차로 체크박스까지 다음 줄로 밀려나는 문제가 있어서 grid로 바꿨다. */
.pending-item { display:grid; grid-template-columns:18px 1fr; column-gap:10px; row-gap:6px;
                padding:10px 4px; border-bottom:1px solid #e5e5e8; font-size:15px; }
.pending-item:last-child { border-bottom:none; }
.pending-item input { grid-column:1; grid-row:1; width:18px; height:18px; margin:2px 0 0; }
.pending-item label { grid-column:2; grid-row:1; word-break:break-all; }
.pending-item.posted label { color:#999; }
.pending-item .edit-btn { grid-column:2; grid-row:2; justify-self:end; width:auto;
                           padding:6px 10px; font-size:13px; font-weight:normal;
                           border-radius:8px; background:#fff; border:1px solid #ccc;
                           color:#333; margin-top:0; }
.recent-draft-item { padding:10px 4px; border-bottom:1px solid #e5e5e8; font-size:15px;
                      cursor:pointer; word-break:break-all; }
.recent-draft-item:last-child { border-bottom:none; }
.recent-draft-item:active { background:#f5f5f7; }
.edit-panel { background:#fff; border:1px solid #e5e5e8; border-radius:10px;
              padding:12px; margin:4px 4px 12px; }
.edit-sub-label { font-size:12px; color:#777; margin:8px 0 4px; }
.thumb-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:10px;
             scrollbar-width:auto;
             /* 모바일 브라우저는 스크롤바를 안 보여주는 경우가 많아서(스와이프
                중에만 잠깐 뜨거나 아예 안 뜸), 넘칠 때 항상 보이는 좌우 그림자로
                "더 있음"을 알려준다. 흰 배경(cover)이 content와 같이 스크롤돼서
                맨 끝에 닿으면 그림자를 가려 없어지고, 그림자 자체는 컨테이너에
                고정돼 있다(scroll) - 전형적인 CSS 스크롤 그림자 기법. */
             background:
               linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left,
               linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right,
               linear-gradient(to right, rgba(0,0,0,.2), rgba(0,0,0,0)) left,
               linear-gradient(to left, rgba(0,0,0,.2), rgba(0,0,0,0)) right;
             background-repeat: no-repeat;
             background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
             background-attachment: local, local, scroll, scroll; }
.thumb-row::-webkit-scrollbar { height:12px; }
.thumb-row::-webkit-scrollbar-thumb { background:#bbb; border-radius:6px; }
.thumb-row::-webkit-scrollbar-track { background:#f0f0f0; border-radius:6px; }
.thumb { position:relative; flex:none; width:72px; text-align:center; cursor:grab;
         touch-action:none; }
.thumb img { width:72px; height:72px; object-fit:cover; border-radius:8px;
             border:1px solid #ddd; background:#eee; display:block; }
.thumb img.thumb-broken { opacity:0; }
.thumb-badge { position:absolute; top:4px; left:4px; color:#fff; font-size:16px;
               text-shadow:0 0 3px #000; }
.thumb-dragging { opacity:0.85; z-index:5; cursor:grabbing; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.thumb-remove-btn { position:absolute; top:-4px; right:-4px; width:22px; height:22px; border:none;
                     background:transparent; color:#fff; font-size:20px; font-weight:bold; line-height:1;
                     cursor:pointer; z-index:6; text-shadow:0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; }
/* Threads 미리보기 띠: 올라갈 순서만 보여주고 드래그로 바꾸지 않는다
   (사진 선택은 글 목록의 "내용 수정" 편집 화면에서 한다). */
.preview-strip .thumb { cursor:default; touch-action:auto; }
.preview-strip .thumb video { width:72px; height:72px; object-fit:cover; border-radius:8px;
                              border:1px solid #ddd; background:#000; display:block; }
.thumb-order { position:absolute; bottom:2px; right:4px; color:#fff; font-size:11px;
               font-weight:bold; text-shadow:0 0 3px #000, 0 0 3px #000; }
.edit-textarea { width:100%; min-height:120px; font-size:14px; padding:8px;
                  border-radius:8px; border:1px solid #ccc; box-sizing:border-box;
                  font-family:inherit; }
.edit-title-input { width:100%; min-height:44px; font-size:14px; padding:8px;
                     border-radius:8px; border:1px solid #ccc; box-sizing:border-box;
                     font-family:inherit; resize:vertical; }
.edit-select { width:100%; font-size:14px; padding:10px 8px; border-radius:8px;
                border:1px solid #ccc; box-sizing:border-box; font-family:inherit;
                background:#fff; color:#111; }
.edit-select-row { display:flex; gap:8px; }
.edit-select-field { flex:1; min-width:0; }
.position-row { display:flex; gap:8px; margin-top:4px; }
.position-btn { flex:1; width:auto; padding:10px; font-size:14px; font-weight:normal;
                 border-radius:8px; border:1px solid #ccc; background:#fff; color:#333;
                 margin-top:0; }
.position-btn.active { background:#1a73e8; color:#fff; border-color:#1a73e8; }
.edit-btn-row { display:flex; gap:8px; margin-top:10px; }
.edit-btn-row button { flex:1; width:auto; padding:12px; font-size:15px; margin-top:0; }
.edit-save-btn { background:#1a7f37; color:#fff; }
.edit-cancel-btn { background:#ccc; color:#333; }
#progressWrap { display:none; margin-top:10px; }
#progress .bar.indeterminate { animation: progress-indeterminate 1.6s ease-in-out infinite; }
@keyframes progress-indeterminate { from { transform:translateX(-100%); } to { transform:translateX(300%); } }
@media (prefers-reduced-motion: reduce) { #progress .bar.indeterminate { animation:none; } }
#progressLabel { font-size:13px; color:#555; margin-bottom:4px; }
#progress { height:8px; border-radius:4px; background:#e5e5e8; overflow:hidden; }
#progress .bar { width:0%; height:100%; border-radius:4px; background:#1a73e8;
                  transition: width 0.4s ease-out; }
.topbar { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.topbar h1 { margin:0; }
#menuBtn { width:auto; padding:8px 12px; font-size:20px; line-height:1; margin-top:0;
           background:#f3f3f5; color:#111; }
#drawerOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:20; }
#drawerOverlay.open { display:block; }
#drawer { position:fixed; top:0; left:0; bottom:0; width:92%;
          background:#fff; box-shadow:2px 0 12px rgba(0,0,0,0.15); z-index:21; overflow-y:auto;
          transform:translateX(-100%); transition:transform 0.2s ease-out; padding:1px; }
#drawer .card { border-radius:0; }
#drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.drawer-header .label { margin-bottom:0; }
#drawerCloseBtn { width:auto; padding:4px; background:none; color:#666; margin-top:0; line-height:0; }
#drawerCloseBtn:hover { color:#111; }
.issue-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; row-gap:10px; }
.issue-tab { flex:none; width:auto; padding:10px 18px; font-size:14px; font-weight:bold;
             border-radius:999px; border:1px solid #e5e5e8; background:#fff; color:#333;
             margin-top:0; }
.issue-tab.active { background:#1a7f37; color:#fff; border-color:#1a7f37; }
.issue-item { display:flex; align-items:center; gap:10px; padding:12px 4px;
              border-bottom:1px solid #e5e5e8; }
.issue-item:last-child { border-bottom:none; }
.issue-rank { flex:none; width:18px; color:#999; font-weight:bold; font-size:15px; }
.issue-title { color:#111; font-size:15px; flex:1; cursor:pointer; }
.issue-title:hover { color:#1a73e8; }
#draftOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:30; }
#draftOverlay.open { display:flex; align-items:center; justify-content:center; padding:16px; }
#draftModal { display:none; background:#fff; border-radius:14px; padding:20px; width:100%;
              max-width:820px; max-height:92vh; overflow-y:auto; box-sizing:border-box; }
#draftOverlay.open #draftModal { display:block; }
.draft-title-input { width:100%; font-size:16px; font-weight:bold; padding:8px; border-radius:8px;
              border:1px solid #ccc; box-sizing:border-box; margin-bottom:8px; font-family:inherit; }
#draftBody { width:100%; min-height:480px; font-size:14px; line-height:1.6; padding:8px;
             border-radius:8px; border:1px solid #ccc; box-sizing:border-box; font-family:inherit; }
#draftImagesNotice { font-size:12px; color:#888; margin-top:6px; }
#draftBodyPreview { margin-top:10px; }
#draftBodyPreview:empty { display:none; }
#draftBodyPreview p { margin:0 0 10px; }
#draftBodyPreview em { color:#666; font-size:12px; display:block; text-align:center; }
#draftImageGallery:empty { display:none; }
#draftImageGalleryGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px; }
.draft-image-cell { position:relative; display:block; aspect-ratio:4/3; border-radius:8px;
                     overflow:hidden; border:1px solid #e5e5e8; }
.draft-image-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.draft-image-download { position:absolute; left:0; right:0; bottom:0; padding:6px 0;
                         background:rgba(0,0,0,0.55); color:#fff; font-size:12px;
                         text-align:center; text-decoration:none; }
#draftSources { margin-top:10px; font-size:13px; color:#777; }
#draftSources a { color:#1a73e8; display:block; margin-top:4px; word-break:break-all; }
.draft-btn-row { display:flex; gap:8px; margin-top:10px; }
.draft-btn-row button { flex:1; width:auto; padding:12px; font-size:15px; margin-top:0; }
#popupOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:40; }
#popupOverlay.open { display:flex; align-items:center; justify-content:center; padding:16px; }
#popupModal { display:none; background:#fff; border-radius:14px; padding:20px; width:100%;
              max-width:340px; box-sizing:border-box; }
#popupOverlay.open #popupModal { display:block; }
#popupMessage { font-size:15px; line-height:1.5; white-space:pre-wrap; }
#issueDetailOverlay { display:none; position:fixed; inset:0; background:#fff; z-index:32; }
#issueDetailOverlay.open { display:block; }
#issueDetailModal { display:none; background:#fff; width:100%; height:100%;
                     max-width:none; overflow-y:auto; box-sizing:border-box; padding:16px; }
#issueDetailOverlay.open #issueDetailModal { display:block; }
.issue-detail-title { font-size:16px; font-weight:bold; line-height:1.4; }
.issue-detail-original-link { display:inline-block; margin-top:6px; font-size:13px; color:#1a73e8; }
.issue-detail-rendered { min-height:120px; overflow-x:hidden;
                          font-size:14px; line-height:1.7; padding:10px; border-radius:8px;
                          border:1px solid #ccc; box-sizing:border-box; word-break:break-word; }
.issue-detail-rendered img { width:100%; max-width:100%; height:auto; margin:6px 0; display:block; }
.issue-detail-rendered table { width:auto !important; max-width:100%; }
.issue-detail-rendered a { color:#1a73e8; }
#issueDetailModal .draft-btn-row { position:sticky; bottom:0; z-index:1; background:#fff;
                             padding-top:10px; margin-top:10px;
                             box-shadow:0 -6px 8px -4px rgba(255,255,255,0.9); }
#cropOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:38; }
#cropOverlay.open { display:flex; align-items:center; justify-content:center; padding:6px; }
#cropModal { display:none; background:#fff; border-radius:14px; padding:10px; width:100%;
             max-width:680px; max-height:90vh; overflow-y:auto; box-sizing:border-box; }
#cropOverlay.open #cropModal { display:block; }
#cropStage { position:relative; width:calc(100% - 28px); overflow:hidden;
             touch-action:none; background:#111; border-radius:8px; display:flex;
             align-items:center; justify-content:center; }
/* 위 touch-action:none 영역(드래그/리사이즈용) 오른쪽에 28px짜리 여백을 남겨서,
   모달을 손가락으로 세로 스크롤할 때 크롭 조작과 겹치지 않고 그 여백을 잡고
   스크롤할 수 있게 한다. */
#cropModal .draft-btn-row { position:sticky; bottom:0; z-index:1; background:#fff;
                             padding-top:10px; margin-top:10px;
                             box-shadow:0 -6px 8px -4px rgba(255,255,255,0.9); }
#cropImage { width:100%; max-width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; }
#cropBox { position:absolute; border:2px solid #1a7f37; box-shadow:0 0 0 9999px rgba(0,0,0,0.45);
           cursor:move; touch-action:none; }
.crop-handle { position:absolute; width:16px; height:16px; background:#1a7f37; border-radius:50%;
               border:2px solid #fff; touch-action:none; }
.crop-handle[data-dir="nw"] { left:-8px; top:-8px; cursor:nwse-resize; }
.crop-handle[data-dir="ne"] { right:-8px; top:-8px; cursor:nesw-resize; }
.crop-handle[data-dir="sw"] { left:-8px; bottom:-8px; cursor:nesw-resize; }
.crop-handle[data-dir="se"] { right:-8px; bottom:-8px; cursor:nwse-resize; }
/* 미리보기 썸네일 확대 보기. 크롭 모달보다 위에 뜰 일은 없지만, 같은 z-index
   층에 두면 어느 쪽이 위에 오는지 순서에 의존하게 되어 한 칸 위로 올려둔다. */
#mediaViewer { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:40; }
#mediaViewer.open { display:flex; align-items:center; justify-content:center; padding:16px; }
#mediaViewerBox { position:relative; max-width:min(100%, 720px); max-height:92vh;
                  display:flex; flex-direction:column; align-items:center; gap:8px; }
#mediaViewerStage { max-height:82vh; overflow:auto; border-radius:10px; background:#000; }
#mediaViewerStage img, #mediaViewerStage video { display:block; max-width:100%;
                  max-height:82vh; width:auto; height:auto; border-radius:10px; }
#mediaViewerCaption { color:#fff; font-size:13px; text-align:center; }
#mediaViewerClose { position:absolute; top:-6px; right:-6px; width:36px; height:36px; padding:0;
                    min-height:0; border:none; border-radius:50%; background:#fff; color:#222;
                    font-size:22px; line-height:1; cursor:pointer; z-index:1; }
#formOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:35; }
#formOverlay.open { display:flex; align-items:center; justify-content:center; padding:16px; }
#formModal { display:none; background:#fff; border-radius:14px; padding:20px; width:100%;
             max-width:480px; max-height:90vh; overflow-y:auto; box-sizing:border-box; }
#formOverlay.open #formModal { display:block; }
.form-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid #e5e5e8; }
.form-tab { flex:1; width:auto; padding:10px 4px; font-size:14px; font-weight:bold;
            border-radius:0; border:none; border-bottom:2px solid transparent;
            background:none; color:#999; margin-top:0; }
.form-tab.active { color:#1a73e8; border-bottom-color:#1a73e8; }
.form-pane textarea { width:100%; min-height:90px; font-size:14px; padding:8px;
                       border-radius:8px; border:1px solid #ccc; box-sizing:border-box;
                       font-family:inherit; resize:vertical; }
.label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.related-articles-btn { flex:none; width:auto; padding:6px 12px; font-size:12px; font-weight:bold;
                         border-radius:8px; background:#f3f4f6; color:#333; margin-top:0;
                         border:1px solid #e5e5e8; }
#relatedArticlesPanel:not(:empty) { margin:4px 0 8px; font-size:13px; color:#777; }
.related-article-item { display:flex; align-items:center; gap:8px; padding:8px 4px;
                         border-bottom:1px solid #e5e5e8; }
.related-article-item:last-child { border-bottom:none; }
.related-article-item a { flex:1; color:#111; text-decoration:none; word-break:break-all; font-size:13px; }
.related-article-item a:hover { color:#1a73e8; }