/* 만족/불만족(옛)·재설명 돋보기 — 2026-10-31 구조 정리로 index.html <style> 648~743줄에서 옮김. 파일 번호 순서대로 읽어야 함(뒤 규칙이 앞 규칙을 덮음) */
/* 만족/불만족 (2026-10-09) — 지첩함 결과 화면 하단. 모양은 전체 디자인 때 다시 */
.fb-box{border-top:1px solid var(--line);text-align:center}
.fb-q{color:var(--muted);margin:0 0 10px;line-height:1.55;word-break:keep-all}
.fb-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fb-row .share-btn{padding:8px 16px;font-size:.85rem}
.fb-row .chat-pill{padding:7px 12px;font-size:.82rem}
.fb-pick{max-width:100%;text-align:left;white-space:normal;line-height:1.45}
.fb-msg{font-size:.84rem;color:var(--ink);margin:10px 0 0;line-height:1.55;word-break:keep-all}
.fb-msg.is-busy{color:var(--muted)}
.chat-bubble .regen-tag{margin-top:6px;font-size:.72rem;opacity:.6}
.fb-picking .fb-sent{cursor:pointer;border-radius:3px;transition:background-color .15s;text-underline-offset:4px;-webkit-tap-highlight-color:transparent}
/* 돋보기 빨간펜 (2026-10-10): 휴대폰은 안 고른 문장에 옅은 회색 점선, PC는 가리킨 문장에 빨간 점선, 고른 문장은 연한 빨강 + 빨간 밑줄 */
.fb-picking.fb-touch .fb-sent{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 2026-10-14: 길게 누를 때 글자 선택이 생기지 않게 */
/* 2026-10-25 1차 ⓑ: 밑줄은 한 줄 표기(text-decoration: underline dashed 색) 대신 항목별로 — iOS 15 사파리는 한 줄 표기를 읽지 못해 폰에서 밑줄이 안 보였음
   지나갈 때(PC 마우스 오버·폰 돋보기가 훑을 때) 빨간 점선, 고른 뒤 옅은 빨강 바탕 + 빨간 실선 */
.fb-picking .fb-sent.fb-hov{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dashed;text-decoration-style:dashed;-webkit-text-decoration-color:var(--rc,#c8322b);text-decoration-color:var(--rc,#c8322b);text-decoration-thickness:1.5px} /* 2026-10-30 17번: 빨강 → 보고서 메뉴 색 */
.fb-picking .fb-sent.is-picked{background:var(--rc-pick,rgba(200,50,43,.13));-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid;-webkit-text-decoration-color:var(--rc,#c8322b);text-decoration-color:var(--rc,#c8322b);text-decoration-thickness:2px} /* 17번: 메뉴 색 밑줄 + 옅은 메뉴 색 바탕 */
/* 2026-10-25 1차 ⓐ: 지첩함이 아닌 화면에서는 재설명 펜 끝 창·돋보기·말풍선을 숨김 (돌아오면 고르던 그대로 다시 보임) */
body:not([data-view="vault"]) .fb-panel,body:not([data-view="vault"]) .fb-loupe,body:not([data-view="vault"]) .fb-bubble{display:none!important}
.fb-picking.fb-nocursor,.fb-picking.fb-nocursor *{cursor:none !important}
.fb-picking{padding-bottom:84px}
.fb-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:8px;width:min(560px,calc(100% - 24px));box-sizing:border-box;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:.88rem}
.fb-bar-cnt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-bar .share-btn{padding:8px 14px;font-size:.85rem}
.fb-bar .share-btn:disabled{opacity:.4;cursor:default}
.fb-bar .chat-pill{padding:7px 12px;font-size:.82rem}
.fb-loupe{position:fixed;z-index:48;pointer-events:none;opacity:0;transition:opacity .15s}
.fb-loupe.is-on{opacity:1}
.fb-lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.fb-lens:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),rgba(255,255,255,0) 45%)}
.fb-in{position:absolute;left:0;top:0;transform-origin:0 0;text-align:left}
.fb-in .fb-sent{cursor:default}
.fb-loupe.is-mini .fb-lens{background:radial-gradient(circle at 40% 38%,var(--surface),var(--bg))}
.fb-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--rc,var(--ink));box-sizing:border-box} /* 2026-10-30 18번: 돋보기 테두리 = 메뉴 색 3px */
.fb-loupe.is-mini .fb-ring{border-width:1.5px}
.fb-pin,.fb-pout{position:absolute;overflow:visible}
.fb-bubble{position:fixed;z-index:49;max-width:calc(100% - 16px);box-sizing:border-box;background:var(--ink);color:var(--surface);font-size:.8rem;line-height:1.4;padding:8px 12px;border-radius:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-50%);pointer-events:none;animation:fbIn .18s ease-out}
.fb-bubble.is-pop{animation:fbPop .35s ease-in forwards}
.fb-spark{position:fixed;z-index:49;color:var(--rc,#c8322b);font-size:14px;pointer-events:none;animation:fbSpark .45s ease-out forwards}
@keyframes fbIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes fbPop{to{opacity:0;transform:translateX(-50%) scale(1.35)}}
@keyframes fbSpark{from{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
@media (prefers-reduced-motion:reduce){.fb-bubble,.fb-bubble.is-pop{animation:none}.fb-bubble.is-pop{opacity:0}.fb-spark{display:none}.fb-loupe{transition:none}}
.fb-picking .fb-sent:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fb-picking.fb-touch .fb-sent,.fb-picking.fb-touch .fb-sent:focus{outline:none;-webkit-tap-highlight-color:transparent} /* 2026-10-25 1차 10: 폰에서 고른 문장에 생기던 하늘색 상자(탭 하이라이트·초점 테두리) 없앰 — 연한 바탕 + 밑줄만 */
.fb-fixed{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.fb-fixed::after{content:" 고친 부분";font-size:.68rem;color:var(--muted);text-decoration:none;display:inline-block;margin-left:2px}
.fb-item{margin:10px 0 0;font-size:.82rem;line-height:1.55;color:var(--ink);text-align:left;word-break:keep-all}
.fb-item p{margin:0}
.fb-item .fb-before,.fb-item .fb-after,.fb-item .fb-reason{padding-left:12px;margin-top:2px}
.fb-item .fb-before{opacity:.55}
.share-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--scrim);animation:fadeIn .2s ease}
.share-ov[hidden]{display:none}
.share-card{position:relative;width:min(380px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:18px;padding:44px 16px 16px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.share-card img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:0;border:1px solid var(--line);max-height:calc(100vh - 180px);object-fit:contain;background:var(--bg)} /* 2026-10-31 21:39 사용자 결정(공유 창 시안 안 1): 이미지 칸 = 그려진 이미지 폭(양옆 바탕 없음)·각진 모서리·그림자 없음, 위 안내문을 없애고 아래 여백을 줄인 만큼 세로 더 길게(화면 높이 - 220 → - 180) */
.share-card img+.share-actions{margin-top:24px} /* 이미지와 버튼 사이 12 → 24px */
.share-actions{display:flex;gap:8px;margin-top:12px}
.share-actions button{all:unset;box-sizing:border-box;flex:1;text-align:center;padding:11px 0;border-radius:12px;font-weight:600;cursor:pointer;transition:transform .1s,opacity .2s}
.share-actions button:active{transform:scale(.97)}
.share-actions .is-primary{background:var(--accent);color:var(--on-accent)}
.share-actions .is-ghost{border:1px solid var(--line)}
.share-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.share-close{all:unset;position:absolute;top:8px;right:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--muted)}
.share-close svg{width:20px;height:20px}
.share-close:focus-visible{outline:2px solid var(--accent)}
.share-msg{font-size:.78rem;color:var(--muted);text-align:center;margin:8px 0 0;min-height:1.2em}
.spinner-lg{width:44px;height:44px;border-width:4px}
/* 로딩: 하단이 아니라 입력 카드 가운데에 떠 있는 큰 표시 (사주 풀이·오늘 운세 공통) */
#saju,#today,#theme{position:relative}
.load-overlay{display:flex;justify-content:center;background:rgba(255,255,255,.72);background:color-mix(in srgb,var(--surface) 72%,transparent);animation:fadeIn .2s ease}
.load-overlay[hidden]{display:none}
/* 저장 안내(오늘 운세): 결과가 길어도 방금 누른 "저장" 버튼 근처(카드 아래쪽)에 뜨게 */

.load-card{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%;padding:28px 20px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 48px rgba(0,0,0,.18);text-align:center;position:relative}
.load-text{font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.5;word-break:keep-all}
.load-sub{margin-top:-8px;font-size:.8rem;color:var(--muted)}
/* 결과 수신 후: 같은 팝업에서 내용만 안내 문구 + 확인 버튼으로 바뀜 */

.load-ok{width:60%;min-width:0;margin:4px auto 0;display:flex;align-items:center;justify-content:center;gap:3px;padding:12px 28px;min-height:48px;line-height:1}
.load-ok svg{width:18px;height:18px;display:block}
.load-ok.is-text{font-size:.95rem;font-weight:700}
.load-ok-dots{letter-spacing:.05em;transform:translateY(2px)}
/* 안내 상태: X와 안내 문구 사이 세로 여백을 넓힘 */
.load-card.is-done{padding-top:52px}
/* 팝업 우측 상단 끄기(X) */
.load-close{all:unset;box-sizing:border-box;position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;display:grid;place-content:center;color:var(--muted);cursor:pointer}
.load-close svg{width:18px;height:18px;display:block}
.load-close:focus-visible{outline:2px solid var(--accent)}
@media (hover:hover){.load-close:hover{background:var(--bg);color:var(--ink)}}
.load-card.is-done .spinner,.load-card.is-done .load-sub{display:none}
.load-card.is-done .load-text{font-weight:500;font-size:.98rem;line-height:1.6;padding-top:4px}
.load-card.is-done{animation:fadeIn .25s ease}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}.load-overlay{animation:none}}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}