/* 이메일 템플릿 생성기 — 편지 작성대(2026-10-22). 상황 찾기(검색 | 분류 칩 → 양식 단추) → 메일 창(머리 줄 → 요령 → 받는 주소·제목 → 메일 뼈대 막대 → 본문)
   → 빈칸 점·글자 수 → 복사·열기. 본문은 문단마다 '역할 이름 | 색 띠 + 글'이고 빈칸은 글 안에서 바로 쓰는 칸이다. 역할 색 6개는 뼈대 막대와 같다.
   작업면이 560px보다 좁으면 역할 이름을 빼고 색 띠만 남긴다. */
.etb{container:etb / inline-size;--etb-greet:#4f5488;--etb-purpose:#7a4a24;--etb-detail:#2f6658;--etb-ask:#8a3d4c;--etb-close:#8a5a10;--etb-sign:#4d6626}
html[data-theme="dark"] .etb{--etb-greet:#b2b6e6;--etb-purpose:#e0ae7c;--etb-detail:#86c4b2;--etb-ask:#e8a0ac;--etb-close:#e3c06e;--etb-sign:#b6d28a}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .etb{--etb-greet:#b2b6e6;--etb-purpose:#e0ae7c;--etb-detail:#86c4b2;--etb-ask:#e8a0ac;--etb-close:#e3c06e;--etb-sign:#b6d28a}}
.etb [hidden]{display:none!important}
.etb [data-r="greet"]{--r:var(--etb-greet)}
.etb [data-r="purpose"]{--r:var(--etb-purpose)}
.etb [data-r="detail"]{--r:var(--etb-detail)}
.etb [data-r="ask"]{--r:var(--etb-ask)}
.etb [data-r="close"]{--r:var(--etb-close)}
.etb [data-r="sign"]{--r:var(--etb-sign)}

/* 상황 찾기 */
.etb-pick{display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-bottom:1px solid var(--soft);border-radius:var(--radius) var(--radius) 0 0}
.etb-find{display:flex;align-items:center;gap:12px}
.etb-find .v2-label{flex:none}
.etb-q{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;height:var(--v2-ctl);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease),box-shadow var(--ease)}
.etb-q:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.etb-q > .i{flex:none;width:15px;height:15px;margin:0 0 0 11px;color:var(--muted)}
.etb-q input{flex:1 1 0;min-width:0;height:100%;padding:0 8px;border:0;background:none;outline:0;font-family:var(--sans);font-size:14.5px;color:var(--ink)}
.etb-q input::placeholder{color:var(--muted);opacity:.8}
.etb-q input::-webkit-search-cancel-button{display:none}
.etb-qx{flex:none;width:32px;height:32px;margin-right:4px;border:0;border-radius:var(--radius);background:none;font-size:18px;line-height:1;color:var(--muted)}
.etb-qx:hover{background:var(--btn);color:var(--ink)}
.etb-cats{display:flex;flex-wrap:wrap;gap:5px}
.etb-cats button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;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;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.etb-cats button small{font-size:11px;font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}
.etb-cats button:hover{background:var(--btn);color:var(--ink)}
.etb-cats button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.etb-cats .i{width:12px;height:12px}
.etb-tpls{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px dashed var(--soft)}
.etb-tpls button{display:inline-flex;align-items:baseline;gap:6px;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink);text-align:left;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.etb-tpls button:hover{background:var(--btn)}
.etb-tpls button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.etb-tpls small{font-size:11px;font-weight:500;opacity:.7}
.etb-edm{font-style:normal;font-size:10.5px;font-weight:600;padding:0 5px;border-radius:3px;background:var(--accent-wash);color:var(--accent)}
.etb-tpls button[aria-pressed="true"] .etb-edm{background:color-mix(in srgb,var(--on-fill) 18%,transparent);color:var(--on-fill)}
.etb-pmsg{margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}

/* 메일 창 머리 */
.etb-mail{background:var(--paper)}
.etb-bar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:12px 18px 6px}
.etb-star{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);color:var(--muted);transition:background var(--ease),color var(--ease)}
.etb-star:hover{background:var(--btn);color:var(--ink)}
.etb-star .i{width:15px;height:15px}
.etb-star[aria-pressed="true"]{color:var(--accent)}
.etb-star[aria-pressed="true"] .i{fill:currentColor}
.etb-name{flex:1 1 auto;min-width:0;margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.etb-name b{font-family:var(--sans);font-size:16px;font-weight:750;color:var(--ink)}
.etb-name span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.etb-tools{display:flex;gap:6px;flex-wrap:wrap}
.etb-tools .v2-btn.is-arm{border-color:var(--accent);color:var(--accent)}
.etb-tools .v2-btn.is-on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.etb-tip{display:flex;gap:8px;align-items:baseline;margin:0;padding:0 18px 12px 58px;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--muted)}
.etb-tip .v2-label{flex:none;color:var(--ink)}
.etb-head{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:0;margin:0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--soft)}
.etb-hl{align-self:stretch;display:flex;align-items:center;padding:0 14px 0 0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.etb-head > *:nth-child(n+3){border-top:1px solid var(--soft)}
.etb-to,.etb-subje{width:100%;min-width:0;height:40px;padding:0;border:0;background:none;outline:0;font-family:var(--sans);font-size:14px;color:var(--ink)}
.etb-to::placeholder{color:var(--muted);opacity:.75}
.etb-subj,.etb-subje{min-height:44px;padding:10px 0;font-family:var(--sans);font-size:15.5px;font-weight:700;line-height:1.55;color:var(--ink);overflow-wrap:break-word}
.etb-subje{height:auto;font-weight:700}
.etb-head:focus-within .etb-hl{color:var(--ink)}

/* 메일 뼈대 막대 */
.etb-map{display:flex;align-items:center;gap:10px;margin:0 18px;padding:10px 0 4px;transition:opacity var(--ease)}
.etb-map.is-off{opacity:.4}
.etb-map .v2-label{flex:none}
.etb-mapb{flex:1 1 auto;min-width:0;display:flex;gap:2px;height:22px}
.etb-seg{position:relative;flex:1 1 0;min-width:6px;display:flex;align-items:center;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--r) 20%,var(--paper));box-shadow:inset 0 -2px 0 var(--r);cursor:pointer;transition:flex-grow .32s cubic-bezier(.2,.7,.2,1)}
.etb-seg i{padding:0 6px;font-family:var(--sans);font-size:11px;font-style:normal;font-weight:650;white-space:nowrap;color:var(--r);font-variant-numeric:tabular-nums}
.etb-map.is-off .etb-seg{cursor:default}
@media (prefers-reduced-motion: reduce){.etb-seg{transition:none}}

