/* 감정 쓰레기통 전용 CSS (2026-10-18). 책상 배치: 왼쪽 줄 노트·버린 뒤 카드 | 오른쪽 버리는 자리(방법·무게·버튼·철망 쓰레기통). et-*. 공용 부품은 assets/v2.css */
.et-work{position:relative;container:etw / inline-size;--et-sheet:#fffdf8;--et-ball:#fffdf8;--lh:30px}
html[data-theme="dark"] .et-work{--et-sheet:#2b2016;--et-ball:#cbb895}
@media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .et-work{--et-sheet:#2b2016;--et-ball:#cbb895} }
.et-desk{display:grid;grid-template-columns:minmax(0,1fr) 212px}
.et-left{padding:16px 18px 18px;min-width:0;border-right:1px solid var(--soft)}
.et-right{padding:16px 16px 14px;min-width:0;display:flex;flex-direction:column;gap:12px}
.et-work [hidden]{display:none!important}
.et-work .v2-label{display:block;margin:0 0 6px}
.et-help{margin:4px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
@keyframes et-in{from{opacity:0;transform:translateY(10px)}}
@keyframes et-shake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.is-shake{animation:et-shake .36s}

/* 감정 이름 칩 */
.et-names{margin-bottom:12px}
.et-chips{display:flex;flex-wrap:wrap;gap:6px}
.et-chips button{height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.et-chips button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}
.et-chips button[aria-pressed="true"],.et-chips button[aria-pressed="true"]:hover{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* 줄 노트: 줄 간격 --lh, 줄은 글과 함께 스크롤(local), 왼쪽 여백선 */
.et-paper{position:relative;background:var(--et-sheet);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 0 var(--soft),0 10px 18px -14px rgba(26,18,8,.45)}
.et-paper:focus-within{border-color:var(--ink)}
.et-paper::before{content:"";position:absolute;top:0;bottom:0;left:38px;width:1px;background:var(--accent);opacity:.35;pointer-events:none}
.et-paper__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:40px;margin:0;padding:8px 14px 6px 50px;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted)}
.et-stamps{display:inline-flex;flex-wrap:wrap;gap:6px}
.et-stamps span{display:inline-block;padding:1px 7px;border:1.5px solid var(--accent);border-radius:3px;color:var(--accent);font-size:12px;font-weight:800;transform:rotate(-4deg);opacity:.9;animation:et-stamp .26s cubic-bezier(.3,1.5,.5,1)}
.et-stamps span:nth-child(2){transform:rotate(3deg)}
.et-stamps span:nth-child(3){transform:rotate(-2deg)}
@keyframes et-stamp{from{opacity:0;scale:1.6}}
.et-text{display:block;width:100%;min-height:calc(var(--lh) * 9);margin:0;padding:0 14px 0 50px;border:0;border-radius:0;background:transparent linear-gradient(to bottom,transparent calc(var(--lh) - 1px),var(--soft) calc(var(--lh) - 1px)) 0 0 / 100% var(--lh) local;font-family:var(--serif);font-size:16px;line-height:var(--lh);color:var(--ink);resize:vertical;box-sizing:border-box}
.et-text:focus{outline:none}
.et-text::placeholder{color:var(--muted);opacity:.75}
.et-paper__foot{margin:0;padding:8px 14px 10px 50px;border-top:1px dashed var(--soft);font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.et-sheet.is-gone .et-paper{visibility:hidden}
.et-sheet.is-in,.et-after.is-in{animation:et-in .32s cubic-bezier(.2,.7,.3,1)}

/* 버린 뒤 카드 */
.et-after{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--soft);border-radius:var(--radius);scroll-margin-top:calc(var(--hd-h, 52px) + 12px)}
.et-after:focus{outline:none}
.et-after:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.et-kick{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--accent)}
.et-msg{margin:-6px 0 0;font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);font-weight:750;line-height:1.45;color:var(--ink)}
.et-crisis{margin:0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-wash);font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.et-crisis a{color:var(--accent);font-weight:800}
.et-cmp input[type=range],.et-w0 input[type=range]{display:block;width:100%;height:28px;margin:0;accent-color:var(--accent)}
.et-bars{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.et-bars li{display:grid;grid-template-columns:minmax(64px,max-content) minmax(0,1fr) 24px;gap:10px;align-items:center;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.et-bars .trk{position:relative;height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.et-bars .trk i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--line);transition:width .6s cubic-bezier(.2,.7,.3,1)}
.et-bars li.is-now .trk i{background:var(--accent)}
.et-bars b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.et-diff{margin:8px 0 0;font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.et-breath{display:flex;align-items:center;gap:16px;padding-top:14px;border-top:1px solid var(--soft)}
.et-orb{flex:0 0 60px;width:60px;height:60px;border-radius:50%;background:var(--accent);opacity:.22;transform:scale(.45);transition:transform 4s cubic-bezier(.4,0,.6,1),opacity .4s}
.et-orb.is-in{transform:scale(1);opacity:.34}
.et-breath__txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.et-bph{margin:0;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--muted)}
.et-after__act{display:flex;flex-wrap:wrap;gap:8px}

/* 버리는 자리 */
.et-mode{display:grid;grid-template-columns:1fr 1fr;width:100%}
.et-mode button{height:auto;min-height:34px;padding:4px 6px;line-height:1.25;white-space:normal}
.et-w0__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 2px}
.et-w0__head .v2-label{margin:0}
.et-w0 output{font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.et-w0:not(.is-set) input[type=range]{opacity:.5}
.et-w0 input[type=range]:disabled{opacity:.35;cursor:not-allowed}
.et-toss{width:100%}
.et-toss:disabled{opacity:.45;cursor:not-allowed}
.et-right .v2-status{display:block;margin:-4px 0 0;line-height:1.5}
.et-right .v2-status:empty{display:none}
.et-right .v2-status.is-quiet{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 버린 직후 알림은 낭독만(쓰레기통 아래 횟수와 겹침) */
.et-key{margin:-6px 0 0;text-align:center}
@media (pointer:coarse){ .et-key{display:none} }
.et-bin{width:100%;max-width:170px;margin:4px auto 0;aspect-ratio:170 / 180}
.et-bin svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 95%}
.et-bin.is-hit svg{animation:et-wob .4s ease-out}
@keyframes et-wob{25%{transform:rotate(-3deg)}55%{transform:rotate(2deg)}80%{transform:rotate(-1deg)}}
.et-b-sh{fill:var(--ink);opacity:.08}
.et-b-back{fill:var(--soft);fill-opacity:.55;stroke:none}
.et-b-body{fill:var(--wash);fill-opacity:.35;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.et-b-mesh line,.et-b-mesh path{fill:none;stroke:var(--muted);stroke-width:1;opacity:.5}
.et-b-rim{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
.et-b-rim--back{stroke-width:2;opacity:.45}
.et-ball,.et-strip-s{fill:var(--et-ball);stroke:var(--muted);stroke-width:1.1;stroke-linejoin:round}
.et-strip-s{stroke-width:.6}
.et-crease{fill:none;stroke:var(--line);stroke-width:.9}
#etPile .is-new{animation:et-pop .3s ease-out}
@keyframes et-pop{from{opacity:0}}
.et-shredder{transform:translateY(-30px);opacity:0;transition:transform .32s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.et-shredder rect:first-child{fill:var(--fill)}
.et-shredder .slot{fill:var(--paper);opacity:.6}
.et-shredder .led{fill:var(--accent)}
.et-bin.is-shred .et-shredder{transform:none;opacity:1}
.et-bin.is-shredding .et-shredder{animation:et-buzz .08s linear infinite}
@keyframes et-buzz{50%{transform:translateX(.8px)}}
.et-count{margin:0;text-align:center;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.et-count.is-bump{animation:et-bump .42s}
@keyframes et-bump{40%{color:var(--accent);transform:scale(1.06)}}

/* 움직이는 복사본(종이·공·파쇄 가닥): 작업면 기준 절대 위치 */
.et-ghost{position:absolute;z-index:6;pointer-events:none;overflow:hidden;background:var(--et-sheet);border:1px solid var(--line);border-radius:2px;box-shadow:0 10px 20px -12px rgba(26,18,8,.5);will-change:transform}
.et-ghost__t{height:100%;overflow:hidden;padding:41px 14px 10px 50px;font-family:var(--serif);font-size:16px;line-height:var(--lh);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.et-fly{position:absolute;z-index:7;pointer-events:none}
.et-fly>div,.et-fly svg{display:block;width:100%;height:100%}
.et-strip{position:absolute;z-index:4;pointer-events:none;background:var(--et-ball);border:1px solid var(--line);border-top:0;transform-origin:50% 0}

/* 이 탭에서 버린 종이 · 위기 상담 띠 */
.et-log{padding:12px 18px 14px;border-top:1px solid var(--soft)}
.et-log__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.et-tk{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted);animation:et-in .3s ease-out}
.et-tk--shred{border-style:dashed}
.et-tk span+span::before{content:"·";margin-right:6px;color:var(--line)}
.et-tk .tm,.et-tk .w{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.et-sos{margin:0;padding:10px 18px 12px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12.5px;line-height:1.7;color:var(--muted)}
.et-sos b{color:var(--ink)}
.et-sos a,.et-crisis a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.et-sos a{color:var(--ink);font-weight:800;white-space:nowrap}

/* 툴 폭 640px 미만: 노트 → 버리는 자리(조작 왼쪽 · 쓰레기통 오른쪽) */
@container etw (max-width:639px){
  .et-desk{grid-template-columns:minmax(0,1fr)}
  .et-left{border-right:0;border-bottom:1px solid var(--soft);padding:14px 14px 16px}
  .et-right{display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-areas:"mode bin" "w0 bin" "toss toss" "st st" "key key" "cnt cnt";gap:10px 14px;padding:14px}
  .et-right>.v2-f{grid-area:mode}
  .et-w0{grid-area:w0}
  .et-toss{grid-area:toss}
  .et-right .v2-status{grid-area:st;margin:0}
  .et-key{grid-area:key;margin:0}
  .et-bin{grid-area:bin;align-self:end;margin:0}
  .et-count{grid-area:cnt}
  .et-paper::before{left:26px}
  .et-paper__head,.et-paper__foot,.et-ghost__t{padding-left:36px}
  .et-text{padding-left:36px}
  .et-log,.et-sos{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){
  .et-sheet.is-in,.et-after.is-in,.et-stamps span,.et-tk,.et-count.is-bump,.et-bin.is-hit svg,#etPile .is-new,.is-shake{animation:none}
  .et-orb,.et-bars .trk i,.et-shredder{transition:none}
}