/* ══════════════════════════════════════════
   LOGIN VIEW
══════════════════════════════════════════ */
#v-login{flex:1;display:none;align-items:center;justify-content:center;padding:2rem}
#v-login.active{display:flex}
.login-wrap{width:100%;max-width:340px;animation:fadeIn 0.6s var(--ease-soft)}
.login-logo{font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-0.04em;margin-bottom:2.5rem;color:var(--text);text-align:center}
.login-logo span{display:block;font-family:var(--mono);font-size:0.6rem;font-weight:300;color:var(--text3);letter-spacing:0.12em;margin-top:0.35rem}
.login-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r16);padding:2rem;box-shadow:var(--shadow-md);transition:border-color 0.3s var(--ease-soft),box-shadow 0.3s var(--ease-soft)}
.login-form:focus-within{border-color:var(--border2);box-shadow:var(--shadow-lg)}
.login-form h2{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--text);margin-bottom:0.35rem;letter-spacing:-0.02em}
.login-form p{font-size:0.73rem;color:var(--text3);font-family:var(--mono);margin-bottom:1.6rem}
.login-err{font-size:0.72rem;color:var(--red);font-family:var(--mono);margin-top:0.5rem;display:none;letter-spacing:0.02em;animation:shake 0.4s var(--ease-soft)}
.login-err.show{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
/* Form input — used by login and editor fields */
.fi{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r8);
  padding:0.65rem 0.9rem;color:var(--text);font-size:0.85rem;
  transition:border-color 0.28s var(--ease-soft),box-shadow 0.28s var(--ease-soft),background 0.28s var(--ease-soft);
  outline:none;-webkit-appearance:none;appearance:none;
}
.fi:hover{border-color:var(--border2)}
.fi:focus{border-color:var(--gold3);box-shadow:0 0 0 3px var(--gold-glow)}
.fi::placeholder{color:var(--text4)}
select.fi{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233d3a37' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer;
}

/* ══════════════════════════════════════════
   OVERLAY & TOAST
══════════════════════════════════════════ */
#overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:199;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 0.35s var(--ease-soft)}
#overlay.open{display:block}
#toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:rgba(20,20,20,0.85);border:1px solid var(--border2);border-radius:var(--r12);
  padding:0.7rem 1.2rem;font-size:0.76rem;font-family:var(--mono);color:var(--text2);
  z-index:9998;opacity:0;pointer-events:none;
  transform:translateY(14px) scale(0.96);
  transition:opacity 0.3s var(--ease-soft),transform 0.4s var(--ease-spring);
  max-width:300px;letter-spacing:0.02em;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
}
[data-theme="light"] #toast{background:rgba(255,255,255,0.85)}
#toast.show{opacity:1;transform:translateY(0) scale(1)}
#toast.success{border-color:var(--gold3);color:var(--gold);box-shadow:var(--shadow-lg),0 0 0 1px var(--gold-glow)}
#toast.error{border-color:rgba(192,72,72,0.35);color:var(--red)}

