/* 투두 위젯 — 사이트 디자인 변수를 따라갑니다 */
.td-panel {
    --td-bg: var(--card-bg-color, #fff);
    --td-line: var(--card-border-color, #d8dce2);
    --td-text: var(--content-font-color, #25272c);
    --td-mute: color-mix(in srgb, var(--td-text) 55%, transparent);
    --td-soft: color-mix(in srgb, var(--td-text) 7%, transparent);
    --td-accent: var(--btn-accent-bg, #137bea);
    --td-accent-text: var(--btn-accent-text, #fff);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99989;
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    scale: .96;
    translate: 0 10px;
    transition: opacity .2s ease, scale .2s cubic-bezier(.22, .8, .3, 1), translate .2s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .2s;   /* 닫힐 때: 사라진 뒤에 visibility 를 끈다 */
    flex-direction: column;
    width: 330px;
    max-width: calc(100vw - 24px);
    max-height: min(620px, 80vh);
    box-sizing: border-box;
    border: 1px solid var(--td-line);
    border-radius: var(--card-border-radius, 10px);
    background: var(--td-bg);
    color: var(--td-text);
    font-family: var(--content-font-family, inherit);
    font-size: var(--content-font-size, 14px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.td-panel.show {
    visibility: visible; opacity: 1; pointer-events: auto; scale: 1; translate: 0 0;
    transition: opacity .24s ease, scale .26s cubic-bezier(.22, .8, .3, 1), translate .26s cubic-bezier(.22, .8, .3, 1), visibility 0s linear 0s;
}
.td-panel *, .td-panel *::before, .td-panel *::after { box-sizing: border-box; }

.td-panel.is-moving { opacity: .92; }
.td-top { cursor: move; user-select: none; touch-action: none; display: flex; align-items: center; justify-content: space-between; padding: 8px; }
.td-top strong { font-size: 1.05em; }
.td-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; }

.td-panel input[type=text], .td-panel input[type=date], .td-panel select {
    min-width: 0;
    height: 28px;
    border: 1px solid var(--td-line);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .92em;
    padding: 0 7px;
}
.td-panel select option { color: #25272c; background: #fff; }
.td-in { flex: 1; }
.td-note, .td-empty { margin: 10px 0; color: var(--td-mute); font-size: .9em; text-align: center; }

.td-newcat, .td-add { display: flex; gap: 5px; margin: 6px 0 8px; }
.td-add { margin: 6px 0 2px; }
.td-add .td-date { width: 112px; flex: none; }
.td-vis { width: 84px; flex: none; }

/* 아이콘 버튼 */
.td-ib {
    flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--td-mute); font-size: .85em; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.td-ib:hover { background: var(--td-soft); color: var(--td-text); }
.td-ib.on { color: var(--td-accent); }
.td-ib-fill { background: var(--td-accent); color: var(--td-accent-text); }
.td-ib-fill:hover { background: var(--td-accent); color: var(--td-accent-text); filter: brightness(1.1); }

/* 카테고리 */
.td-cat { margin-bottom: 10px; padding: 6px 8px 8px; border: 1px solid var(--td-line); border-radius: 8px; }
.td-cat:last-child { margin-bottom: 0; }
.td-cat.is-dragging { opacity: .55; border-style: dashed; }
.td-cat-head { display: flex; align-items: center; gap: 3px; }
.td-cat-name {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
    padding: 3px 2px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.td-cat-name i { width: 10px; font-size: .7em; color: var(--td-mute); }
.td-cat-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-cat-name em { flex: none; font-style: normal; font-weight: 400; font-size: .8em; color: var(--td-mute); }
.td-cat-head .td-vis { width: 78px; height: 24px; font-size: .8em; }
.td-visbadge { flex: none; width: 24px; text-align: center; color: var(--td-mute); font-size: .8em; opacity: .2; }

/* 항목 */
.td-panel { --td-lh: calc(var(--content-font-size, 14px) * 1.4); }
.td-items { list-style: none; margin: 4px 0 0; padding: 0; min-height: 6px; }
.td-item { border-radius: 6px; }
.td-item.is-dragging { opacity: .5; background: var(--td-soft); outline: 1px dashed var(--td-line); }
.td-item.td-editing, .td-subedit { display: flex; align-items: center; gap: 5px; padding: 4px 2px; list-style: none; }

/* 한 줄: 체크박스와 글 첫 줄의 높이를 맞춘다 (모두 --td-lh 한 줄 높이 기준) */
.td-row { display: flex; align-items: flex-start; gap: 6px; padding: 4px 2px; border-radius: 6px; list-style: none; }
.td-hoverable .td-row:hover { background: var(--td-soft); }   /* 정렬·편집 모드에서만 */
.td-row.is-dragging, .td-subitem.is-dragging { opacity: .5; background: var(--td-soft); outline: 1px dashed var(--td-line); }
.td-text { flex: 1; min-width: 0; word-break: break-word; line-height: var(--td-lh); }
.td-row.is-done .td-due { opacity: .6; }
.td-due { transition: opacity .3s ease; }
.td-link { color: var(--td-accent); text-decoration: underline; }
.td-pct { margin-left: 8px; font-style: normal; font-size: .78em; color: var(--td-mute); font-variant-numeric: tabular-nums; }
.td-due { flex: none; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; height: var(--td-lh); font-size: .78em; color: var(--td-mute); white-space: nowrap; }
.td-due.is-soon { color: #ef4444; font-weight: 700; }


/* 하위 투두 */
.td-subs { list-style: none; margin: 0 0 2px 18px; padding: 0 0 0 6px; }
.td-subitem { font-size: .95em; }

/* 달력 아이콘 날짜 버튼 */
.td-datewrap { position: relative; flex: none; display: inline-flex; }
.td-date-hidden { position: absolute; left: 0; top: 100%; width: 1px; height: 1px; padding: 0; border: 0 !important; opacity: 0; pointer-events: none; }

.td-grip, .td-grip-sp { flex: none; width: 14px; height: var(--td-lh); display: inline-flex; align-items: center; justify-content: center; font-size: .8em; }
.td-grip { color: var(--td-mute); cursor: grab; touch-action: none; user-select: none; }
.td-grip:active { cursor: grabbing; }
.td-cat-grip { width: 16px; height: auto; }

@media (max-width: 600px) {
    .td-panel { width: calc(100vw - 24px); max-height: 70vh; }
}

/* 카테고리 탭 */
.td-tabs { display: flex; gap: 4px; margin: 0 0 8px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.td-tab {
    flex: none; max-width: 130px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
    border: 1px solid var(--td-line); border-radius: 14px; background: transparent; color: var(--td-mute);
    font: inherit; font-size: .88em; cursor: pointer;
}
.td-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-tab em { font-style: normal; font-size: .85em; opacity: .75; }
.td-tab:hover { color: var(--td-text); background: var(--td-soft); }
.td-tab.is-active { background: var(--td-accent); border-color: var(--td-accent); color: var(--td-accent-text); }
.td-tab-add { padding: 0 9px; }

/* ... 메뉴 */
.td-more { position: relative; flex: none; display: inline-flex; }
.td-menu {
    display: none; position: absolute; right: 0; top: 100%; z-index: 5; min-width: 84px; padding: 4px;
    border: 1px solid var(--td-line); border-radius: 8px; background: var(--td-bg); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.td-more.is-open .td-menu { display: block; }
.td-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 5px;
    background: none; color: var(--td-text); font: inherit; font-size: .88em; text-align: left; cursor: pointer; white-space: nowrap;
}
.td-menu button:hover { background: var(--td-soft); }
.td-menu button i { width: 14px; text-align: center; color: var(--td-mute); }
.td-cat-head.td-editing { gap: 5px; margin-bottom: 2px; }
.td-item .td-more .td-ib, .td-item .td-more { opacity: 1; }

/* 입력창 포커스 효과 없음 — 사이트 공용 input:focus 가 !important 라서 여기도 !important */
#ra0-todo-panel input[type=text],
#ra0-todo-panel input[type=date],
#ra0-todo-panel select {
    transition: none !important;
    box-shadow: none !important;
    outline: none !important;
}
#ra0-todo-panel input[type=text]:hover,
#ra0-todo-panel input[type=text]:focus,
#ra0-todo-panel input[type=text]:active,
#ra0-todo-panel input[type=date]:hover,
#ra0-todo-panel input[type=date]:focus,
#ra0-todo-panel input[type=date]:active,
#ra0-todo-panel select:hover,
#ra0-todo-panel select:focus,
#ra0-todo-panel select:active {
    border: 1px solid var(--td-line) !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.td-sortbtn[hidden] { display: none; }
.td-sortbtn.on { background: var(--td-accent); color: var(--td-accent-text); }

/* 링크 넣기 버튼 + 입력 팝업 */
.td-linkwrap { position: relative; flex: none; display: inline-flex; }
.td-linkpop {
    display: none; position: absolute; right: -30px; top: 100%; z-index: 6; width: 230px; margin-top: 4px; padding: 8px;
    flex-direction: column; gap: 5px;
    border: 1px solid var(--td-line); border-radius: 8px; background: var(--td-bg); box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.td-linkwrap.is-open .td-linkpop { display: flex; }
.td-linkpop .td-in { flex: none; width: 100%; }
.td-linkok {
    align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px;
    background: var(--td-accent); color: var(--td-accent-text); font: inherit; font-size: .88em; cursor: pointer;
}
.td-linkwrap.is-open > .td-ib { color: var(--td-accent); }

.td-tools { display: inline-flex; gap: 2px; }

/* 링크 알약 칩 (아이콘만) */
.td-linkchip, .td-linkslot { flex: none; width: 26px; height: calc(var(--td-lh) - 4px); margin-top: 2px; }
.td-linkchip {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--td-soft); color: var(--td-accent); font-size: .72em; text-decoration: none;
}
.td-linkchip:hover { background: var(--td-accent); color: var(--td-accent-text); }
.td-row .td-ib { margin-top: calc((var(--td-lh) - 26px) / 2); }
.td-linkpop .td-linkbtns { display: flex; justify-content: flex-end; gap: 6px; }
.td-linkdel {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--td-line); border-radius: 6px;
    background: transparent; color: var(--td-text); font: inherit; font-size: .88em; cursor: pointer;
}
.td-linkok { align-self: auto; }

/* 체크박스는 글 한 줄 높이 안에서 세로 중앙 */
.td-checkwrap { flex: none; display: inline-flex; align-items: center; height: var(--td-lh); }
.td-checkwrap .td-check { margin: 0 !important; vertical-align: middle; }

/* 드롭다운 — a_scrap 스킨의 드롭다운과 같은 모양 (높이·폭은 이 위젯에 맞춤) */
.td-dd { position: relative; flex: none; }
.td-ddvis { width: 98px; }
.td-ddtarget { width: 100%; }
.td-cat-head .td-ddvis { width: 92px; }
.td-dd__btn {
    display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; width: 100%; min-width: 0; height: 28px; padding: 0 10px;
    border-radius: 10px; color: var(--content-font-color); background: rgb(from var(--card-bg-color) r g b / 50%);
    border: 1px solid var(--card-border-color); font: inherit; font-size: .92em; text-align: left; cursor: pointer; white-space: nowrap;
    appearance: none; -webkit-appearance: none;
}
.td-dd__btn:focus, .td-dd__btn:focus-visible { outline: none; box-shadow: none; }
.td-dd__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.td-dd__arrow { margin-left: auto; font-size: .7em; opacity: .8; transition: transform .18s ease; }
.td-dd__btn.is-open .td-dd__arrow { transform: rotate(180deg); }

.td-dd__menu {
    --dd-hover-bg: color-mix(in srgb, var(--btn-secondary-bg) 45%, transparent);
    position: fixed; box-sizing: border-box; z-index: 100001; min-width: 120px; max-height: min(260px, 60vh); height: fit-content; overflow-y: auto;
    padding: 4px 0; border: 1px solid var(--container-border-color); border-radius: 12px;
    background: var(--container-bg-color); backdrop-filter: blur(10px);
    color: var(--content-font-color); font-family: var(--content-font-family, inherit); font-size: calc(var(--content-font-size, 14px) * .92);
}
.td-dd__item { position: relative; z-index: 0; display: block; padding: 7px 12px; color: var(--content-font-color); opacity: .9; cursor: pointer; white-space: nowrap; }
.td-dd__item::before { content: ""; position: absolute; inset: 0 4px; z-index: -1; border-radius: 8px; background: transparent; }
.td-dd__item + .td-dd__item { margin-top: 2px; }
.td-dd__item:hover, .td-dd__item.is-active { opacity: 1; font-weight: 700; }
.td-dd__item:hover::before, .td-dd__item.is-active::before { background: var(--dd-hover-bg); }

/* 진행도 막대 */
.td-bar { display: block; height: 4px; border-radius: 999px; background: var(--td-soft); overflow: hidden; }
.td-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--td-accent); transition: width .25s ease; }
.td-bar-cat { margin: 3px 2px 2px; }
.td-bar-sub { width: auto; margin: 0 2px 2px calc(2px + var(--tdc-size, 16px) + 6px); }   /* 글자 시작점(체크박스 오른쪽)에서 시작 */
.td-sorting .td-bar-sub { margin-left: calc(2px + 14px + 6px + var(--tdc-size, 16px) + 6px); }   /* 손잡이 폭 + 간격 */
.td-cat-name em { font-variant-numeric: tabular-nums; }

/* 체크 모션: 취소선이 왼쪽에서 오른쪽으로 그어지고 글자색이 서서히 옅어진다 */
.td-t {
    color: var(--td-text);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 58%;
    background-size: 0 1px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size .32s ease, color .32s ease;
}
.td-row.is-done .td-t { background-size: 100% 1px; color: var(--td-mute); }
.td-item, .td-subitem { will-change: auto; }

/* 탭 줄: 목록 위에 고정 (목록만 스크롤) */
.td-tabhost { flex: none; padding: 0 12px; }
.td-tabhost .td-tabs { margin-bottom: 6px; }
.td-tabhost .td-newcat { margin: 0 0 6px; }

/* 카테고리 탭·카테고리 이름: 홈페이지 제목 폰트 */
.td-tab, .td-cat-name { font-family: var(--title-font-family, inherit); font-size: var(--title-font-size, inherit); }
.td-tab { height: auto; min-height: 28px; }
.td-panel.td-admin-hidden { display: none !important; }

/* 열람 권한이 없는 카테고리 */
.td-cat-name.is-static { cursor: default; }
.td-cat.is-locked .td-cat-name i { opacity: .5; }

@media (prefers-reduced-motion: reduce) { .td-panel, .td-panel.show { transition: none; } }

/* ===== 제어 센터(widget_a_CC) 안에 담겼을 때: 떠 있는 창이 아니라 칸 안에 그대로 놓인다 ===== */
.td-panel.td-embed {
    position: static;
    transform: none;
    translate: none;
    scale: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
    width: auto;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.td-panel.td-embed .td-top { cursor: default; padding: 0 0 4px; }
.td-panel.td-embed .td-top > .td-ib { display: none; }            /* 닫기 버튼은 제어 센터의 것을 쓴다 */
.td-panel.td-embed .td-tools { opacity: 1; pointer-events: auto; }
.td-panel.td-embed .td-body { overflow: visible; padding: 4px 0 0; }
.td-panel.td-embed .td-tabhost { padding: 0; }