/* 저장 목록·결과 화면·지첩함 — 2026-10-31 구조 정리로 index.html <style> 401~535줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* ---- 저장 목록 (사주 풀이 입력 화면 하단) ---- */
.saved-list{width:100%;margin:18px auto 0}
.saved-toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:6px 0;font-size:.85rem;color:var(--ink);cursor:pointer}
.saved-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.saved-chev{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.saved-toggle[aria-expanded="true"] .saved-chev{transform:translateY(2px) rotate(-135deg)}
.saved-bar-main{flex:1;min-width:0;position:relative}
/* 검색창: 버튼 줄 자리에 대신 나타남 */
/* 검색창은 버튼 줄 자리 위에 겹쳐 뜸 → 버튼 줄 자리(높이)는 그대로라 아래 목록이 움직이지 않음 */
.saved-search{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:6px;height:38px;padding:0 6px 0 14px;box-sizing:border-box;border-radius:999px;background:var(--bg);animation:searchOpen .28s ease-out}
/* 오른쪽(돋보기 자리)에서 왼쪽으로 펼쳐짐 */
@keyframes searchOpen{from{clip-path:inset(0 0 0 100% round 999px);opacity:.4}to{clip-path:inset(0 0 0 0 round 999px);opacity:1}}
@media (prefers-reduced-motion:reduce){.saved-search{animation:none}}
.saved-search[hidden]{display:none}
.saved-bar-main.is-searching .saved-filters{visibility:hidden}
.saved-search input{all:unset;box-sizing:border-box;flex:1;min-width:0;font-size:.9rem;color:var(--ink);padding:0 4px}
.saved-search input::placeholder{color:var(--muted)}
.saved-search input::-webkit-search-cancel-button{display:none}
.saved-search-clear{all:unset;box-sizing:border-box;flex:none;width:26px;height:26px;border-radius:50%;text-align:center;line-height:26px;font-size:1.05rem;color:var(--muted);cursor:pointer}
@media (hover:hover){.saved-search-clear:hover{background:var(--line);color:var(--ink)}}
@media (pointer:coarse){.saved-search input{font-size:16px}} /* 아이폰 자동 확대 방지 */
.saved-icon-btn svg{width:18px;height:18px;color:var(--muted)}
.saved-icon-btn[hidden]{display:none}
.saved-none{margin:0;padding:16px 0 4px;text-align:center;color:var(--muted);font-size:.85rem}
.saved-bar{display:flex;align-items:flex-start;gap:8px}
.saved-bar .saved-toggle{flex:none;width:34px;height:33px;padding:0;border-radius:50%;justify-content:center}
@media (hover:hover){.saved-bar .saved-toggle:hover{background:var(--bg)}}

/* 오늘 저장한 항목 표시: 날짜 옆 작은 "오늘" 꼬리표 */
.saved-today{flex:none;padding:0 6px;border-radius:999px;background:#e5484d;color:#ffffff;font-size:.62rem;font-weight:700;line-height:1.5} /* 2026-10-09: 오늘 꼬리표 색 강조 (새 항목 알림 점과 같은 빨강) */
.saved-date-today{color:#e5484d;font-weight:700}
.saved-filters[hidden]{display:none}

.saved-filters .chat-pill b{font-weight:700;margin-left:4px}
.saved-filters .chat-pill:disabled{cursor:default}
/* 버튼 이름: 평소 전체 이름, 폭이 좁은 폰(599px 이하)에서는 두 글자(전체·운세·사주·감정)로 줄여 한 줄에 맞춤 */
.saved-filters .lbl-short{display:none}
@media (max-width:599px){
  .saved-filters .lbl-full{display:none}
  .saved-filters .lbl-short{display:inline}
  /* 한 줄 고정: 버튼을 조금 작게, 그래도 넘치면 옆으로 밀어서 봄(스크롤 막대는 숨김) */
  .saved-filters{flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .saved-filters::-webkit-scrollbar{display:none}
  
  .saved-filters .chat-pill b{margin-left:3px}
  .saved-bar{gap:2px}
  .saved-bar .saved-toggle{width:28px}
}
.saved-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.saved-items[hidden]{display:none}
.saved-item{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-radius:14px;background:var(--surface);font-size:.85rem;color:var(--muted);cursor:pointer;transition:background-color .15s ease;position:relative;border:1px solid var(--line)} /* 2026-10-16: 지첩함·1:1 감정 같은 줄 — 흰 바탕+테두리, 읽음은 글씨로 구분 */
.saved-item.is-new{animation:fadeIn 2s ease}

@media (hover:hover){.saved-item:hover{background:var(--bg)}}
.saved-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 읽음 구분: 안 읽음 = 흰 바탕 + 테두리 + 진한 글씨 + 점 / 읽음 = 옅은 회색(기존) */

.saved-item.is-unread{background:var(--surface);border-color:var(--line);color:var(--ink)}
.saved-head{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--muted)}
.saved-item.is-unread .saved-head{font-weight:700;color:var(--ink)}
.saved-title{font-size:.78rem;line-height:1.4;margin-top:1px;color:var(--muted)}
.saved-item.is-unread .saved-title{color:var(--ink)}
.saved-unread-dot{position:absolute;top:50%;left:6px;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#e5484d}
@media (hover:hover){.saved-item.is-unread:hover{background:var(--bg)}}
/* ---- 결과 화면 (홈 안에서 목록과 바꿔 보여줌) ---- */
.saved-detail[hidden],.saved-list.is-away{display:none}
.saved-detail{animation:slideFromRight .26s ease-out}
.saved-detail.no-anim{animation:none} /* 2026-10-25 ⓐ-4: 다른 메뉴에서 돌아올 때는 움직임 없이 그 자리에 (목록에서 열 때만 밀려 들어옴) */
.saved-list.is-back{animation:slideFromLeft .26s ease-out}
@keyframes slideFromRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes slideFromLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.saved-detail,.saved-list.is-back{animation:none}}
.detail-head{display:flex;align-items:center;margin:-4px 0 10px}
.detail-back{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:2px;padding:6px 12px 6px 6px;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer}
.detail-back svg{width:18px;height:18px}
@media (hover:hover){.detail-back:hover{background:var(--bg)}}
.detail-back:focus-visible{outline:2px solid var(--accent)}
.detail-meta{display:flex;align-items:center;border-radius:14px;font-size:.85rem;margin-bottom:16px}
.detail-meta .saved-kind{width:20px;height:20px}
 /* 회색 바탕 위 */
.detail-meta-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.detail-meta-kind{font-size:.75rem}
.detail-meta-sum{word-break:keep-all}
.detail-body .saju-text{max-width:none}

.saved-main{flex:1;min-width:0;display:flex;flex-direction:column}
.saved-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 검색 중에는 목록 줄 글을 두 줄까지 보여 줌 (맞은 글자가 잘려 안 보이는 것을 줄임) */
.saved-items.is-searching .saved-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere}
.saved-snippet{margin-top:2px;font-size:.75rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.saved-snippet b{color:var(--ink);font-weight:700}
/* 검색어와 맞은 글자: 진하게 + 옅은 노란 바탕 */
b.hl{color:var(--ink);font-weight:700;background:rgba(255,214,0,.35);border-radius:3px;padding:0 1px}
.saved-today.is-hit{box-shadow:0 0 0 2px rgba(255,214,0,.8)}
.saved-date{flex:none;display:flex;flex-direction:column;align-items:flex-end;font-size:.7rem;line-height:1.35;font-variant-numeric:tabular-nums}
.saved-time{font-size:.66rem}
.saved-del{all:unset;box-sizing:border-box;flex:none;width:26px;height:26px;border-radius:50%;text-align:center;line-height:26px;font-size:1rem;color:var(--muted);cursor:pointer}
.saved-del:focus-visible{outline:2px solid var(--accent)}
@media (hover:hover){.saved-del:hover{background:var(--line);color:var(--ink)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---- 홈 (저장 보관함) ---- */
.home-empty{margin:0;padding:24px 0;text-align:center;color:var(--muted);font-size:.9rem}
.home-empty[hidden]{display:none}
#vault .saved-list{margin-top:0}
.saved-kind{width:18px;height:18px;flex:none;color:var(--ink)}
/* 2026-10-16: 목록 아이콘·주제 배지 = 메뉴 색 */
.saved-kind.k-fortune,.saved-topic-badge.k-fortune{color:var(--today-main)}
.saved-kind.k-saju,.saved-topic-badge.k-saju{color:var(--saju-main)}
.saved-kind.k-theme,.saved-topic-badge.k-theme{color:var(--theme-main)}
.saved-kind.k-counsel,.saved-topic-badge.k-counsel{color:var(--counsel-main)}
.saved-topic-badge.k-fortune{background:var(--today-main)}.saved-topic-badge.k-saju{background:var(--saju-main)}.saved-topic-badge.k-theme{background:var(--theme-main)}.saved-topic-badge.k-counsel{background:var(--counsel-main)}
.saved-topic-badge[class*=" k-"]{color:#fff}
/* 지우기 확인 */
.saved-item.is-confirm>.saved-today,.saved-item.is-confirm>.saved-date,.saved-item.is-confirm>.saved-del{display:none}
.saved-confirm{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink)}
.saved-confirm button{all:unset;box-sizing:border-box;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.saved-confirm .saved-confirm-yes{background:#e5484d;border-color:#e5484d;color:#fff}
.saved-confirm button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.saved-confirm-q{display:none}}
/* 메뉴 아이콘 + 주제 배지 (테마 리포트·1:1 감정, 2026-10-05) */
/* 크게 + 진한 배지 (2026-10-05 사용자 결정): 지름 17px, 진한 바탕(--ink)에 밝은 아이콘(--bg) — 색 체계를 정하면 배지 색을 바꿀 예정 */
.saved-kind-wrap{position:relative;display:inline-flex;flex:none;width:18px;height:18px;margin-right:8px}
.saved-topic-badge{position:absolute;right:-10px;bottom:-7px;width:17px;height:17px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:var(--bg);box-shadow:0 0 0 2px var(--surface)}
.saved-topic-badge svg{width:12px;height:12px}
.detail-meta .saved-kind-wrap{width:20px;height:20px;margin-right:10px}
.detail-meta .saved-topic-badge{width:18px;height:18px;right:-11px;bottom:-7px}
.detail-meta .saved-topic-badge svg{width:13px;height:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-icon-wrap{position:relative;display:inline-flex;font-style:normal}
.nav-dot{position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px var(--chrome-bg)}
.nav-dot[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.saved-list.is-reveal,.saved-item.is-new{animation:none}}