/* ══════════════════════════════════════════
   SEARCH MODAL
══════════════════════════════════════════ */
#search-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding:5rem 1rem 2rem;pointer-events:none}
#search-modal.open{pointer-events:all}
#search-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:background 0.32s var(--ease-soft),backdrop-filter 0.32s var(--ease-soft),-webkit-backdrop-filter 0.32s var(--ease-soft);
}
#search-modal.open #search-backdrop{background:rgba(0,0,0,0.62);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%)}
#search-panel{
  position:relative;z-index:1;width:100%;max-width:600px;
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--r16);overflow:hidden;
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,0.03);
  transform:translateY(-24px) scale(0.94);opacity:0;
  transition:transform 0.42s var(--ease-spring),opacity 0.28s var(--ease-soft);
}
#search-modal.open #search-panel{transform:translateY(0) scale(1);opacity:1}
#search-input-wrap{display:flex;align-items:center;gap:0.75rem;padding:0.9rem 1.2rem;border-bottom:1px solid var(--border);color:var(--text3)}
#search-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:1rem;font-family:var(--sans);line-height:1.5;-webkit-appearance:none}
#search-input::placeholder{color:var(--text3)}
#search-input::-webkit-search-cancel-button{display:none}
#search-clear{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text3);border-radius:99px;cursor:pointer;
  transition:color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),opacity 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  opacity:0;pointer-events:none;flex-shrink:0;transform:scale(0.8);
}
#search-clear.visible{opacity:1;pointer-events:all;transform:scale(1)}
#search-clear:hover{color:var(--text);background:var(--surface2)}
#search-clear:active{transform:scale(0.92)}
#search-results{max-height:420px;overflow-y:auto;overscroll-behavior:contain}
#search-results::-webkit-scrollbar{width:3px}
#search-results::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px}
.sr-empty{padding:3rem 1.5rem;text-align:center;color:var(--text3);font-family:var(--mono);font-size:0.8rem;letter-spacing:0.04em}
.sr-empty-icon{font-size:1.5rem;margin-bottom:0.5rem;opacity:0.4}
.sr-item{display:flex;align-items:center;gap:0.85rem;padding:0.75rem 1.15rem;cursor:pointer;transition:background 0.22s var(--ease-soft),padding-left 0.22s var(--ease-soft);border-bottom:1px solid var(--border);outline:none;position:relative}
.sr-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:55%;background:var(--gold-rail);border-radius:0 2px 2px 0;
  transition:transform 0.32s var(--ease-spring);
}
.sr-item:last-child{border-bottom:none}
.sr-item:hover,.sr-item.focused{background:var(--gold-glow);padding-left:1.3rem}
.sr-item:hover::before,.sr-item.focused::before{transform:translateY(-50%) scaleY(1)}
.sr-item.focused .sr-title{color:var(--gold)}
.sr-thumb{width:52px;height:38px;flex-shrink:0;object-fit:cover;border-radius:var(--r4);border:1px solid var(--border)}
.sr-thumb-ph{width:52px;height:38px;flex-shrink:0;border-radius:var(--r4);border:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--text4)}
.sr-body{flex:1;min-width:0}
.sr-title{font-family:var(--serif);font-size:0.92rem;font-weight:500;color:var(--text);letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0.2rem;transition:color 0.12s}
.sr-title mark,.sr-excerpt mark{background:transparent;color:var(--gold);font-style:normal}
.sr-excerpt{font-size:0.73rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.sr-meta{display:flex;align-items:center;gap:0.45rem;margin-top:0.25rem;font-size:0.65rem;font-family:var(--mono)}
.sr-cat{color:var(--gold);opacity:0.8}
.sr-date{color:var(--text3)}
#search-footer{padding:0.55rem 1.2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2)}
#search-count{font-size:0.68rem;font-family:var(--mono);color:var(--text3);letter-spacing:0.04em}
.search-hint{font-size:0.64rem;font-family:var(--mono);color:var(--text4);letter-spacing:0.02em}
.search-hint kbd{display:inline-block;padding:0.05rem 0.3rem;border:1px solid var(--border2);border-radius:3px;background:var(--surface2);color:var(--text3);font-family:var(--mono);font-size:0.62rem}

/* ══════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════ */
#lightbox{
  position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;transition:background 0.35s var(--ease);
}
#lightbox.open{background:rgba(0,0,0,0.95);pointer-events:all}
#lb-img-wrap{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
#lb-img-wrap.zoomed{cursor:grab}
#lb-img-wrap.zoomed:active{cursor:grabbing}
#lb-img-wrap.lb-loading::after{
  content:'';position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;
  border-radius:50%;border:2px solid rgba(255,255,255,0.14);border-top-color:rgba(255,255,255,0.85);
  animation:lb-spin 0.7s linear infinite;pointer-events:none;z-index:3;
}
@keyframes lb-spin{to{transform:rotate(360deg)}}
[data-theme="light"] #lb-img-wrap.lb-loading::after{border-color:rgba(0,0,0,0.14);border-top-color:rgba(0,0,0,0.85)}
#lb-img{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r6);display:block;
  opacity:0;transform:scale(0.94) translateY(14px);
  transition:opacity 0.5s var(--ease-soft),transform 0.55s var(--ease-soft);
  transform-origin:center center;will-change:transform;
  user-select:none;-webkit-user-drag:none;touch-action:none;
}
#lightbox.open #lb-img{opacity:1;transform:scale(1) translateY(0)}
#lb-img.transitioning{opacity:0;transform:scale(0.96) translateY(8px)}
#lb-topbar{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 1.25rem;flex-shrink:0;opacity:0;transform:translateY(-8px);
  transition:opacity 0.3s var(--ease-out) 0.1s,transform 0.3s var(--ease-out) 0.1s;
  background:linear-gradient(to bottom,rgba(0,0,0,0.6),transparent);
}
#lightbox.open #lb-topbar{opacity:1;transform:translateY(0)}
.lb-counter{font-family:var(--mono);font-size:0.72rem;color:rgba(255,255,255,0.5);letter-spacing:0.08em}
.lb-top-actions{display:flex;align-items:center;gap:0.5rem}
.lb-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.12);border-radius:var(--r8);
  background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.75);
  cursor:pointer;transition:background 0.22s var(--ease-soft),color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-shrink:0;
}
.lb-btn:hover{background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.28);transform:translateY(-1px)}
.lb-btn:active{transform:translateY(0) scale(0.94)}
.lb-btn svg{width:14px;height:14px;pointer-events:none}
.lb-btn-close{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.15);border-radius:var(--r8);
  background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);
  cursor:pointer;transition:background 0.22s var(--ease-soft),color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.lb-btn-close:hover{background:rgba(176,64,64,0.42);border-color:rgba(176,64,64,0.55);color:#fff;transform:rotate(90deg)}
.lb-btn-close svg{width:14px;height:14px;pointer-events:none}
#lb-bottombar{
  width:100%;padding:0.6rem 1.25rem 1rem;flex-shrink:0;opacity:0;transform:translateY(8px);
  transition:opacity 0.3s var(--ease-out) 0.1s,transform 0.3s var(--ease-out) 0.1s;
  background:linear-gradient(to top,rgba(0,0,0,0.65),transparent);
}
#lightbox.open #lb-bottombar{opacity:1;transform:translateY(0)}
#lb-zoom-badge{position:absolute;bottom:0.8rem;right:1rem;font-family:var(--mono);font-size:0.65rem;color:rgba(255,255,255,0.4);letter-spacing:0.06em;pointer-events:none;opacity:0;transition:opacity 0.3s}
#lb-zoom-badge.show{opacity:1}
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.12);border-radius:50%;
  background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition:background 0.22s var(--ease-soft),color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),transform 0.32s var(--ease-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:2;opacity:0;
}
#lightbox.open .lb-arrow{opacity:1;transition:opacity 0.4s 0.2s var(--ease-soft),background 0.22s var(--ease-soft),color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),transform 0.32s var(--ease-soft)}
.lb-arrow:hover{background:rgba(255,255,255,0.2);color:#fff;border-color:rgba(255,255,255,0.32)}
#lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
#lb-next:hover{transform:translateY(-50%) translateX(3px)}
.lb-arrow:active{transform:translateY(-50%) scale(0.94)}
.lb-arrow svg{width:16px;height:16px;transition:transform 0.22s var(--ease-soft)}
#lb-prev{left:1rem}
#lb-next{right:1rem}
.lb-arrow.hidden{opacity:0!important;pointer-events:none}
#lb-exif{
  padding:0.5rem 1.25rem 0.25rem;text-align:center;
  transition:opacity 0.25s,max-height 0.25s;overflow:hidden;max-height:60px;
}
#lb-exif.lb-exif-hidden{opacity:0;max-height:0;pointer-events:none}
#lb-exif-camera{
  font-size:0.72rem;font-weight:500;color:rgba(255,255,255,0.85);
  letter-spacing:0.04em;margin-bottom:0.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#lb-exif-specs{
  font-family:var(--mono);font-size:0.65rem;color:rgba(255,255,255,0.45);
  letter-spacing:0.03em;white-space:nowrap;overflow-x:auto;
}
#lb-exif-specs::-webkit-scrollbar{display:none}
#lb-thumbs{display:flex;gap:0.4rem;justify-content:center;margin-top:0.6rem;overflow-x:auto;padding:0.1rem 0.5rem}
#lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumb{width:42px;height:32px;flex-shrink:0;object-fit:cover;border-radius:4px;border:1.5px solid transparent;cursor:pointer;opacity:0.4;transition:opacity 0.25s var(--ease-soft),border-color 0.25s var(--ease-soft),transform 0.25s var(--ease-soft)}
.lb-thumb.active{border-color:var(--gold);opacity:1;transform:scale(1.05)}
.lb-thumb:hover{opacity:0.85;transform:translateY(-2px)}
/* ── lightbox light-mode overrides ── */
[data-theme="light"] #lightbox .lb-btn{background:rgba(0,0,0,0.07)!important;border-color:rgba(0,0,0,0.22)!important;color:#000!important}
[data-theme="light"] #lightbox .lb-btn:hover{background:rgba(0,0,0,0.13)!important;border-color:rgba(0,0,0,0.35)!important}
[data-theme="light"] #lightbox .lb-btn-close{background:rgba(0,0,0,0.07)!important;border-color:rgba(0,0,0,0.22)!important;color:#000!important}
[data-theme="light"] #lightbox .lb-btn-close:hover{background:rgba(192,72,72,0.15)!important;border-color:rgba(192,72,72,0.4)!important;color:#b04040!important}
[data-theme="light"] #lightbox .lb-counter{color:rgba(0,0,0,0.5)!important}
[data-theme="light"] #lb-zoom-badge{color:rgba(0,0,0,0.45)!important}
[data-theme="light"] #lightbox .lb-arrow{background:rgba(0,0,0,0.07)!important;border-color:rgba(0,0,0,0.22)!important;color:#000!important}
[data-theme="light"] #lightbox .lb-arrow:hover{background:rgba(0,0,0,0.13)!important;border-color:rgba(0,0,0,0.35)!important}
[data-theme="light"] #lb-exif-camera{color:rgba(0,0,0,0.8)!important}
[data-theme="light"] #lb-exif-specs{color:rgba(0,0,0,0.5)!important}

