/* 우표 플래너 투두 위젯 — 색을 바꾸고 싶으면 아래 줄만 고치세요 */
.wp-widget, .wp-fab {
    --wp-ink: #2c3644;        /* 펜 선 · 글자 색 */
    --wp-soft: #4d5a6a;       /* 보조 글자 색 */
    --wp-paper: #fcfdfd;      /* 종이 색 */
    --wp-wash: #d9e5f1;       /* 물 번짐 색 */
    --wp-pink: #e3a1b5;       /* 분홍 포인트 */
    --wp-pink-deep: #c9768f;  /* 체크 색 */
    --wp-pink-ink: #a94a68;   /* 분홍 글자 */
    --wp-line: #cfd8e2;       /* 점선 */
    --wp-font-body: var(--content-font-family, sans-serif);
    --wp-font-hand: 'Nanum Pen Script', cursive;
    --wp-font-deco: 'Cormorant Garamond', serif;
    --wp-font-title: 'Gowun Batang', serif;
}

.wp-widget {
    position: fixed;
    right: 20px;
    top: 360px;
    z-index: 790;
    width: 252px;
    box-sizing: border-box;
    padding: 22px 20px 16px;
    color: var(--wp-ink);
    font-family: var(--wp-font-body);
    font-size: 14px;
    line-height: 1.5;
    isolation: isolate;
}
.wp-widget *, .wp-widget *::before, .wp-widget *::after { box-sizing: border-box; }
.wp-paper { position: absolute; inset: 0; z-index: -2; background: var(--wp-paper); box-shadow: 0 10px 30px rgba(44, 54, 68, .14); pointer-events: none; }
.wp-paper::before { content: ""; position: absolute; inset: 0; border: 1px solid #c6d2de; filter: url(#wp-torn); }
.wp-paper::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--wp-ink); filter: url(#wp-ink); }
.wp-wash { position: absolute; top: 7px; right: 7px; z-index: -1; pointer-events: none; }
.wp-wash-fill { fill: var(--wp-wash); opacity: .8; }
.wp-wash-line { fill: none; stroke: var(--wp-ink); stroke-width: .7; filter: url(#wp-ink); }
.wp-spark { fill: var(--wp-paper); stroke: var(--wp-ink); stroke-width: .9; }

/* 테이프 (관리자는 잡고 옮길 수 있어요) */
.wp-tape {
    position: absolute; left: 50%; top: -11px; width: 84px; height: 22px; margin-left: -42px;
    transform: rotate(-2.5deg);
    background: rgba(217, 229, 241, .78);
    border-left: 1px dashed rgba(44, 54, 68, .18); border-right: 1px dashed rgba(44, 54, 68, .18);
    pointer-events: none; z-index: 3;
}
.wp-tape[data-drag] { pointer-events: auto; cursor: grab; touch-action: none; }
.wp-widget.is-dragging .wp-tape { cursor: grabbing; }
.wp-widget.is-dragging { transform: rotate(-.6deg); }
.wp-widget.is-dragging .wp-paper { box-shadow: 0 18px 40px rgba(44, 54, 68, .24); }

/* 머리 */
.wp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wp-date { font-family: var(--wp-font-deco); font-style: italic; font-size: 15px; color: var(--wp-pink-ink); line-height: 1.2; }
.wp-title { margin: 0 0 8px; font-family: var(--wp-font-title); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--wp-ink); }
.wp-fold { position: relative; width: 26px; height: 26px; margin-top: 2px; padding: 0; border: 1px solid var(--wp-ink); border-radius: 50%; background: transparent; color: var(--wp-ink); cursor: pointer; flex: none; }
.wp-fold span { position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: currentColor; }
.wp-widget.is-folded .wp-fold span::after { content: ""; position: absolute; left: 4.25px; top: -4.25px; width: 1.5px; height: 10px; background: currentColor; }
.wp-widget.is-folded .wp-body { display: none; }
.wp-widget.is-folded .wp-title { margin-bottom: 0; }

/* 진행도 */
.wp-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.wp-progress svg { flex: 1 1 0; width: 0; min-width: 0; height: 10px; overflow: visible; }
.wp-progress path { fill: none; stroke-width: 3; stroke-linecap: round; }
.wp-track { stroke: #c6d2de; }
.wp-fill { stroke: var(--wp-pink); }
.wp-count { flex: none; white-space: nowrap; font-family: var(--wp-font-deco); font-size: 15px; color: var(--wp-soft); }

/* 할 일 */
.wp-list, .wp-events { list-style: none; margin: 0; padding: 0; }
.wp-list { max-height: 45vh; overflow-y: auto; }
.wp-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--wp-line); }
.wp-item input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--wp-pink-deep); flex: none; cursor: pointer; }
.wp-item input:disabled { cursor: default; }
.wp-item label { flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.wp-item small { display: block; font-size: 11px; color: var(--wp-pink-ink); }
.wp-item.is-done .wp-text { text-decoration: line-through; color: #7a8796; }
.wp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 7px; }
.wp-empty { padding: 8px 0; color: var(--wp-soft); font-size: 13px; }
.wp-events { margin-top: 8px; }
.wp-events li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: 13px; }
.wp-events .wp-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wp-note { font-family: var(--wp-font-deco); font-size: 14px; color: var(--wp-soft); white-space: nowrap; }
.wp-next { margin: 10px 0 0; font-family: var(--wp-font-hand); font-size: 19px; line-height: 1.2; color: var(--wp-soft); overflow-wrap: anywhere; }
.wp-open { display: block; margin-top: 6px; text-align: right; font-family: var(--wp-font-deco); font-style: italic; font-size: 15px; color: var(--wp-pink-ink); text-decoration: none; }
.wp-open:hover { text-decoration: underline; }
.wp-widget img.ra0-emoticon { height: 1.2em !important; width: auto !important; max-width: 2.4em !important; object-fit: contain; vertical-align: -.35em; margin: 0 .1em; }
.wp-widget :focus-visible, .wp-fab:focus-visible { outline: 2px solid var(--wp-pink-deep); outline-offset: 2px; }

/* 휴대폰: 왼쪽 아래 별 버튼으로 열고 닫아요 (위시리스트 버튼은 오른쪽이라 겹치지 않아요) */
.wp-fab { display: none; }
@media (max-width: 768px) {
    .wp-widget { display: none; top: auto !important; right: auto !important; left: 12px !important; bottom: 66px; width: min(260px, calc(100vw - 24px)); }
    .wp-widget.is-open { display: block; }
    .wp-widget.is-folded .wp-body { display: block; }
    .wp-fold { display: none; }
    .wp-tape[data-drag] { cursor: default; }
    .wp-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; left: 12px; bottom: 16px; z-index: 791;
        width: 42px; height: 42px; padding: 0; border: 1px solid var(--wp-ink); border-radius: 50%;
        background: var(--wp-paper); color: var(--wp-pink-ink); box-shadow: 0 4px 12px rgba(44, 54, 68, .2); cursor: pointer;
    }
    .wp-fab svg { width: 20px; height: 20px; }
    .wp-fab .wp-fab-x { display: none; }
    .wp-fab.is-open .wp-fab-t { display: none; }
    .wp-fab.is-open .wp-fab-x { display: block; }
}
@media (prefers-reduced-motion: reduce) { .wp-widget.is-dragging { transform: none; } }