/* digital_binder UX-005 v0.5 통합 — proto.css(v0.4)는 그대로 두고 Z 구조에 필요한 것만 더한다. 같은 토큰(--paper, --sage, --serif …)만 쓴다. */
:root { --night: #2f3a52; --night-deep: #252e43; --gold: #c9a55a; --gold-soft: #f3e3b8; }

/* 휴대폰 크기·글꼴 (검토용) */
.phone.small-phone { width: 360px; height: 640px; }
.phone.big-font .screen-host > .screen, .phone.big-font .sheet > * { zoom: 1.3; }
.phone.big-font .toast { zoom: 1.2; }

/* 시작 화면 고르기 미니 그림 */
.start-grid.z-start .sc-art { background: var(--desk-deep); }
.mini-zhome, .mini-desk { position: absolute; inset: 12px; display: block; }
.mz-memo { position: absolute; left: 6%; right: 6%; top: 6px; height: 46%; background: #fffaf0; border-radius: 6px; box-shadow: 0 1px 0 #e6dcc8, 0 4px 10px rgba(64, 50, 30, .1); background-image: repeating-linear-gradient(180deg, transparent 0 11px, #efe5d3 11px 12px); }
.mz-spines { position: absolute; left: 6%; bottom: 4px; display: flex; gap: 5px; height: 38%; }
.mz-spines i { width: 16px; border-radius: 3px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, .12); }
.mini-desk { display: flex; gap: 10px; justify-content: center; align-items: center; }
.mini-desk i { width: 38%; height: 88%; border-radius: 4px 9px 9px 4px; box-shadow: inset 6px 0 0 rgba(0, 0, 0, .12), 0 6px 12px rgba(40, 50, 35, .18); }

/* Z 홈 */
.z-date { margin-top: 0; }
.z-memo { position: relative; background: var(--paper); border-radius: 6px 6px 14px 14px; padding: 18px 14px 12px; box-shadow: var(--shadow-paper); background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-line) 27px 28px); background-position: 0 40px; display: grid; gap: 4px; }
.z-memo .tape { position: absolute; top: -8px; left: 22px; width: 64px; height: 16px; background: rgba(233, 214, 170, .75); transform: rotate(-3deg); border-radius: 2px; }
.z-memo > strong { font-family: var(--serif); font-size: 17px; margin-bottom: 2px; }
.z-memo > small { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.z-line { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; padding: 6px 2px; border-bottom: 1px dashed var(--paper-line); font-size: 14px; }
.z-line .zl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-line small { color: var(--ink-faint); font-size: 11px; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--sage-soft); color: var(--sage); display: grid; place-items: center; flex-shrink: 0; }
.zl-ic svg { width: 15px; height: 15px; }
.z-more, .z-ev { font-size: 11px !important; color: var(--ink-faint) !important; }
.z-memo .ts-thumbs { margin-top: 4px; }
.z-actions { margin-top: 8px; }
.z-write { margin-top: 6px; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-write svg { width: 16px; height: 16px; }
.z-purpose { margin-top: 10px; }
.z-spines { display: flex; gap: 8px; align-items: stretch; height: 132px; }
.z-spine { position: relative; width: 52px; border: 0; border-radius: 4px 8px 8px 4px; color: #fff; box-shadow: inset 6px 0 0 rgba(0, 0, 0, .12), 0 8px 16px rgba(40, 50, 35, .2); padding: 0; overflow: hidden; }
.z-spine-label { position: absolute; left: 50%; top: 10px; bottom: 10px; transform: translateX(-50%); writing-mode: vertical-rl; font-family: var(--serif); font-size: 12px; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: calc(100% - 20px); background: rgba(251, 247, 238, .92); color: #3b4a3f; padding: 6px 3px; border-radius: 3px; }
.z-ring { position: absolute; left: 3px; top: 16px; bottom: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.z-ring i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #f1efe9, #a6a8a0); }
.z-spine.all { width: auto; flex: 1; max-width: 92px; background: transparent; color: var(--ink-soft); border: 1.5px dashed #c8bda9; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 800; border-radius: 10px; }
.z-spine.all svg { width: 20px; height: 20px; }
.z-memory { position: relative; display: flex; align-items: center; gap: 8px; background: #faf3e4; border-radius: 4px 14px 14px 4px; padding: 12px 12px 12px 26px; box-shadow: 0 1px 0 #e7dcc4, 0 8px 18px rgba(64, 50, 30, .1); transform: rotate(-.6deg); }
.z-old-holes { position: absolute; left: 8px; top: 10px; bottom: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.z-old-holes i { width: 8px; height: 8px; border-radius: 50%; background: var(--desk-deep); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
.z-mem-body { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; display: grid; gap: 3px; padding: 0; }
.z-mem-body strong { font-size: 12.5px; }
.z-mem-body span { font-family: var(--serif); font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.z-mem-body small { font-size: 11px; color: var(--ink-faint); }
.z-memory.folded { transform: none; border: 0; width: 100%; font-size: 12.5px; color: var(--ink-soft); padding: 10px 12px; border-radius: 12px; }
.z-card { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 16px; padding: 12px; box-shadow: var(--shadow-paper); }
.z-card.night { background: linear-gradient(135deg, var(--night), var(--night-deep)); color: #f3ead6; }
.zc-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zc-copy strong { font-size: 14px; }
.zc-copy small { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.z-card.night .zc-copy small { color: #d9cfb8; }
.linkish { border: 0; background: transparent; color: var(--sage); font-weight: 800; font-size: 12.5px; padding: 6px 2px; text-align: left; }
.linkish.quiet { color: var(--ink-faint); font-weight: 600; }
.btn-gold { background: var(--gold); color: var(--night); box-shadow: 0 6px 14px rgba(201, 165, 90, .3); }
.btn-night { background: transparent; color: #f3ead6; border: 1px solid #6d7894; }
.btn.small { padding: 8px 12px; font-size: 12px; }

/* 타로 카드 */
.tcard { position: relative; width: 31%; aspect-ratio: 5 / 8; border-radius: 10px; border: 1.5px solid var(--gold); background: var(--night-deep); display: grid; place-items: center; padding: 0; }
.tback { position: absolute; inset: 5px; border-radius: 7px; background: repeating-linear-gradient(45deg, #36425e 0 6px, #2c3650 6px 12px); }
.tback::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 18px; }
.tcard.dim { opacity: .35; }
.tcard.face { background: #fbf6ea; color: var(--night); display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.tcard.face svg { width: 72%; }
.tcard.face b { font-family: var(--serif); font-size: 13px; }
.tcard.flip { animation: tflip .8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes tflip { 0% { transform: rotateY(90deg) scale(.96); } 100% { transform: rotateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tcard.flip { animation: none; } }
.tcard.mini-back { width: 40px; flex-shrink: 0; }
.tcards { display: flex; gap: 4%; justify-content: center; margin: 12px 0; perspective: 600px; }
button.tcard:hover { transform: translateY(-3px); }
.tmini { width: 42px; height: 42px; border-radius: 10px; background: #fbf6ea; border: 1px solid #e5d6b0; display: grid; place-items: center; flex-shrink: 0; }
.tmini svg { width: 34px; height: 34px; }
.tmini.xs { width: 26px; height: 26px; border-radius: 7px; }
.tmini.xs svg { width: 20px; height: 20px; }
.night-panel { background: linear-gradient(180deg, var(--night), var(--night-deep)); color: #f3ead6; border-radius: 22px; padding: 16px; margin-top: 6px; }
.night-panel .screen-title { color: #f3ead6; margin-top: 2px; }
.night-sub { font-size: 12px; color: #d9cfb8; margin: 0; line-height: 1.6; }
.tname { font-family: var(--serif); font-size: 24px; text-align: center; margin: 6px 0 4px; }
.tname small { font-size: 12px; color: #d9cfb8; font-family: var(--sans); }
.night-read { font-size: 13.5px; line-height: 1.75; margin: 6px 0; }
.night-act { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 10px 12px; display: grid; gap: 3px; font-size: 13px; }
.night-act b { font-size: 11.5px; color: var(--ink-soft); }
.night-linked { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; color: var(--gold-soft); margin: 10px 0 0; }
.night-linked svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.night-pick { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px; margin-top: 10px; display: grid; gap: 8px; font-size: 12.5px; }
.night-pick small { color: var(--ink-faint); font-size: 11px; line-height: 1.5; }
.night-btns { display: grid; gap: 8px; margin-top: 12px; }
.disclaimer { font-size: 10.5px; color: #b9b4a6; margin: 10px 0 0; line-height: 1.5; }

/* 바인더 안: 속지 */
.z-view { margin-top: 10px; }
.z-datebar { display: flex; align-items: center; justify-content: space-between; background: var(--paper); border-radius: 12px; padding: 4px; margin: 10px 0; box-shadow: 0 1px 0 #e7dfd0; }
.z-datebar strong { font-size: 13px; }
.zd-btn { border: 0; background: transparent; font-size: 12px; color: var(--ink-soft); padding: 8px 10px; border-radius: 8px; }
.z-pages { display: grid; gap: 8px; }
.z-date-head { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #6a6455; margin: 8px 2px 0; }
.z-page-row { display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: var(--paper); border-radius: 4px 14px 14px 4px; padding: 12px; box-shadow: 0 1px 0 #e7dfd0, 0 6px 14px rgba(64, 50, 30, .07); border-left: 4px solid var(--paper-line); }
.zpr-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zpr-copy strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zpr-copy small { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-empty-day { background: rgba(255, 255, 255, .7); border-radius: 16px; padding: 16px; display: grid; gap: 10px; justify-items: start; font-size: 13px; }
.z-today-link { margin-top: 8px; }

/* 속지 편집기 (UX-001 오늘 속지 모양) */
.z-crumb { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: var(--tan); margin: 6px 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-sheet { display: flex; background: #cfc5b3; border-radius: 10px; padding: 8px 8px 8px 0; box-shadow: var(--shadow-paper); min-height: 420px; }
.z-sheet-rings { width: 34px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 10px 0; }
.z-sheet-rings i { width: 9px; height: 9px; border-radius: 50%; background: #8e8778; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.z-sheet-paper { flex: 1; min-width: 0; background: var(--paper); border-radius: 6px; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.z-sheet-meta { display: flex; justify-content: space-between; font-family: var(--serif); font-size: 10.5px; letter-spacing: 1px; color: var(--tan); }
.z-title { border: 0; border-bottom: 1px solid var(--paper-line); background: transparent; font-family: var(--serif); font-size: 21px; padding: 4px 0 8px; outline: none; }
.z-body { border: 0; background: transparent; resize: none; font: inherit; font-size: 14px; line-height: 28px; min-height: 196px; outline: none; background-image: repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-line) 27px 28px); }
.z-saved { margin: auto 0 0; font-size: 10.5px; color: var(--ink-faint); }
.z-todos { display: grid; gap: 2px; }
.zt-head { font-size: 12px; font-weight: 800; margin: 0 0 4px; }
.zt-row { display: flex; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--paper-line); background: transparent; padding: 9px 0; text-align: left; font-size: 13.5px; }
.zt-box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #b9b2a5; display: grid; place-items: center; flex-shrink: 0; }
.zt-row.done .zt-box { background: #8fa996; border-color: #8fa996; color: #fff; }
.zt-row.done > span:last-child { text-decoration: line-through; color: var(--ink-faint); }
.zt-box svg { width: 14px; height: 14px; }
.zt-add { border: 0; background: transparent; font: inherit; font-size: 13px; padding: 9px 0; outline: none; color: var(--ink-soft); }
.tarot-sec { display: flex; gap: 10px; background: #f8f1e1; border: 1px solid #ecdcb5; border-radius: 12px; padding: 10px; }
.tarot-sec > div { min-width: 0; }
.tarot-sec strong { font-size: 13px; margin-right: 6px; }
.tchip { font-size: 10px; background: #fff; color: var(--tan); padding: 2px 6px; border-radius: 8px; white-space: nowrap; }
.tarot-sec p { font-size: 12px; line-height: 1.6; margin: 4px 0 0; color: var(--ink-soft); }
.tarot-sec .tact { color: var(--ink); }
.tsec-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* 설정 */
.list-row.static { cursor: default; }
.switch { width: 38px; height: 22px; border-radius: 11px; background: #d6d2c8; position: relative; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: var(--sage); }
.switch.on::after { left: 19px; }
.toggle-row.in-sheet { margin-top: 12px; }

/* 행동 토스트 (옮기기 · 되돌리기) */
.toast.act { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.toast-act { border: 0; background: transparent; color: var(--gold-soft); font-weight: 800; font-size: 12px; white-space: nowrap; padding: 4px; }

/* 검토 셸: 흐름 · 상태 · 비교 */
.flow-list { display: grid; gap: 4px; margin-bottom: 18px; }
.flow-list p { margin: 10px 0 2px; font-size: 12px; font-weight: 800; color: var(--ink); }
.flow-list button { text-align: left; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 7px 10px; font-size: 12px; color: var(--ink-soft); }
.flow-list button:hover, .flow-list button[aria-pressed="true"] { background: #fffdf8; border-color: #e4dfd2; color: var(--ink); }
.seg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.seg-pick .ghost-btn { margin: 0; }
.compare { max-width: 1500px; margin: 0 auto; padding: 8px 32px 64px; }
.compare h2 { font-family: var(--serif); font-size: 26px; margin: 24px 0 8px; }
.compare > p { font-size: 13px; color: var(--ink-soft); line-height: 1.8; max-width: 860px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fffdf8; border-radius: 14px; overflow: hidden; }
.cmp-table th, .cmp-table td { border-bottom: 1px solid #ece6da; padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
.cmp-table th { background: #f3eee4; font-size: 11.5px; }
.tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.tag.keep { background: var(--sage-soft); color: var(--sage); }
.tag.move { background: var(--plan-soft); color: var(--plan); }
.tag.change { background: var(--memory-soft); color: var(--memory); }
.tag.new { background: #efe6f7; color: #6b4f8f; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }
.pair { background: #fffdf8; border: 1px solid #e6e1d5; border-radius: 16px; padding: 12px; }
.pair h3 { font-size: 13px; margin: 0 0 8px; }
.pair .imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair figure { margin: 0; }
.pair img { width: 100%; border-radius: 10px; border: 1px solid #e6e1d5; display: block; }
.pair figcaption { font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.pair > p { font-size: 11.5px; color: var(--ink-soft); line-height: 1.6; margin: 8px 0 0; }
.issues { font-size: 13px; line-height: 1.9; color: var(--ink-soft); }
@media (max-width: 1100px) { .compare { padding: 8px 16px 48px; } .cmp-table { display: block; overflow-x: auto; } }
@media (max-width: 430px) { .phone.small-phone { width: calc(100vw - 24px); height: calc((100vw - 24px) * 1.78); } }