/* 서식 단추(직접 다듬기) */
.etb-fmt{display:flex;flex-wrap:wrap;gap:4px;margin:8px 18px 0}
.etb-fmt button{min-width:32px;height:30px;padding:0 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--serif);font-size:14px;color:var(--ink)}
.etb-fmt button:hover{background:var(--btn)}
.etb-fmt sub{font-size:9px}

/* 본문 */
.etb-body{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:12px;padding:10px 18px 14px}
.etb-p{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:start;padding:5px 0;border-radius:var(--radius)}
.etb-p + .etb-p{margin-top:4px}
.etb-rl{padding-top:3px;font-family:var(--sans);font-size:11px;font-weight:650;line-height:1.5;color:var(--r);text-align:right;white-space:nowrap}
.etb-tx{min-width:0;padding:0 0 0 12px;border-left:3px solid var(--r);font-family:var(--sans);font-size:15px;line-height:1.75;color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word}
.etb-tx b{font-weight:750}
.etb-p.is-hl{background:color-mix(in srgb,var(--r) 10%,transparent)}
@media (prefers-reduced-motion: no-preference){.etb-p.is-hl{animation:etbHl 1.4s ease-out}}
@keyframes etbHl{0%{background:color-mix(in srgb,var(--r) 26%,transparent)}100%{background:transparent}}

