/* 대소문자 변환기 '형식 진열대' — 2026-10-22. 구역: 원문 → 진열대(v2-tone) → 결과 → 단어 판정 띠. accent는 결과 칸의 바뀐 글자·이음 기호 한 곳. */
.ccv-work{container:ccv/inline-size}
.ccv-work [hidden]{display:none!important}
.ccv-src,.ccv-shelf,.ccv-out{padding:16px 18px;border-bottom:1px solid var(--soft)}
.ccv-strip{padding:14px 18px 16px}
.ccv-ph,.ccv-gh,.ccv-sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 7px}
.ccv-ph{justify-content:space-between}
.ccv-meta,.ccv-hint{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 원문 */
.ccv-ta{display:block;width:100%;min-height:70px;max-height:340px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink);resize:vertical;outline:0;transition:border-color var(--ease),box-shadow var(--ease),background var(--ease)}
.ccv-ta:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.ccv-ta::placeholder{color:var(--muted);opacity:.8}
.ccv-ta.is-drop{border-style:dashed;border-color:var(--ink);background:var(--wash)}
.ccv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:10px}
.ccv-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.ccv-ex .v2-label{margin-right:2px}
.ccv-ex button{height:28px;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);cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.ccv-ex button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}
.ccv-io{display:flex;flex-wrap:wrap;gap:6px}
.ccv-file{position:relative;cursor:pointer}
.ccv-file input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.ccv-file:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* 진열대: 카드 = 형식 이름(그 형식으로 쓴 이름) + 설명 + 이 글의 미리 보기, 오른쪽 위 복사 */
.ccv-shelf{display:grid;gap:14px}
.ccv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ccv-card{position:relative;min-width:0}
.ccv-pick{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;gap:0 8px;width:100%;height:100%;min-height:72px;margin:0;padding:10px 38px 10px 12px;text-align:left;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.ccv-pick:hover{border-color:var(--line)}
.ccv-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccv-nm{font-family:var(--mono);font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ccv-pick small{font-family:var(--sans);font-size:11.5px;font-weight:500;line-height:1.4;color:var(--muted)}
.ccv-pick small em{font-style:normal;font-weight:650}
.ccv-pv{flex:1 0 100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ccv-grp:last-child .ccv-pv{font-family:var(--mono);font-size:12.5px}
.ccv-pick[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.ccv-pick[aria-pressed="true"] small,.ccv-pick[aria-pressed="true"] .ccv-pv{color:var(--on-fill)}
.ccv-pick[aria-pressed="true"] small{opacity:.78}
.ccv-cp{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.ccv-cp:hover{background:var(--btn);border-color:var(--soft);color:var(--ink)}
.ccv-cp:disabled{opacity:.35;cursor:not-allowed}
.ccv-cp .i{width:14px;height:14px}
.ccv-pick[aria-pressed="true"] + .ccv-cp{color:var(--on-fill)}
.ccv-pick[aria-pressed="true"] + .ccv-cp:hover{background:color-mix(in srgb, var(--on-fill) 16%, transparent);border-color:transparent}

/* 결과 */
.ccv-oh{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin:0 0 10px}
.ccv-ot{flex:1 1 260px;min-width:0;margin:0}
.ccv-ot b{display:block;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
.ccv-ot span{display:block;margin-top:2px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ccv-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ccv-sel{display:inline-flex;align-items:center;gap:8px}
.ccv-sel select{height:32px;max-width:100%;padding:0 26px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.ccv-sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccv-view{min-height:3.4em;max-height:440px;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.ccv-view:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccv-view.is-code{font-family:var(--mono);font-size:14.5px}
.ccv-view.is-empty{font-size:13.5px;color:var(--muted)}
.ccv-view i{position:relative;top:0;font-style:normal}
.ccv-view i.u{background:color-mix(in srgb, var(--accent) 14%, transparent);border-radius:2px}
.ccv-view i.l{text-decoration:underline dotted var(--muted);text-underline-offset:4px}
.ccv-view i.sp{color:var(--accent);font-weight:700}
.ccv-view i.f.u{animation:ccv-rise .34s cubic-bezier(.2,.7,.2,1) both}
.ccv-view i.f.l,.ccv-view i.f:not(.u){animation:ccv-fall .34s cubic-bezier(.2,.7,.2,1) both}
@keyframes ccv-rise{from{top:.42em;opacity:.15}to{top:0;opacity:1}}
@keyframes ccv-fall{from{top:-.42em;opacity:.15}to{top:0;opacity:1}}
.ccv-foot{display:grid;gap:8px;margin-top:10px}
.ccv-stats{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ccv-share{position:relative;flex:none;width:76px;height:8px;border:1px solid var(--line);border-radius:4px;background:var(--paper);overflow:hidden}
.ccv-share i{position:absolute;left:0;top:0;bottom:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.ccv-share .a{width:calc(var(--a,0) * 100%);background:repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 4px)}
.ccv-share .b{width:calc(var(--b,0) * 100%);height:4px;top:auto;background:var(--ink)}
.ccv-cmd{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.ccv-cmd .v2-status{flex:1 1 220px;min-width:0;margin-right:auto;line-height:1.5}

/* 단어 판정 띠 */
.ccv-chips{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.ccv-chip{display:inline-flex;flex-direction:column;align-items:center;gap:1px;max-width:100%;min-width:0;margin:0;padding:5px 9px 4px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;text-align:center}
.ccv-chip b{font-family:var(--sans);font-size:14px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.ccv-chip small{font-family:var(--sans);font-size:10.5px;font-weight:500;line-height:1.3;color:var(--muted);white-space:nowrap}
button.ccv-chip{cursor:pointer;transition:border-color var(--ease),background var(--ease)}
button.ccv-chip:hover{border-color:var(--line);background:var(--btn)}
button.ccv-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ccv-chip:is(.t-article,.t-prep,.t-conj,.t-tugas,.t-rae,.t-lower){background:var(--wash)}
.ccv-chip:is(.t-article,.t-prep,.t-conj,.t-tugas,.t-rae,.t-lower) b{font-weight:500;color:var(--muted)}
.ccv-chip:is(.t-acr,.t-mixed){border-style:dashed;border-color:var(--line)}
.ccv-chip.t-ovr{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ccv-chip.t-ovr small{color:var(--ink);font-weight:650}
.ccv-chip.t-caps small{color:var(--ink)}
.ccv-chips.is-code{align-items:center;gap:4px}
.ccv-chips.is-code .ccv-chip b{font-family:var(--mono);font-size:13.5px}
.ccv-chip.is-hump small{color:var(--ink)}
.ccv-sep{font-family:var(--mono);font-size:15px;font-weight:700;font-style:normal;color:var(--ink)}
.ccv-more{margin:8px 0 0;padding:0;border:0;background:none;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.ccv-sum{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin:10px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.ccv-lg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:11.5px}
.ccv-lg i{display:inline-block;width:12px;height:12px;margin-left:6px;border:1px solid var(--soft);border-radius:2px;background:var(--paper)}
.ccv-lg i:first-child{margin-left:0}
.ccv-lg .k-up{border-color:var(--line)}
.ccv-lg .k-low{background:var(--wash)}
.ccv-lg .k-keep{border-style:dashed;border-color:var(--line)}
.ccv-lg .k-ovr{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

@container ccv (max-width:560px){
  .ccv-src,.ccv-shelf,.ccv-out{padding:14px 14px}
  .ccv-strip{padding:12px 14px 14px}
  .ccv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccv-pick{min-height:70px;padding:9px 34px 9px 10px}
  .ccv-cmd .v2-status{flex-basis:100%}
}
@container ccv (max-width:340px){
  .ccv-cmd .v2-btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ccv-view i.f{animation:none!important}
  .ccv-share i{transition:none}
}