/* ══════════════════════════════════════════
   LYRICS CONVERTER (에디터 내장)
══════════════════════════════════════════ */
#lc-wrap{margin-top:0.8rem}
.lc-body{border-radius:0 0 var(--r8) var(--r8);overflow:hidden}
.lc-sticky{
  position:sticky;top:0;z-index:15;
  background:rgba(6,6,6,0.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:var(--r8) var(--r8) 0 0;overflow:hidden;
  border-bottom:none;
}
.lc-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:0.6rem;flex-wrap:wrap;
  padding:0.5rem 0.75rem;background:var(--surface);border-bottom:1px solid var(--border);
}
.lc-topbar-left{display:flex;align-items:center;gap:0.5rem}
.lc-tabs{display:flex;background:var(--surface3);border-radius:var(--r4);padding:2px;gap:1px;border:1px solid var(--border)}
.lc-tab{
  padding:0.22rem 0.7rem;font-size:0.68rem;font-weight:500;font-family:var(--mono);
  border-radius:3px;cursor:pointer;color:var(--text3);background:transparent;border:none;
  transition:background 0.22s var(--ease-soft),color 0.22s var(--ease-soft),box-shadow 0.22s var(--ease-soft);
  letter-spacing:0.03em;
}
.lc-tab.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.lc-tab:hover:not(.on){color:var(--text2);background:rgba(255,255,255,0.025)}
[data-theme="light"] .lc-tab:hover:not(.on){background:rgba(0,0,0,0.025)}
.lc-live-pill{
  display:flex;align-items:center;gap:3px;
  font-size:0.62rem;font-family:var(--mono);color:#4DC89A;
  background:rgba(77,200,154,0.08);border:1px solid rgba(77,200,154,0.2);
  border-radius:99px;padding:0.1rem 0.45rem;letter-spacing:0.04em;
}
.lc-live-dot{width:5px;height:5px;border-radius:50%;background:#4DC89A;flex-shrink:0;animation:blink 1.6s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.lc-subbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.3rem;
  padding:0.35rem 0.75rem;background:var(--surface);border-bottom:1px solid var(--border);
}
.lc-subbar:last-child{border-bottom:none}
.lc-bar-label{font-size:0.6rem;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin-right:0.1rem}
.lc-barsep{width:1px;height:12px;background:var(--border2);flex-shrink:0;margin:0 0.1rem}
.lc-spopt{
  display:flex;align-items:center;gap:0.25rem;padding:0.18rem 0.55rem;border-radius:var(--r4);
  border:1px solid var(--border2);cursor:pointer;background:var(--surface2);
  font-size:0.68rem;font-family:var(--mono);color:var(--text3);transition:all 0.1s;
}
.lc-spopt.on{background:rgba(79,142,247,0.1);color:#4F8EF7;border-color:rgba(79,142,247,.35)}
.lc-spopt:hover:not(.on){color:var(--text2)}
.lc-spdot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--border2)}
.lc-spopt.on .lc-spdot{background:#4F8EF7}
.lc-spdesc{font-size:0.6rem;color:var(--text3);opacity:.6}
.lc-spopt.on .lc-spdesc{color:rgba(79,142,247,.7);opacity:1}
.lc-sp2btn{
  display:flex;align-items:center;gap:0.25rem;padding:0.18rem 0.55rem;border-radius:var(--r4);
  border:1px solid var(--border2);cursor:pointer;background:var(--surface2);
  font-size:0.68rem;font-family:var(--mono);color:var(--text2);transition:all 0.1s;
}
.lc-sp2btn:hover{background:var(--surface3);border-color:var(--border3);color:var(--text)}
.lc-sp2btn:active{transform:scale(.96)}

/* ── 앨범 트랙 편집기 ── */
.at-header{
  display:flex;align-items:center;gap:0.6rem;
  padding:0.8rem 0;margin-bottom:0.6rem;
  border-bottom:1px solid var(--border);
}
.at-header-title{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--text);letter-spacing:-0.02em}
.at-header-count{font-size:0.68rem;font-family:var(--mono);color:var(--text3)}
/* Album Translation — 에디터 상단 바 */
#at-edit-header{
  position:sticky;top:0;z-index:15;
  padding:0.7rem 1rem;border-bottom:1px solid var(--border);
  background:rgba(6,6,6,0.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.at-edit-row{
  display:flex;align-items:flex-end;gap:0.6rem;flex-wrap:wrap;
}
.at-edit-field{display:flex;flex-direction:column;gap:0.2rem;min-width:0}
.at-edit-num-field{width:80px;flex-shrink:0}
.at-edit-title-field{flex:1;min-width:160px}
.at-edit-field label{
  font-size:0.6rem;font-family:var(--mono);color:var(--text3);
  letter-spacing:0.08em;text-transform:uppercase;
}
.at-edit-field input{
  width:100%;padding:0.42rem 0.6rem;border:1px solid var(--border2);
  border-radius:var(--r4);background:var(--bg);color:var(--text);
  font-size:0.85rem;font-family:var(--serif);outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.at-edit-field input:focus{border-color:var(--gold3);box-shadow:0 0 0 3px var(--gold-glow)}
.at-edit-actions{
  display:flex;align-items:center;gap:0.4rem;margin-left:auto;
}
.at-edit-status{
  font-size:0.68rem;font-family:var(--mono);color:var(--text3);
  letter-spacing:0.02em;margin-right:0.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;
}
.at-edit-status.editing{color:var(--gold)}

/* Album Translation — 저장된 트랙 목록 행 */
.at-row{
  display:flex;align-items:center;gap:0.6rem;
  padding:0.55rem 0.8rem;border:1px solid var(--border);
  border-radius:var(--r6);background:var(--surface);
  margin-bottom:0.4rem;cursor:pointer;user-select:none;
  transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;
}
.at-row:hover{border-color:var(--border2);background:var(--surface2)}
.at-row.editing{
  border-color:var(--gold2);background:var(--gold-glow);
  box-shadow:inset 2px 0 0 var(--gold);
}
.at-row-num{
  width:28px;height:28px;border-radius:var(--r6);
  background:var(--gold-glow);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;font-weight:700;font-family:var(--mono);
  flex-shrink:0;
}
.at-row-title{
  flex:1;min-width:0;font-family:var(--serif);font-size:0.88rem;
  font-weight:500;color:var(--text);letter-spacing:-0.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.at-row-title.empty{color:var(--text4);font-style:italic}
.at-row-meta{
  font-size:0.65rem;font-family:var(--mono);color:var(--text3);
  flex-shrink:0;
}
.at-row-del{
  width:24px;height:24px;border-radius:var(--r4);border:none;
  background:none;color:var(--text4);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;flex-shrink:0;
}
.at-row-del:hover{color:#e55;background:rgba(238,85,85,0.1)}
.at-row-drag{
  width:22px;height:26px;border-radius:var(--r4);border:none;
  background:none;color:var(--text4);cursor:grab;
  display:flex;align-items:center;justify-content:center;
  transition:color 0.15s,background 0.15s;flex-shrink:0;touch-action:none;
}
.at-row-drag:hover{color:var(--text2);background:rgba(255,255,255,0.04)}
[data-theme="light"] .at-row-drag:hover{background:rgba(0,0,0,0.04)}
.at-row-drag:active{cursor:grabbing}
.at-row.at-dragging{opacity:0.4}
.at-row.at-drop-above{box-shadow:inset 0 2px 0 var(--gold)}
.at-row.at-drop-below{box-shadow:inset 0 -2px 0 var(--gold)}
.at-empty{
  padding:1.2rem;text-align:center;color:var(--text4);
  font-size:0.78rem;font-family:var(--mono);
  border:1px dashed var(--border2);border-radius:var(--r6);
}

/* 모바일 앨범 아코디언 (뷰어) 용 — at-item* 유지 */
.at-item{
  border:1px solid var(--border);border-radius:var(--r8);
  margin-bottom:0.6rem;overflow:hidden;background:var(--surface);
  transition:border-color 0.15s;
}
.at-item.open{overflow:visible;}
.at-item:hover{border-color:var(--border2)}
.at-item-head{
  display:flex;align-items:center;gap:0.6rem;
  padding:0.7rem 0.65rem;cursor:pointer;user-select:none;
  transition:background 0.15s;
}
.at-item-head:hover{background:rgba(255,255,255,0.02)}
[data-theme="light"] .at-item-head:hover{background:rgba(0,0,0,0.02)}
.at-item-num{
  width:28px;height:28px;border-radius:var(--r6);
  background:var(--gold-glow);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:0.72rem;font-weight:700;font-family:var(--mono);flex-shrink:0;
}
.at-item-title{
  flex:1;min-width:0;font-family:var(--serif);font-size:0.88rem;
  font-weight:500;color:var(--text);letter-spacing:-0.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.at-item-title.empty{color:var(--text4);font-style:italic}
.at-item-chevron{
  width:16px;height:16px;flex-shrink:0;color:var(--text3);
  transition:transform 0.25s var(--ease);
}
.at-item.open .at-item-chevron{transform:rotate(180deg)}
.at-item-body{max-height:0;overflow:hidden;transition:max-height 0.35s var(--ease)}
.at-item.open .at-item-body{max-height:none;overflow:visible}
.at-item-inner{padding:0.6rem 0.65rem 1rem;border-top:1px solid var(--border)}

/* 앨범 편집기 상단 바 — 모바일 대응 */
@media(max-width:640px){
  .at-edit-row{flex-direction:column;align-items:stretch}
  .at-edit-num-field{width:100%}
  .at-edit-actions{margin-left:0;justify-content:flex-end}
  .at-edit-status{max-width:none;flex:1}
}

/* 2열 body */
.lc-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--border);
  border-top:none;
  min-height:400px;
}

/* 입력 (왼쪽) */
.lc-section{
  border-right:1px solid var(--border);
  background:var(--bg);
  display:flex;flex-direction:column;
  min-width:0;
}
.lc-sec-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.35rem 0.75rem;background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.lc-sec-label{font-size:0.62rem;font-weight:700;color:var(--text3);letter-spacing:.07em;text-transform:uppercase}
.lc-stat-inline{font-size:0.65rem;font-family:var(--mono);color:var(--text3)}
.lc-textarea{
  display:block;width:100%;flex:1;
  padding:0.7rem 0.9rem;
  font-family:var(--mono);font-size:0.75rem;line-height:1.85;
  border:none;outline:none;background:transparent;color:var(--text);
  resize:none;tab-size:2;
  min-height:360px;
}
.lc-textarea::placeholder{color:var(--text4)}
.lc-textarea::-webkit-scrollbar{width:3px}
.lc-textarea::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* 출력 (오른쪽) */
.lc-out-wrap{
  background:var(--bg);
  display:flex;flex-direction:column;
  min-width:0;
  border-left:none;
}
.lc-out-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.35rem 0.75rem;background:var(--surface);border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.lc-selcount{font-size:0.65rem;font-family:var(--mono);color:#4F8EF7;font-weight:600}

/* 에디터 로우 */
#lc-editor{background:var(--bg)}
.lc-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border);min-height:24px}
.lc-row:last-child{border-bottom:none}
.lc-row:hover{background:rgba(255,255,255,.017)}
.lc-row.lc-sel{background:rgba(79,142,247,.07)}
.lc-row.lc-sel:hover{background:rgba(79,142,247,.1)}
.lc-rcheck{width:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);cursor:pointer}
.lc-rcheck:hover{background:rgba(255,255,255,.04)}
.lc-rcheck input{pointer-events:none;width:10px;height:10px;accent-color:#4F8EF7}
.lc-rnum{width:24px;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;padding-right:3px;font-family:var(--mono);font-size:0.6rem;color:var(--text3);border-right:1px solid var(--border);background:var(--surface);user-select:none}
.lc-rcls{width:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)}
.lc-tag{font-size:0.55rem;font-weight:700;padding:1px 3px;border-radius:3px;letter-spacing:.04em;user-select:none}
.lc-t-en{background:rgba(91,163,245,0.12);color:#5BA3F5;border:1px solid rgba(91,163,245,0.3)}
.lc-t-jp{background:rgba(240,122,90,0.12);color:#F07A5A;border:1px solid rgba(240,122,90,0.3)}
.lc-t-ko{background:rgba(77,200,154,0.12);color:#4DC89A;border:1px solid rgba(77,200,154,0.3)}
.lc-t-pn{background:rgba(155,143,232,0.12);color:#9B8FE8;border:1px solid rgba(155,143,232,0.3)}
.lc-t-sp{background:var(--surface2);color:var(--text3);border:1px solid var(--border2)}
.lc-t-raw{background:var(--surface2);color:var(--text3);border:1px solid var(--border2)}
.lc-rtext{flex:1;display:block;padding:0.3rem 0.6rem;font-size:0.72rem;line-height:1.65;font-family:var(--mono);word-break:keep-all;overflow-wrap:break-word;color:var(--text);min-width:0;cursor:default}
.lc-rtext.lc-sp-row{display:flex;align-items:center;color:var(--text3);font-size:0.62rem;letter-spacing:.06em}

#lc-editor{flex:1;overflow-y:auto}
#lc-code-out{
  flex:1;overflow-y:auto;
  padding:0.75rem 0.9rem;font-family:var(--mono);font-size:0.72rem;
  line-height:1.8;background:var(--bg);color:var(--text);
  white-space:pre;overflow-x:auto;word-break:break-all;
}
#lc-preview-out{flex:1;overflow-y:auto;padding:1rem 1.1rem;font-size:0.88rem;line-height:2.1}
.lc-empty{padding:2.5rem 1rem;text-align:center;color:var(--text3);font-family:var(--mono);font-size:0.72rem;line-height:2}

/* 가사 변환기 미리보기 내 줄 스타일 */
#lc-preview-out .en{color:#5BA3F5;font-style:italic;font-family:var(--mono);font-size:0.8rem}
#lc-preview-out .jp{color:#F07A5A;font-family:var(--mono);font-size:0.8rem}
#lc-preview-out .ko{color:var(--text);font-family:var(--serif);font-size:0.9rem}
#lc-preview-out .pn{color:#9B8FE8;font-family:var(--mono);font-size:0.75rem;opacity:0.9}
#lc-preview-out .sp{display:block;height:0.9rem}
#lc-preview-out .sp2{display:block;height:1.6rem;border-top:1px solid var(--border);margin:0.3rem 0}

/* 클래스바 */
.lc-classbar{
  display:flex;align-items:center;flex-wrap:wrap;gap:0.25rem;
  padding:0.45rem 0.75rem;border-top:1px solid var(--border);background:var(--surface);
}
.lc-ctag{
  padding:0.12rem 0.5rem;font-size:0.65rem;font-weight:700;border-radius:var(--r4);
  border:1px solid transparent;cursor:pointer;font-family:var(--mono);letter-spacing:.02em;
  transition:opacity 0.1s,transform 0.1s;
}
.lc-ctag:active{transform:scale(.93)}
.lc-ctag:hover{opacity:.8}
.lc-ct-en{background:rgba(91,163,245,0.12);color:#5BA3F5;border-color:rgba(91,163,245,0.3)}
.lc-ct-jp{background:rgba(240,122,90,0.12);color:#F07A5A;border-color:rgba(240,122,90,0.3)}
.lc-ct-ko{background:rgba(77,200,154,0.12);color:#4DC89A;border-color:rgba(77,200,154,0.3)}
.lc-ct-pn{background:rgba(155,143,232,0.12);color:#9B8FE8;border-color:rgba(155,143,232,0.3)}
.lc-ct-sp{background:var(--surface2);color:var(--text2);border-color:var(--border2)}
.lc-ct-del{background:rgba(176,64,64,0.1);color:var(--red);border-color:rgba(176,64,64,0.25)}
.lc-addbtn{
  padding:0.12rem 0.4rem;font-size:0.62rem;font-weight:600;font-family:var(--mono);
  border:1px solid var(--border2);border-radius:var(--r4);
  background:var(--surface2);color:var(--text3);cursor:pointer;transition:all 0.1s;
}
.lc-addbtn:hover{background:var(--surface3);color:var(--text2)}
.lc-addbtn-sp2{color:#6B7490!important;border-color:var(--border2)!important}

/* 푸터 */
.lc-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.4rem 0.75rem;border-top:1px solid var(--border);background:var(--surface);
}
.lc-fst{font-size:0.65rem;font-family:var(--mono);color:var(--text3)}
.lc-fst b{color:var(--text2);font-weight:500}

/* 모바일 */
@media(max-width:768px){
  .lc-sticky{top:0}
  .lc-topbar{flex-wrap:wrap;gap:0.4rem}
  .lc-subbar{gap:0.2rem}
  #lc-preview-out{padding:0.75rem 0.9rem}
  .lc-tabs{flex-wrap:nowrap}
  .lc-tab{padding:0.15rem 0.45rem;font-size:0.62rem}
  /* 모바일: 1열 세로 */
  .lc-body{grid-template-columns:1fr}
  .lc-section{border-right:none;border-bottom:1px solid var(--border)}
  .lc-textarea{min-height:180px;resize:vertical}
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:768px){
  :root{--sidebar:280px;--topbar:44px}
  #sidebar{transform:translateX(calc(-100% - 1px))}
  #sidebar.open{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,0.6)}
  #main{margin-left:0}
  #topbar{display:flex}
  .ib,.tb-theme-toggle{width:30px;height:30px;border-radius:var(--r6)}
  .tb-title{font-size:0.92rem}
  #v-list,#v-editor,#v-photo{padding:0 1.25rem;max-width:100%}
  #v-post{padding:0;max-width:100%}
  #v-post .back-btn{margin-top:1rem;margin-bottom:1rem;margin-left:1.25rem}
  #post-body{padding:0 1.25rem 2rem}
  .post-admin-bar{padding-bottom:2.75rem;margin-top:3rem;padding-left:1.25rem;padding-right:1.25rem}
  .ph{padding-top:1.8rem;margin-bottom:1.6rem}
  .ph-title{font-size:1.6rem}
  .post-title-full{font-size:1.8rem}
  .pc{grid-template-columns:1fr;gap:0.6rem}
  .pc-right{flex-direction:row;align-items:center;justify-content:space-between;min-width:0}
  .ed-hd{
    flex-direction:row;align-items:center;flex-wrap:wrap;
    padding-top:0.8rem;padding-bottom:0.8rem;
  }
  .ed-actions{flex-wrap:wrap;gap:0.3rem}
  .ed-actions .btn{padding:0.4rem 0.7rem;font-size:0.74rem}
  .ed-meta{flex-direction:column}
  .ed-area{min-height:50vh}
  .ed-toolbar{top:0}
  #ed-toolbar-wrap{top:0;margin:0.8rem -1.25rem 0;padding:0 1.25rem}
  #v-editor{padding:0 1rem 5rem}
  .login-form{padding:1.5rem}
  #toast{bottom:1rem;right:1rem;left:1rem;max-width:none}
  #search-modal{padding:3rem 0.75rem 1rem}
  .search-hint{display:none}
  #search-results{max-height:55vh}
  #lb-prev{left:0.4rem}
  #lb-next{right:0.4rem}
  .lb-arrow{width:34px;height:34px}
  #lb-thumbs{display:none}
  /* 가사번역: 모바일에선 데스크탑 view 숨기고 모바일 view 표시 */
  #v-lyrics{display:none!important}
  #v-lyrics-mob{display:none}
  #v-lyrics-mob.active{display:flex}
  /* 앨범번역: 모바일에선 데스크탑 view 숨기고 모바일 view 표시 */
  #v-album{display:none!important}
  #v-album-mob{display:none}
  #v-album-mob.active{display:flex}
  /* 사진 그리드: 모바일 */
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  #v-photo{padding:0}
  .photo-header{padding:1.8rem 1.25rem 0}
  /* 가사 컨트롤 — 모바일 */
  .lyrics-controls{gap:0.35rem;padding:0.5rem 0.7rem}
  .lc-toggle,.lc-layout-btn{font-size:0.64rem;padding:0.25rem 0.5rem}
  /* 모바일 컨트롤 바 패딩 */
  .lyrics-controls{padding-left:1rem;padding-right:1rem}
  .acc-content .lyrics-controls{
    margin-left:-0.5rem;margin-right:-0.5rem;
    padding-left:0.5rem;padding-right:0.5rem;
  }
  .albacc-trk-ctrl-slot .lyrics-controls{
    margin-left:0;margin-right:0;
    padding-left:1rem;padding-right:1rem;
  }
  /* 가로 모드 — 모바일: 폰트 조정 */
  .lyrics-wide-row .w-orig{font-size:0.82rem}
  .lyrics-wide-row .w-pn{font-size:0.72rem}
  .lyrics-wide-row .w-ko{font-size:0.75rem}
  .lyrics-wide-header{font-size:0.55rem}
  /* 요약/썸네일 섹션 — 모바일 */
  .ed-list-row{flex-direction:column}
  .ed-thumb-wrap{width:100%}
  .ed-thumb-picker{width:100%;height:80px}
  /* 앨범 포스트 트랙 아코디언 — 모바일: 더 넓게 */
  #post-album-accordion{margin:0 -0.5rem}
  #post-album-accordion .acc-head{padding:0.8rem 0.85rem;gap:0.6rem}
}
@media(min-width:769px){
  /* 데스크탑: 모바일 lyrics/album view 완전 숨김 */
  #v-lyrics-mob{display:none!important}
  #v-album-mob{display:none!important}
}
@media(max-width:480px){
  .ph-title{font-size:1.4rem}
  .post-title-full{font-size:1.5rem}
  .ed-title-input{font-size:1.35rem}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .ed-area{min-height:50vh}
}
@media(min-width:1400px){
  #v-list{max-width:1000px}
  #v-post{max-width:820px}
  #v-editor{max-width:1020px}
  #lyrics-list-panel{width:400px;max-width:560px}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  #v-editor{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}
  .ed-area{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media print{
  #sidebar,#topbar,.back-btn,.post-admin-bar{display:none!important}
  #main{margin-left:0}
  body{background:#fff;color:#000}
}

/* ══════════════════════════════════════════
   SETTINGS VIEW
══════════════════════════════════════════ */

/*
  #v-settings.view.active inherits from style.css:
    display:flex; flex-direction:column; overflow-y:auto; min-height:0;
  .set-wrap is a plain block child — it grows to natural height,
  letting the flex parent scroll it without any flex-sizing issues.
*/

.set-wrap{
  width:100%;
  max-width:660px;
  margin:0 auto;
  padding:2.5rem 2rem 5rem;
}

/* ── Page header ── */
.set-pg-hd{margin-bottom:1.75rem}
.set-pg-title{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;
  letter-spacing:-0.03em;color:var(--text);margin-bottom:0.3rem;
}
.set-pg-sub{font-size:0.74rem;color:var(--text3);font-family:var(--mono)}

/* ── Card ── */
.set-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r12);
  overflow:hidden;
  margin-bottom:0.875rem;
  transition:border-color 0.28s var(--ease-soft),box-shadow 0.28s var(--ease-soft);
}
.set-card:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)}
.set-card--dim{opacity:0.75}

/* ── Card header ── */
.set-card-hd{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.95rem 1.2rem;
  border-bottom:1px solid var(--border);
}
.set-icon{
  width:26px;height:26px;border-radius:var(--r6);
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--text3);
}
.set-card-name{font-size:0.83rem;font-weight:600;color:var(--text);letter-spacing:-0.01em;margin-bottom:0.1rem}
.set-card-desc{font-size:0.7rem;color:var(--text3)}

/* ── Card body ── */
.set-body{padding:0 1.2rem}

/* ── Full-width field (label above input) ── */
.set-field{padding:1rem 0 0.125rem;display:flex;flex-direction:column;gap:0.35rem}
.set-field+.set-field{border-top:1px solid var(--border)}
.set-lbl{font-size:0.62rem;font-family:var(--mono);color:var(--text3);letter-spacing:0.07em;text-transform:uppercase}
.set-input{
  width:100%;padding:0.5rem 0.7rem;
  border:1px solid var(--border2);border-radius:var(--r6);
  background:var(--bg);color:var(--text);font-size:0.875rem;
  font-family:var(--sans);outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.set-input:focus{border-color:var(--gold3);box-shadow:0 0 0 3px var(--gold-glow)}
.set-field:last-child{padding-bottom:1rem}

/* ── Inline row (label-left + control-right) ── */
.set-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:0.875rem 0;
}
.set-row-text{min-width:0;flex:1}
.set-row-name{font-size:0.83rem;color:var(--text);margin-bottom:0.15rem}
.set-row-hint{font-size:0.69rem;color:var(--text3);line-height:1.5}

/* ── Row divider ── */
.set-divider{height:1px;background:var(--border);margin:0}

/* ── Stepper ── */
.set-stepper{
  display:flex;align-items:center;flex-shrink:0;
  border:1px solid var(--border2);border-radius:var(--r6);
  overflow:hidden;background:var(--bg);
}
.set-step-btn{
  width:30px;height:30px;border:none;background:var(--surface2);
  color:var(--text2);font-size:1rem;cursor:pointer;flex-shrink:0;
  transition:background 0.22s var(--ease-soft),color 0.22s var(--ease-soft);
}
.set-step-btn:hover{background:var(--border2);color:var(--text)}
.set-step-btn:active{background:var(--border3)}
.set-step-val{
  width:46px;text-align:center;border:none;background:transparent;
  color:var(--text);font-size:0.85rem;font-family:var(--mono);
  outline:none;-moz-appearance:textfield;padding:0;
}
.set-step-val::-webkit-outer-spin-button,
.set-step-val::-webkit-inner-spin-button{-webkit-appearance:none}

/* ── Select ── */
.set-select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding:0.42rem 2.1rem 0.42rem 0.7rem;
  border:1px solid var(--border2);border-radius:var(--r6);
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8580' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:10px;
  color:var(--text);font-size:0.83rem;font-family:var(--sans);
  cursor:pointer;outline:none;flex-shrink:0;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.set-select:focus{border-color:var(--gold3);box-shadow:0 0 0 3px var(--gold-glow)}
[data-theme="light"] .set-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23706860' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Toggle switch ── */
.set-toggle{
  position:relative;width:38px;height:22px;flex-shrink:0;cursor:pointer;
  display:inline-block;
}
.set-toggle input{position:absolute;opacity:0;width:0;height:0}
.set-toggle-track{
  position:absolute;inset:0;
  background:var(--border2);border-radius:99px;
  transition:background 0.3s var(--ease-soft);
}
.set-toggle-track::after{
  content:'';position:absolute;
  left:3px;top:3px;width:16px;height:16px;
  background:var(--text3);border-radius:50%;
  transition:transform 0.35s var(--ease-spring),background 0.3s var(--ease-soft),box-shadow 0.3s var(--ease-soft);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.set-toggle:hover .set-toggle-track{background:var(--border3)}
.set-toggle input:checked+.set-toggle-track{background:var(--gold3)}
.set-toggle input:checked+.set-toggle-track::after{
  transform:translateX(16px);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.set-toggle:active .set-toggle-track::after{width:20px;border-radius:99px}
.set-toggle input:checked:active+.set-toggle-track::after{transform:translateX(12px)}

/* ── Notice box ── */
.set-notice{
  display:flex;align-items:flex-start;gap:0.5rem;
  padding:0.9rem 0;
  font-size:0.74rem;color:var(--text3);line-height:1.65;
}
.set-code{
  font-family:var(--mono);font-size:0.69rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:3px;padding:0.08rem 0.32rem;color:var(--gold);
}

/* ── KV info rows (server info) ── */
.set-kv{
  display:flex;align-items:center;gap:0.75rem;
  font-size:0.74rem;padding:0.85rem 0;
}
.set-kv+.set-kv{border-top:1px solid var(--border)}
.set-kv-key{font-family:var(--mono);color:var(--text3);min-width:110px;flex-shrink:0}
.set-kv-val{color:var(--text2)}

/* ── Card footer ── */
.set-foot{
  padding:0.7rem 1.2rem;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;
  background:var(--surface2);
}

/* ── Small button ── */
.btn.sm{padding:0.32rem 0.85rem;font-size:0.77rem}

/* ── Responsive ── */
@media(max-width:860px){
  .set-wrap{padding:2rem 1.5rem 4rem}
}
@media(max-width:600px){
  .set-wrap{padding:1.25rem 1rem 4rem}
  .set-card-hd{padding:0.85rem 1rem}
  .set-body{padding:0 1rem}
  .set-foot{padding:0.65rem 1rem}
  .set-row{gap:1rem}
}
@media(max-width:400px){
  .set-row{flex-direction:column;align-items:flex-start;gap:0.5rem}
  .set-select,.set-stepper{align-self:flex-start}
}