/* 빈칸: 비면 이름표, 채우면 역할 색 밑줄 */
.etb-b{display:inline;padding:1px 3px;margin:0 1px;border-radius:3px;border-bottom:1.5px dashed var(--muted);background:color-mix(in srgb,var(--wash) 85%,var(--paper));outline:0;color:var(--ink);font-weight:600;cursor:text;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background var(--ease),box-shadow var(--ease)}
.etb-b:empty{display:inline-block;min-width:2ch}
.etb-b:empty::before{content:"{" attr(data-l) "}";font-weight:500;color:var(--muted)}
.etb-b.is-f{padding:1px 1px;margin:0;border-bottom:1.5px solid var(--r,var(--ink));background:color-mix(in srgb,var(--r,var(--ink)) 9%,transparent)}
.etb-b:focus,.etb-b.is-on{box-shadow:0 0 0 2px var(--accent-wash);border-bottom-color:var(--accent)}
.etb-b:focus{background:var(--paper)}
.etb-subj .etb-b{font-weight:700}

/* 직접 다듬기 편집기 */
.etb-ed{min-height:260px;margin:10px 18px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);outline:0;font-family:var(--sans);font-size:15px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
.etb-ed:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.etb-ed p{margin:0 0 1em}
.etb-ed ul,.etb-ed ol{margin:0 0 1em;padding-left:1.4em}

/* 빈칸 점 · 글자 수 */
.etb-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin:0 18px;padding:10px 0 12px;border-top:1px solid var(--soft)}
.etb-blanks,.etb-count{margin:0;font-family:var(--sans);font-size:12.5px}
.etb-blanks{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.etb-blanks b{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.etb-blanks b.is-done{color:var(--ink)}
.etb-dots{display:inline-flex;flex-wrap:wrap;gap:4px}
.etb-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;cursor:pointer;transition:background var(--ease),border-color var(--ease),transform var(--ease)}
.etb-dot.is-f{background:var(--ink);border-color:var(--ink)}
.etb-dot.is-on{transform:scale(1.3);border-color:var(--accent)}
.etb-count{color:var(--muted);font-variant-numeric:tabular-nums}

/* 복사 · 열기 */
.etb-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 18px 6px;border-top:1px solid var(--line)}
.etb-open{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.etb-open .v2-btn{text-decoration:none}
.etb-st{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:2px 18px 14px;min-height:20px}
.etb-st .v2-status{line-height:1.5}
.etb-hint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.etb-st .v2-status:not(:empty) + .etb-hint{display:none}

@container etb (max-width: 640px){
  .etb-tip{padding-left:18px}
}
@container etb (max-width: 560px){
  .etb-body{display:block}
  .etb-p{grid-template-columns:1fr;gap:1px}
  .etb-rl{padding:0 0 0 15px;font-size:10.5px;line-height:1.3;text-align:left}
  .etb-open{margin-left:0}
  .etb-find{flex-direction:column;align-items:stretch;gap:5px}
}
@container etb (max-width: 420px){
  .etb-pick,.etb-bar,.etb-body{padding-left:14px;padding-right:14px}
  .etb-head,.etb-map,.etb-foot,.etb-fmt{margin-left:14px;margin-right:14px}
  .etb-tip,.etb-act,.etb-st{padding-left:14px;padding-right:14px}
  .etb-ed{margin-left:14px;margin-right:14px}
  .etb-tx{padding-left:10px;font-size:14.5px}
  .etb-act > .v2-btn--primary{flex:1 1 100%;justify-content:center}
}

/* 본문: 예시 메일 · 양식 목록 표 */
.etb-sample{margin:14px 0 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.etb-sh{display:flex;gap:12px;align-items:baseline;margin:0;padding:10px 14px;border-bottom:1px solid var(--soft);font-family:var(--sans)}
.etb-sh span{flex:none;font-size:12px;font-weight:600;color:var(--muted)}
.etb-sh b{min-width:0;font-size:14.5px;font-weight:700;color:var(--ink);overflow-wrap:break-word}
.v2-article .etb-sample pre{margin:0;padding:12px 14px;border:0;border-radius:0;background:none;font-family:var(--sans);font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:break-word;color:var(--ink)}
.etb-sample figcaption{padding:8px 14px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:12px;color:var(--muted)}
.etb-list th{white-space:nowrap}
.etb-list th small{margin-left:4px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.etb-list td{line-height:1.9}