/* ══════════════════════════════════════════
   RESET & ROOT
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#060606;
  --bg2:#0a0a0a;
  --surface:#0f0f0f;
  --surface2:#141414;
  --surface3:#1a1a1a;
  --border:#1a1a1a;
  --border2:#252525;
  --border3:#333;
  --text:#f0ece4;
  --text2:#8a8580;
  --text3:#484440;
  --text4:#2a2826;
  --gold:#d4b074;
  --gold2:#b08848;
  --gold3:#856430;
  --gold-glow:rgba(212,176,116,0.08);
  --red:#c04848;
  --serif:'Noto Serif KR',Georgia,'Times New Roman',serif;
  --sans:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  --mono:'DM Mono','Courier New',monospace;
  --r4:4px;--r6:6px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0,0,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-soft:cubic-bezier(0.22,1,0.36,1);
  --ease-emph:cubic-bezier(0.32,0.72,0,1);
  --dur-fast:0.15s;
  --dur-base:0.22s;
  --dur-slow:0.42s;
  --sidebar:260px;
  --topbar:50px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 6px 20px -4px rgba(0,0,0,0.45);
  --shadow-lg:0 16px 48px -8px rgba(0,0,0,0.55);
  --shadow-xl:0 28px 84px -12px rgba(0,0,0,0.65);
  --gold-rail:linear-gradient(180deg,var(--gold2),var(--gold) 45%,var(--gold2));
}
[data-theme="light"]{
  --bg:#faf9f7;
  --bg2:#f2f1ef;
  --surface:#fff;
  --surface2:#f6f5f3;
  --surface3:#edece9;
  --border:#e8e5e0;
  --border2:#d8d4ce;
  --border3:#c8c4bc;
  --text:#18160f;
  --text2:#706860;
  --text3:#a09890;
  --text4:#c8c4bc;
  --gold:#9a7530;
  --gold2:#7a5a20;
  --gold3:#c4a868;
  --gold-glow:rgba(154,117,48,0.07);
  --red:#c04040;
  --shadow-sm:0 1px 2px rgba(20,16,8,0.05);
  --shadow-md:0 6px 20px -4px rgba(20,16,8,0.10);
  --shadow-lg:0 16px 48px -8px rgba(20,16,8,0.13);
  --shadow-xl:0 28px 84px -12px rgba(20,16,8,0.16);
}
/* ── light theme component overrides ── */
[data-theme="light"] body::before{opacity:0}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--border2)}
[data-theme="light"] ::selection{background:rgba(154,117,48,0.25);color:var(--text)}
/* sticky / frosted-glass backgrounds */
[data-theme="light"] #topbar{background:rgba(250,249,247,0.88)}
[data-theme="light"] .lyrics-list-header{background:rgba(242,241,239,0.95)}
[data-theme="light"] .lyrics-controls{background:rgba(242,241,239,0.94)}
[data-theme="light"] #ed-toolbar-wrap{background:rgba(250,249,247,0.96)}
[data-theme="light"] .lc-sticky{background:rgba(250,249,247,0.96)}
[data-theme="light"] #at-edit-header{background:rgba(250,249,247,0.96)}
/* overlays & modals */
[data-theme="light"] #overlay{background:rgba(0,0,0,0.25)}
[data-theme="light"] #search-modal.open #search-backdrop{background:rgba(0,0,0,0.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-theme="light"] #search-panel{box-shadow:0 24px 80px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.08)}
[data-theme="light"] #ctx-menu{box-shadow:0 16px 48px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.08)}
[data-theme="light"] #lightbox.open{background:rgba(255,255,255,0.97)}
[data-theme="light"] #lb-topbar{background:linear-gradient(to bottom,rgba(255,255,255,0.75),transparent)}
[data-theme="light"] #lb-bottombar{background:linear-gradient(to top,rgba(255,255,255,0.75),transparent)}
/* hover states — use dark alpha instead of white alpha */
[data-theme="light"] .s-item:hover{background:rgba(0,0,0,0.04)}
[data-theme="light"] .s-section-toggle:hover{background:rgba(0,0,0,0.04)}
[data-theme="light"] .lc:hover{background:rgba(0,0,0,0.03)}
[data-theme="light"] .pc:hover{background:rgba(0,0,0,0.02)}
[data-theme="light"] .acc-head:active{background:rgba(0,0,0,0.03)}
/* shadows — lighter for light mode */
[data-theme="light"] .yt-player-wrap{box-shadow:0 4px 16px rgba(0,0,0,0.1)}
[data-theme="light"] .thumb-gallery{box-shadow:0 8px 32px rgba(0,0,0,0.1)}
[data-theme="light"] .ed-thumb-clear{background:rgba(0,0,0,0.5)}
[data-theme="light"] #sidebar.open{box-shadow:0 0 60px rgba(0,0,0,0.12)}
/* sidebar border glow */
[data-theme="light"] #sidebar::after{background:linear-gradient(to bottom,transparent,var(--border) 20%,var(--border) 80%,transparent)}
/* blockquote */
[data-theme="light"] .post-body blockquote{background:linear-gradient(135deg,var(--surface2),var(--bg2))}
/* code blocks */
[data-theme="light"] .post-body code{background:var(--surface2);color:var(--gold2)}
/* select dropdown arrow — lighter stroke for light bg */
[data-theme="light"] 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='%239e9890' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")}
/* image overlays on photo cards */
[data-theme="light"] .photo-card::after{background:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 50%)}
/* editor image drag hint */
[data-theme="light"] .img-thumb-wrap .drag-hint{background:rgba(0,0,0,0.45)}
[data-theme="light"] .img-editor-overlay{background:rgba(255,255,255,0.9)}
[data-theme="light"] .tip-popup{
  background:linear-gradient(180deg,#fff,var(--surface2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 1px 2px rgba(20,16,8,0.06),
    0 8px 24px rgba(20,16,8,0.10),
    0 22px 56px rgba(20,16,8,0.14),
    0 0 0 1px rgba(154,117,48,0.05);
}
[data-theme="light"] .tip-popup.arrow-bottom::after{border-top-color:#fff}
[data-theme="light"] .tip-popup.arrow-top::after{border-bottom-color:#fff}
[data-theme="light"] .tip-picker{box-shadow:0 12px 40px rgba(0,0,0,0.12)}
[data-theme="light"] .img-editor-crop-rect{box-shadow:0 0 0 9999px rgba(255,255,255,0.6)}
/* thumbnail "selected" label */
[data-theme="light"] .img-thumb-wrap.is-thumb-sel::after{background:rgba(0,0,0,0.45)}
/* buttons — ensure primary contrast */
[data-theme="light"] .btn.primary{background:var(--gold);border-color:var(--gold);color:#fff}
[data-theme="light"] .btn.primary:hover{background:var(--gold2);border-color:var(--gold2)}
/* toast */
[data-theme="light"] #toast{box-shadow:0 4px 16px rgba(0,0,0,0.08)}
/* login form */
[data-theme="light"] .login-form{box-shadow:0 4px 20px rgba(0,0,0,0.06)}
/* lyrics panel sticky header inner glow removal */
[data-theme="light"] .yt-player-wrap{background:var(--surface2)}
/* lb arrows */
/* lb light overrides moved after base lb styles */
/* theme toggle button */
.s-theme-toggle{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text3);cursor:pointer;
  border-radius:var(--r6);
  transition:color 0.25s var(--ease-soft),background 0.25s var(--ease-soft),transform 0.45s var(--ease-spring);
  flex-shrink:0;
}
.s-theme-toggle:hover{color:var(--gold);background:rgba(255,255,255,0.05);transform:rotate(20deg)}
[data-theme="light"] .s-theme-toggle:hover{background:rgba(0,0,0,0.05)}
.s-theme-toggle:active{transform:rotate(0deg) scale(0.92)}
.s-theme-toggle svg{width:14px;height:14px}
.s-top-controls{display:flex;align-items:center;gap:0.3rem;flex-shrink:0}
/* Lossless 토글 — 회전 호버 효과는 빼고(테마와 구분), 활성 시 gold 강조 */
.s-theme-toggle.lossless-toggle:hover{transform:none}
.s-theme-toggle.lossless-toggle:active{transform:scale(0.92)}
.s-theme-toggle.lossless-toggle.active,
.tb-theme-toggle.lossless-toggle.active{color:var(--gold);border-color:var(--gold3)}
.s-theme-toggle.lossless-toggle.active{background:var(--gold-glow)}
.tb-theme-toggle{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:var(--r8);background:none;color:var(--text2);
  cursor:pointer;transition:color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.45s var(--ease-spring);
}
.tb-theme-toggle:hover{color:var(--gold);border-color:var(--gold3);background:var(--gold-glow);transform:rotate(20deg)}
.tb-theme-toggle:active{transform:rotate(0deg) scale(0.92)}
.tb-theme-toggle.lossless-toggle:hover{transform:none}
.tb-theme-toggle.lossless-toggle:active{transform:scale(0.92)}
.tb-theme-toggle.lossless-toggle.active{background:var(--gold-glow)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.75;height:100dvh;overflow:hidden;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font-family:inherit}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px;border:1.5px solid transparent;background-clip:padding-box;transition:background 0.2s}
::-webkit-scrollbar-thumb:hover{background:var(--text3);background-clip:padding-box}
::selection{background:rgba(212,176,116,0.3);color:var(--text)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;will-change:auto;
}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
#app{display:flex;height:100dvh;overflow:hidden}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
#sidebar{
  width:var(--sidebar);flex-shrink:0;position:fixed;top:0;left:0;bottom:0;z-index:200;
  background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform 0.35s var(--ease), width 0.25s var(--ease);will-change:transform,width;
}
#sidebar::after{
  content:'';position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(to bottom,transparent,var(--border2) 15%,var(--border2) 85%,transparent);
  pointer-events:none;
}
.s-top{padding:1.8rem 1.5rem 1.3rem;flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between}
.s-logo{
  display:block;font-family:var(--serif);font-size:1.4rem;font-weight:600;
  color:var(--text);letter-spacing:-0.04em;line-height:1;
  cursor:pointer;border:none;background:none;text-align:left;padding:0;
  transition:color 0.25s var(--ease);position:relative;
}
.s-logo::before{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:1.5px;background:linear-gradient(to right,var(--gold),var(--gold2));
  transition:width 0.45s var(--ease-soft);
  box-shadow:0 0 6px rgba(212,176,116,0.25);
}
.s-logo:hover::before{width:100%}
.s-logo-sub{display:block;font-family:var(--mono);font-size:0.62rem;font-weight:300;color:var(--text3);letter-spacing:0.12em;margin-top:0.5rem;opacity:0.7}
.s-divider{height:1px;background:linear-gradient(to right,transparent,var(--border),transparent);flex-shrink:0}
.s-nav-sep{height:1px;margin:0.65rem 1.1rem 0.5rem;background:linear-gradient(to right,transparent,var(--border),transparent);flex-shrink:0}
.s-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:0.5rem 0}
.s-nav::-webkit-scrollbar{display:none}
.s-section{padding:0.9rem 1.5rem 0.35rem;font-size:0.58rem;font-family:var(--mono);color:var(--text4);letter-spacing:0.16em;text-transform:uppercase;margin-top:0.15rem}
.s-section-toggle{
  display:flex;align-items:center;justify-content:flex-start;gap:0.3rem;
  width:100%;border:none;background:none;cursor:pointer;text-align:left;
  padding:0.5rem 1.5rem;margin-top:0.5rem;
  font-family:var(--sans);font-size:0.74rem;font-weight:400;line-height:1;
  color:var(--text2);letter-spacing:-0.01em;text-transform:none;
  transition:color 0.22s var(--ease-soft),background 0.22s var(--ease-soft);
}
.s-section-toggle:hover{color:var(--text);background:rgba(255,255,255,0.025)}
.s-section-icon{
  width:10px;height:10px;flex-shrink:0;opacity:0.7;color:currentColor;
  display:block;margin-right:0.1rem;
  transition:opacity 0.2s var(--ease-soft);
}
.s-section-toggle:hover .s-section-icon{opacity:1}
.s-section-toggle .s-section-lbl{flex:0 0 auto;min-width:0;line-height:1}
.s-section-chev{
  width:9px;height:9px;flex-shrink:0;opacity:0.6;color:currentColor;
  display:block;
  transition:transform 0.3s var(--ease-soft),opacity 0.2s var(--ease-soft);
}
.s-section-toggle:hover .s-section-chev{opacity:0.9}
.s-section-toggle.collapsed .s-section-chev{transform:rotate(-90deg)}
.s-item{
  display:flex;align-items:center;gap:0.6rem;padding:0.5rem 1.5rem;
  color:var(--text2);cursor:pointer;font-size:0.82rem;font-weight:400;
  border:none;background:none;width:100%;text-align:left;
  transition:color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),padding 0.22s var(--ease-soft);position:relative;white-space:nowrap;letter-spacing:-0.01em;
}
.s-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:0;background:var(--gold-rail);border-radius:0 2px 2px 0;
  transition:height 0.32s var(--ease-spring);
  box-shadow:0 0 8px rgba(212,176,116,0.25);
}
.s-item:hover{color:var(--text);background:rgba(255,255,255,0.025)}
.s-item.active{color:var(--gold);background:var(--gold-glow)}
.s-item.active::before{height:18px}
.s-icon{width:16px;height:16px;flex-shrink:0;opacity:0.75;transition:opacity 0.22s var(--ease-soft),transform 0.22s var(--ease-soft)}
.s-item.active .s-icon{opacity:1}
.s-item:hover .s-icon{opacity:0.95;transform:translateX(1px)}
.s-tags{
  padding:0.3rem 1.2rem 0.8rem;display:flex;flex-wrap:wrap;gap:0.3rem;
  max-height:13rem;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--border3) transparent;
}
.s-tags::-webkit-scrollbar{width:4px}
.s-tags::-webkit-scrollbar-track{background:transparent}
.s-tags::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px;border:none;background-clip:padding-box}
.s-tags::-webkit-scrollbar-thumb:hover{background:var(--border3)}
.s-tags.collapsed{display:none}
.s-tag{
  display:inline-flex;align-items:center;gap:0.35rem;
  font-size:0.66rem;font-family:var(--mono);padding:0.2rem 0.5rem 0.2rem 0.55rem;border-radius:99px;
  border:1px solid var(--border2);color:var(--text3);cursor:pointer;
  transition:border-color 0.22s var(--ease-soft),color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  background:none;letter-spacing:0.02em;
}
.s-tag-lbl{line-height:1}
.s-tag-count{
  font-size:0.6rem;color:var(--text2);font-variant-numeric:tabular-nums;opacity:0.7;
  line-height:1;
  transition:color 0.22s var(--ease-soft),opacity 0.22s var(--ease-soft);
}
.s-tag:hover .s-tag-count{opacity:1}
.s-tag:hover{border-color:var(--gold3);color:var(--gold);background:var(--gold-glow);transform:translateY(-1px)}
.s-tag:hover .s-tag-count{color:var(--gold2)}
.s-tag:active{transform:translateY(0)}
.s-tag.active{border-color:var(--gold2);color:var(--gold);background:var(--gold-glow);box-shadow:0 0 0 1px var(--gold-glow)}
.s-tag.active .s-tag-count{color:var(--gold2)}
.s-foot{flex-shrink:0;border-top:1px solid var(--border);padding:0.7rem 0}
.s-foot-login{
  padding:0.5rem 1.5rem;font-size:0.7rem;font-family:var(--mono);
  color:var(--text4);cursor:pointer;letter-spacing:0.05em;
  transition:color 0.18s;border:none;background:none;width:100%;text-align:left;
}
.s-foot-login:hover{color:var(--text3)}

/* ── 사이드바 축소 (아이콘 전용) ── */
.sidebar-compact{--sidebar:54px}
.sidebar-compact #sidebar{width:54px}
.sidebar-compact #sidebar .s-top{padding:1.2rem 0 1rem;justify-content:center}
.s-logo-img{display:none}
.sidebar-compact #sidebar .s-logo{font-size:0;overflow:hidden;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.sidebar-compact #sidebar .s-logo-img{display:block;height:22px;width:auto;object-fit:contain}
.sidebar-compact #sidebar .s-logo-sub,
.sidebar-compact #sidebar .s-theme-toggle,
.sidebar-compact #sidebar .s-section,
.sidebar-compact #sidebar .s-tags{display:none}
.sidebar-compact #sidebar .s-item{
  padding:0.6rem 0;justify-content:center;gap:0;
  font-size:0;color:transparent;position:relative;
}
.sidebar-compact #sidebar .s-item.active{color:transparent;background:var(--gold-glow)}
.sidebar-compact #sidebar .s-icon{width:16px;height:16px;opacity:0.7;color:var(--text2)}
.sidebar-compact #sidebar .s-item.active .s-icon{opacity:1;color:var(--gold)}
.sidebar-compact #sidebar .s-item:hover .s-icon{opacity:1;color:var(--text)}
/* 호버 시 툴팁 */
.sidebar-compact #sidebar .s-item::after{
  content:attr(data-label);position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(-4px);
  background:var(--surface);border:1px solid var(--border2);color:var(--text);
  font-size:0.72rem;padding:0.3rem 0.65rem;border-radius:var(--r6);
  white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity 0.2s var(--ease-soft),transform 0.2s var(--ease-soft);
  margin-left:8px;z-index:300;box-shadow:var(--shadow-md);
  font-family:var(--sans);letter-spacing:0;
}
.sidebar-compact #sidebar .s-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.sidebar-compact #sidebar .s-foot-login{font-size:0;padding:0.6rem 0;text-align:center}
.sidebar-compact #sidebar .s-foot-login::after{content:'···';font-size:0.7rem;color:var(--text4)}
.sidebar-compact #sidebar .s-divider{margin:0 0.6rem}
.sidebar-compact #sidebar .s-nav-sep{margin:0.5rem 0.6rem}

/* ══════════════════════════════════════════
   MAIN
══════════════════════════════════════════ */
#main{margin-left:var(--sidebar);flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:margin-left 0.25s var(--ease)}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
#topbar{
  display:none;align-items:center;justify-content:space-between;
  padding:0 1rem;height:var(--topbar);border-bottom:1px solid var(--border);
  position:sticky;top:0;
  background:rgba(6,6,6,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:100;flex-shrink:0;
}
.tb-title{font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:-0.03em}
.ib{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border2);border-radius:var(--r8);background:none;color:var(--text2);
  cursor:pointer;transition:color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.18s var(--ease-soft);
}
.ib:hover{color:var(--text);border-color:var(--border3);background:var(--surface)}
.ib:active{transform:scale(0.94)}
.ib.gold{border-color:var(--gold3);color:var(--gold)}
.ib.gold:hover{background:var(--gold-glow);border-color:var(--gold2)}

/* ══════════════════════════════════════════
   VIEWS
══════════════════════════════════════════ */
.view{display:none;flex:1;animation:fadeIn 0.45s var(--ease-soft)}
.view.active{display:flex;flex-direction:column;overflow-y:auto;min-height:0;scrollbar-gutter:stable}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════════
   LIST VIEW
══════════════════════════════════════════ */
#v-list{padding:2.8rem 3.5rem;max-width:900px}
.ph{margin-bottom:2.5rem}
.ph-title{font-family:var(--serif);font-size:2rem;font-weight:500;letter-spacing:-0.04em;color:var(--text);line-height:1.15;margin-bottom:0.45rem}
.ph-meta{font-size:0.7rem;font-family:var(--mono);color:var(--text3);letter-spacing:0.05em}
.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:0.75rem}
.sort-toggle{
  display:inline-flex;align-items:center;gap:0.35rem;
  padding:0.3rem 0.7rem;margin-bottom:0.2rem;
  border-radius:99px;border:1px solid var(--border);background:transparent;
  color:var(--text3);font-size:0.69rem;font-family:var(--mono);letter-spacing:0.04em;
  cursor:pointer;white-space:nowrap;flex-shrink:0;user-select:none;
  transition:color 0.25s var(--ease-soft),border-color 0.25s var(--ease-soft),background 0.25s var(--ease-soft),transform 0.25s var(--ease-soft);
}
.sort-toggle:hover{color:var(--text2);border-color:var(--border3);background:var(--surface2)}
.sort-toggle:active{transform:scale(0.96)}
.sort-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sort-toggle svg{width:11px;height:11px;flex-shrink:0;transition:transform 0.45s var(--ease-spring)}
.sort-toggle.oldest svg{transform:rotate(180deg)}
.posts{display:flex;flex-direction:column}
.pc{
  display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:start;
  padding:1.4rem 0.85rem;border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background 0.32s var(--ease-soft),transform 0.32s var(--ease-soft),border-color 0.32s var(--ease-soft);
  margin:0 -0.85rem;border-radius:var(--r8);position:relative;
  /* Skip layout/paint for off-screen cards. Big SI win on long lists. */
  content-visibility:auto;contain-intrinsic-size:auto 110px;
}
.pc::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:60%;background:var(--gold-rail);border-radius:0 2px 2px 0;
  transition:transform 0.4s var(--ease-spring);
  transform-origin:center;
}
.pc:first-child{border-top:1px solid var(--border)}
.pc:hover{background:rgba(255,255,255,0.018)}
.pc:hover::before{transform:translateY(-50%) scaleY(1)}
.pc:hover .pc-title{color:var(--gold)}
.pc:focus-visible{outline:none;background:rgba(255,255,255,0.022);box-shadow:inset 0 0 0 1px var(--border3)}
.pc-left{min-width:0}
.pc-title{font-family:var(--serif);font-size:1.06rem;font-weight:500;color:var(--text);letter-spacing:-0.02em;line-height:1.45;margin-bottom:0.3rem;transition:color 0.28s var(--ease-soft),transform 0.32s var(--ease-soft);transform-origin:left center}
.pc:hover .pc-title{transform:translateX(2px)}
.pc-excerpt{font-size:0.8rem;color:var(--text2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0.5rem;transition:color 0.28s var(--ease-soft)}
.pc:hover .pc-excerpt{color:var(--text)}
.pc-tags{display:flex;align-items:center;gap:0.45rem;flex-wrap:wrap}
.pc-cat{font-size:0.66rem;font-family:var(--mono);color:var(--gold);opacity:0.85;letter-spacing:0.02em}
.pc-tag{font-size:0.62rem;font-family:var(--mono);padding:0.12rem 0.5rem;border-radius:99px;border:1px solid var(--border2);color:var(--text3);transition:border-color 0.22s var(--ease-soft),color 0.22s var(--ease-soft),background 0.22s var(--ease-soft)}
.pc:hover .pc-tag{border-color:var(--border3);color:var(--text2)}
.pc-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.6rem;flex-shrink:0;min-width:72px}
.pc-date{font-size:0.66rem;font-family:var(--mono);color:var(--text3);white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:0.2rem;transition:color 0.22s var(--ease-soft)}
.pc:hover .pc-date{color:var(--text2)}
.pc-read-time{font-size:0.6rem;color:var(--text4);font-family:var(--mono)}
/* 리스트 썸네일 — 16:9 비율 고정 */
.pc-thumb-wrap{width:88px;height:62px;flex-shrink:0;overflow:hidden;border-radius:var(--r6);border:1px solid var(--border);transition:border-color 0.32s var(--ease-soft),box-shadow 0.32s var(--ease-soft)}
.pc:hover .pc-thumb-wrap{border-color:var(--border2);box-shadow:0 4px 12px -4px rgba(0,0,0,0.3)}
.pc-thumb{width:100%;height:100%;object-fit:cover;transition:transform 0.7s var(--ease-soft),filter 0.4s var(--ease-soft);will-change:transform}
.pc:hover .pc-thumb{transform:scale(1.08);filter:brightness(1.05)}
.empty{padding:5rem 0;text-align:center;color:var(--text3);font-family:var(--mono);font-size:0.78rem;letter-spacing:0.04em;animation:fadeIn 0.45s var(--ease-soft)}
.loading-spinner{display:flex;align-items:center;justify-content:center;padding:4rem;color:var(--text3);font-family:var(--mono);font-size:0.75rem;letter-spacing:0.08em;gap:0.8rem;opacity:0;animation:fadeInSpinner 0.4s var(--ease-soft) 0.2s forwards}
@keyframes fadeInSpinner{to{opacity:1}}
.spinner{width:18px;height:18px;border:1.5px solid var(--border2);border-top-color:var(--gold);border-right-color:var(--gold3);border-radius:50%;animation:spin 0.85s cubic-bezier(0.5,0.1,0.5,0.9) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* skeleton cards */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:start;padding:1.4rem 0.75rem;border-bottom:1px solid var(--border)}
.sk-card:first-child{border-top:1px solid var(--border)}
.sk-line{border-radius:3px;background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.sk-title{height:17px;width:72%;margin-bottom:0.45rem}
.sk-excerpt1{height:11px;width:95%;margin-bottom:0.3rem}
.sk-excerpt2{height:11px;width:60%}
.sk-tags{display:flex;gap:0.45rem;margin-top:0.55rem}
.sk-tag{height:16px;width:38px;border-radius:99px}
.sk-right{display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;flex-shrink:0;min-width:72px}
.sk-date{height:10px;width:52px}
.sk-thumb{width:88px;height:62px;border-radius:var(--r6)}
.sk-card:nth-child(2) .sk-title{width:58%}
.sk-card:nth-child(3) .sk-title{width:80%}
.sk-card:nth-child(4) .sk-title{width:65%}
.sk-card:nth-child(2) .sk-thumb{display:none}
.sk-card:nth-child(4) .sk-thumb{display:none}
.sk-card:nth-child(1) .sk-line{animation-delay:0s}
.sk-card:nth-child(2) .sk-line{animation-delay:0.1s}
.sk-card:nth-child(3) .sk-line{animation-delay:0.2s}
.sk-card:nth-child(4) .sk-line{animation-delay:0.3s}
.sk-card:nth-child(5) .sk-line{animation-delay:0.4s}
.pc{opacity:0;transform:translateY(10px);animation:slideUp 0.5s var(--ease-soft) forwards}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
.pc:nth-child(1){animation-delay:0.02s}.pc:nth-child(2){animation-delay:0.06s}
.pc:nth-child(3){animation-delay:0.10s}.pc:nth-child(4){animation-delay:0.14s}
.pc:nth-child(5){animation-delay:0.18s}.pc:nth-child(6){animation-delay:0.21s}
.pc:nth-child(n+7){animation-delay:0.24s}
.load-more-wrap{padding:2rem 0;text-align:center}

/* ══════════════════════════════════════════
   READING PROGRESS
══════════════════════════════════════════ */
#read-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(to right,var(--gold2),var(--gold));z-index:9999;
  transition:width 0.15s linear,opacity 0.3s var(--ease-soft);
  pointer-events:none;
  opacity:0;
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px rgba(212,176,116,0.4);
}
#read-progress.active{opacity:1}

/* ══════════════════════════════════════════
   POST VIEW
══════════════════════════════════════════ */
#v-post{padding:0;max-width:780px}
#post-body{padding:0 3.5rem 3rem}
.back-btn{
  display:inline-flex;align-items:center;gap:0.45rem;
  font-size:0.7rem;font-family:var(--mono);color:var(--text3);letter-spacing:0.05em;
  cursor:pointer;transition:color 0.25s var(--ease-soft);border:none;background:none;padding:0.3rem 0.5rem 0.3rem 0;margin-bottom:2.5rem;margin-top:2.8rem;margin-left:3rem;border-radius:var(--r4);
}
.back-btn:hover{color:var(--gold)}
.back-btn svg{width:13px;height:13px;transition:transform 0.32s var(--ease-soft)}
.back-btn:hover svg{transform:translateX(-4px)}
.back-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.post-title-full{font-family:var(--serif);font-size:2.2rem;font-weight:500;letter-spacing:-0.04em;line-height:1.22;margin-bottom:1.1rem;color:var(--text)}
.post-meta-full{
  display:flex;align-items:center;gap:0.65rem;flex-wrap:wrap;
  font-size:0.68rem;font-family:var(--mono);color:var(--text3);
  margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border);
}
.post-meta-cat{color:var(--gold);opacity:0.9}
.post-meta-sep{color:var(--text4)}
.post-meta-tag{
  padding:0.12rem 0.5rem;border-radius:99px;border:1px solid var(--border2);
  color:var(--text3);cursor:pointer;
  transition:border-color 0.22s var(--ease-soft),color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  background:none;font-family:var(--mono);font-size:0.68rem;
}
.post-meta-tag:hover{border-color:var(--gold3);color:var(--gold);background:var(--gold-glow);transform:translateY(-1px)}
.post-meta-tag:active{transform:translateY(0)}
.post-body{font-family:var(--serif);font-size:1.05rem;line-height:2;color:var(--text)}
.post-body p{margin-bottom:1.5em}
/* HTML 블록은 wrapper 마진/패딩 없이 raw HTML이 그대로 흐르도록 */
.post-body [data-html-block]{margin:1.2em 0}
.post-body [data-html-block] > .html-block-content{display:block}
.post-body [data-html-block] > .html-block-content > *:first-child{margin-top:0}
.post-body [data-html-block] > .html-block-content > *:last-child{margin-bottom:0}
/* 인라인 별점 블록 (.post-rating과 동일 색감, 그러나 본문 상단 별점과 구분) */
.post-body .inline-rating{
  display:flex;align-items:center;gap:0.5rem;margin:1.2em 0;
}
.post-body .inline-rating .post-rating-stars{
  width:140px;height:28px;flex-shrink:0;display:block;overflow:visible;
}
.post-body .inline-rating .post-rating-empty-g path{
  fill:var(--surface3);stroke:var(--border3);stroke-width:0.3;
}
.post-body .inline-rating .post-rating-filled-g path{
  fill:var(--gold);transition:filter .3s var(--ease);
}
.post-body .inline-rating:hover .post-rating-filled-g path{
  filter:drop-shadow(0 0 1.2px rgba(255,200,80,0.45));
}
.post-body .inline-rating .post-rating-val{
  font-family:var(--mono);font-size:0.78rem;color:var(--gold);
  letter-spacing:0.04em;font-weight:500;font-variant-numeric:tabular-nums;
}
/* Metrono iframe 임베드 */
.post-body [data-metrono-block]{
  margin:1.5em 0;display:block;
}
.post-body [data-metrono-block] iframe{
  display:block;width:100%;max-width:600px;border:0;border-radius:16px;
  background:var(--bg2);
}
.post-body h1{font-size:1.65rem;font-weight:500;margin:2.8rem 0 0.9rem;letter-spacing:-0.03em;color:var(--text)}
.post-body h2{font-size:1.32rem;font-weight:500;margin:2.5rem 0 0.9rem;letter-spacing:-0.02em;color:var(--text)}
.post-body h3{font-size:1.1rem;font-weight:500;margin:2rem 0 0.75rem;color:var(--text)}
.post-body blockquote{
  border-left:3px solid var(--gold3);margin:2rem 0;padding:1.1rem 1.7rem;
  background:linear-gradient(135deg,var(--surface),var(--bg2));
  border-radius:0 var(--r8) var(--r8) 0;font-style:italic;color:var(--text2);
  box-shadow:var(--shadow-sm);
}
.post-body pre{
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r8);
  padding:1.3rem 1.4rem;overflow-x:auto;font-family:var(--mono);font-size:0.8rem;
  margin:1.8rem 0;color:var(--text2);line-height:1.75;
}
.post-body code{font-family:var(--mono);font-size:0.8rem;background:var(--surface2);padding:0.15em 0.4em;border-radius:4px;color:var(--gold)}
.post-body pre code{background:none;padding:0;color:inherit}
.post-body img{width:100%;border-radius:var(--r12);margin:2.5rem 0;border:1px solid var(--border);cursor:zoom-in;transition:transform 0.45s var(--ease-soft),box-shadow 0.45s var(--ease-soft),filter 0.45s var(--ease-soft);will-change:transform}
.post-body img:hover{transform:scale(1.005);box-shadow:0 12px 36px -8px rgba(0,0,0,0.4);filter:brightness(1.04)}
.post-body img[data-alignment="left"]{float:left;width:auto;max-width:48%;margin:0.4em 1.4em 1em 0;border-radius:var(--r8)}
.post-body img[data-alignment="right"]{float:right;width:auto;max-width:48%;margin:0.4em 0 1em 1.4em;border-radius:var(--r8)}
.post-body img[data-alignment="center"]{display:block;width:auto;max-width:100%;margin:1.5rem auto;float:none}
.post-body img[data-alignment="full"]{display:block;width:100%;max-width:100%;margin:1.5rem 0;float:none;border-radius:var(--r8)}
.post-body::after{content:'';display:table;clear:both}
.post-body hr{border:none;border-top:1px solid var(--border);margin:3rem 0}
.post-body a{color:var(--gold);background-image:linear-gradient(to right,var(--gold),var(--gold));background-position:0 100%;background-repeat:no-repeat;background-size:0% 1px;padding-bottom:2px;border-bottom:1px solid rgba(212,176,116,0.28);transition:color 0.3s var(--ease-soft),border-color 0.3s var(--ease-soft),background-size 0.5s var(--ease-soft)}
.post-body a:hover{color:var(--gold2);border-bottom-color:transparent;background-size:100% 1px}
.post-body ul,.post-body ol{padding-left:1.6rem;margin-bottom:1.5em}
.post-body li{margin-bottom:0.5em}
.post-body strong{font-weight:600;color:var(--text)}
.post-body em{font-style:italic;color:var(--text2)}
/* Rich tooltip trigger — viewer */
.post-body .has-tip,.lc-rtext .has-tip,.lyrics-body .has-tip,#lc-preview-out .has-tip{
  text-decoration:underline dotted var(--gold3);text-underline-offset:3px;
  cursor:help;color:var(--gold);border-radius:3px;
  transition:color 0.22s var(--ease-soft),background-color 0.25s var(--ease-soft),text-decoration-color 0.22s var(--ease-soft);
}
.post-body .has-tip:hover,.lc-rtext .has-tip:hover,.lyrics-body .has-tip:hover,#lc-preview-out .has-tip:hover{
  color:var(--gold2);background:rgba(201,169,110,0.08);text-decoration-color:var(--gold);
}
.post-body .has-tip[aria-expanded="true"],.lc-rtext .has-tip[aria-expanded="true"],
.lyrics-body .has-tip[aria-expanded="true"],#lc-preview-out .has-tip[aria-expanded="true"]{
  background:rgba(201,169,110,0.22);color:var(--gold2);text-decoration-color:var(--gold);
}
/* Touch devices: more obvious affordance + comfortable tap area */
@media (hover:none) and (pointer:coarse){
  .post-body .has-tip,.lc-rtext .has-tip,.lyrics-body .has-tip,#lc-preview-out .has-tip{
    background:rgba(201,169,110,0.10);text-decoration:none;
    padding:0 4px;border-bottom:1.5px dotted var(--gold);border-radius:3px;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}
/* Rich tooltip trigger — editor (more prominent so it's recognisable while writing) */
.tiptap-content .has-tip{
  background:rgba(201,169,110,0.14);border-bottom:1.5px dotted var(--gold);
  padding:0 2px;border-radius:3px;cursor:help;color:var(--gold);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-color 0.25s var(--ease-soft),color 0.22s var(--ease-soft);
}
.tiptap-content .has-tip:hover{background:rgba(201,169,110,0.26);color:var(--gold2)}
.tiptap-content .has-tip[aria-expanded="true"]{background:rgba(201,169,110,0.32);color:var(--gold2)}
/* Tooltip popup (positioned by JS as fixed) */
.tip-popup{
  position:fixed;z-index:9200;
  background:linear-gradient(180deg,var(--surface),var(--surface2));
  border:1px solid var(--border2);border-radius:var(--r12);
  padding:0.85rem 1.05rem;min-width:180px;max-width:360px;width:max-content;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 1px 2px rgba(0,0,0,0.4),
    0 8px 24px rgba(0,0,0,0.45),
    0 22px 56px rgba(0,0,0,0.55),
    0 0 0 1px rgba(212,176,116,0.06);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  font-size:0.85rem;line-height:1.7;color:var(--text);pointer-events:auto;
  opacity:0;transform:translateY(6px) scale(0.96);
  transform-origin:var(--arrow-left,50%) var(--origin-y,100%);
  transition:opacity 0.22s var(--ease-soft),transform 0.38s var(--ease-spring);
  will-change:opacity,transform;
}
.tip-popup.is-open{opacity:1;transform:translateY(0) scale(1)}
.tip-popup.is-leaving{
  opacity:0;transform:translateY(3px) scale(0.97);
  transition:opacity 0.16s var(--ease),transform 0.18s var(--ease);
}
/* Arrows — two-layer for border continuity */
.tip-popup.arrow-bottom::before,.tip-popup.arrow-bottom::after{
  content:'';position:absolute;top:100%;left:var(--arrow-left,50%);
  width:0;height:0;border:7px solid transparent;pointer-events:none;
}
.tip-popup.arrow-bottom::before{margin-left:-7px;border-top-color:var(--border2)}
.tip-popup.arrow-bottom::after{margin-left:-6px;margin-top:-1.5px;border:6px solid transparent;border-top-color:var(--surface)}
.tip-popup.arrow-top::before,.tip-popup.arrow-top::after{
  content:'';position:absolute;bottom:100%;left:var(--arrow-left,50%);
  width:0;height:0;border:7px solid transparent;pointer-events:none;
}
.tip-popup.arrow-top::before{margin-left:-7px;border-bottom-color:var(--border2)}
.tip-popup.arrow-top::after{margin-left:-6px;margin-bottom:-1.5px;border:6px solid transparent;border-bottom-color:var(--surface)}
.tip-popup img{max-width:100%;border-radius:var(--r4);margin:0.4rem 0}
.tip-popup iframe{max-width:100%;border-radius:var(--r4);margin:0.4rem 0}
.tip-popup p{margin-bottom:0.5em}
.tip-popup p:last-child{margin-bottom:0}
.tip-popup a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.tip-popup a:hover{color:var(--gold2)}
/* Mobile bottom-sheet variant — comfortable touch readability */
.tip-popup.mobile-sheet{
  left:12px !important;right:12px !important;top:auto !important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  max-width:none;width:auto;
  padding:1.5rem 1.15rem 1.15rem;
  border-radius:var(--r16);
  transform:translateY(28px) scale(1);
  transform-origin:bottom center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 -2px 12px rgba(0,0,0,0.25),
    0 24px 60px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.45);
}
.tip-popup.mobile-sheet.is-open{transform:translateY(0) scale(1)}
.tip-popup.mobile-sheet.is-leaving{transform:translateY(24px) scale(1);opacity:0}
.tip-popup.mobile-sheet.arrow-top::before,.tip-popup.mobile-sheet.arrow-top::after,
.tip-popup.mobile-sheet.arrow-bottom::before,.tip-popup.mobile-sheet.arrow-bottom::after{display:none}
/* Grabber handle on the sheet */
.tip-popup.mobile-sheet > .tip-grabber{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:99px;background:var(--border3);
  opacity:0.6;
}
@media (prefers-reduced-motion:reduce){
  .tip-popup{transition:opacity 0.12s linear;transform:none}
  .tip-popup.is-open,.tip-popup.is-leaving{transform:none}
  .tip-popup.mobile-sheet,.tip-popup.mobile-sheet.is-open,.tip-popup.mobile-sheet.is-leaving{transform:none}
}
/* ── Tiptap rich-content elements (post view) ── */
.post-body mark{background:rgba(201,169,110,0.28);padding:0.05em 3px;border-radius:2px;color:inherit}
.post-body .tableWrapper{overflow-x:auto;margin:1.8rem 0;border-radius:var(--r8)}
.post-body table{
  width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;
  margin:1.8rem 0;font-size:0.93rem;
  border:1px solid var(--border);border-radius:var(--r8);
}
.post-body .tableWrapper > table{margin:0}
.post-body th,.post-body td{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:0.55rem 0.85rem;text-align:left;vertical-align:top;
}
.post-body th:last-child,.post-body td:last-child{border-right:none}
.post-body tr:last-child > th,.post-body tr:last-child > td{border-bottom:none}
.post-body tr:first-child > th:first-child,
.post-body tr:first-child > td:first-child{border-top-left-radius:var(--r8)}
.post-body tr:first-child > th:last-child,
.post-body tr:first-child > td:last-child{border-top-right-radius:var(--r8)}
.post-body tr:last-child > th:first-child,
.post-body tr:last-child > td:first-child{border-bottom-left-radius:var(--r8)}
.post-body tr:last-child > th:last-child,
.post-body tr:last-child > td:last-child{border-bottom-right-radius:var(--r8)}
.post-body th{background:var(--surface2);font-weight:600;color:var(--text)}
.post-body td{color:var(--text2)}
/* Task list */
.post-body ul[data-type="taskList"]{list-style:none;padding-left:0.2rem}
.post-body ul[data-type="taskList"] li[data-type="taskItem"]{display:flex;align-items:flex-start;gap:0.55rem;margin-bottom:0.4em}
.post-body ul[data-type="taskList"] li[data-type="taskItem"] label{display:flex;align-items:center;flex-shrink:0;padding-top:0.22em}
.post-body ul[data-type="taskList"] li[data-type="taskItem"] label input[type="checkbox"]{width:15px;height:15px;accent-color:var(--gold);cursor:default}
.post-body ul[data-type="taskList"] li[data-type="taskItem"] > div{flex:1;min-width:0}
.post-body ul[data-type="taskList"] li[data-type="taskItem"][data-checked="true"] > div{opacity:0.5;text-decoration:line-through}
/* Callout blocks */
.post-body .callout-block{
  display:flex;gap:0.75rem;align-items:flex-start;
  background:var(--surface2);border:1px solid var(--border);border-radius:var(--r8);
  padding:0.9rem 1.1rem;margin:1.4rem 0;
}
.post-body .callout-icon{font-size:1.1rem;flex-shrink:0;line-height:1.6;margin-top:0.05rem}
.post-body .callout-content{flex:1;min-width:0}
.post-body .callout-content p:last-child{margin-bottom:0}
.post-body .callout-block[data-callout-type="warning"]{border-color:rgba(201,169,110,0.4);background:rgba(201,169,110,0.06)}
.post-body .callout-block[data-callout-type="danger"]{border-color:rgba(176,64,64,0.35);background:rgba(176,64,64,0.05)}
.post-body .callout-block[data-callout-type="tip"]{border-color:rgba(90,190,110,0.35);background:rgba(90,190,110,0.05)}
/* Toggle (collapsible) blocks — published view uses native <details> behavior
   via JS; here we render the static structure that ships in the HTML. */
.post-body .toggle-block{
  display:grid;grid-template-columns:24px 1fr;align-items:start;gap:0.15rem;
  margin:0.6em 0;
}
.post-body .toggle-block .toggle-arrow{
  width:24px;height:1.7em;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--text3);cursor:pointer;padding:0;
  border-radius:var(--r4);transition:transform .14s var(--ease),background .12s,color .12s;
}
.post-body .toggle-block .toggle-arrow:hover{background:var(--surface2);color:var(--text)}
.post-body .toggle-block[data-open="true"] .toggle-arrow{transform:rotate(90deg)}
.post-body .toggle-block .toggle-summary{font-weight:500;line-height:1.7}
.post-body .toggle-block .toggle-body{
  padding:0.2em 0 0.4em 0.95rem;border-left:1px solid var(--border);
  margin-top:0.1em;
}
.post-body .toggle-block[data-open="false"] .toggle-body{display:none}
.post-admin-bar{padding-bottom:4rem;display:none;margin-top:4rem;padding-top:1.75rem;border-top:1px solid var(--border);gap:0.85rem;flex-wrap:wrap;padding-left:3.5rem;padding-right:3.5rem}
.post-admin-bar.show{display:flex}
.post-admin-bar .btn{padding:0.55rem 1.15rem}

/* ── Metrono player (가사/앨범 번역 상단) ── */
.metrono-player-wrap{
  width:100%;max-width:600px;margin:0 auto;border-radius:var(--r12);
  overflow:hidden;background:var(--surface2);box-shadow:var(--shadow-lg);
}
.metrono-player{display:block;width:100%;border:0;background:transparent}

/* ── YouTube player (responsive 16:9) ── */
.yt-player-wrap{position:relative;width:100%;padding-bottom:56.25%;border-radius:var(--r12);overflow:hidden;background:var(--surface2);box-shadow:var(--shadow-lg)}
.yt-player{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
/* Facade: thumbnail + play button, iframe only loads on click */
.yt-facade{position:absolute;inset:0;cursor:pointer;background:#000}
.yt-facade-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
div.yt-facade-thumb{background:var(--surface2)}
.yt-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:none;border:none;padding:0;cursor:pointer;opacity:.85;transition:opacity 0.3s var(--ease-soft),transform 0.4s var(--ease-spring);filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));pointer-events:none}
.yt-facade:hover .yt-facade-play{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
.yt-facade:active .yt-facade-play{transform:translate(-50%,-50%) scale(1.05)}
.yt-facade.yt-active .yt-facade-thumb,.yt-facade.yt-active .yt-facade-play{display:none}

/* ══════════════════════════════════════════
   LYRICS VIEW (노래 번역) — 데스크탑 2-column
══════════════════════════════════════════ */
#v-lyrics{
  display:none;flex:1;flex-direction:row;
  overflow:hidden;
}
#v-lyrics.active{display:flex}

/* 왼쪽 : 곡 목록 */
#lyrics-list-panel{
  width:360px;flex-shrink:1;border-right:1px solid var(--border);
  overflow-y:auto;display:flex;flex-direction:column;
  min-width:84px;max-width:520px;
  transition:min-width 0.2s;
  position:relative;
}
#lyrics-list-panel::-webkit-scrollbar{width:3px}
#lyrics-list-panel::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px}
.lyrics-list-header{
  padding:2rem 1.8rem 1.1rem;border-bottom:1px solid var(--border);flex-shrink:0;
  position:sticky;top:0;background:rgba(10,10,10,0.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
.lh-content{flex:1;min-width:0}
.lyrics-list-title{font-family:var(--serif);font-size:1.45rem;font-weight:500;letter-spacing:-0.03em;color:var(--text);margin-bottom:0.3rem}
.lyrics-list-count{font-size:0.68rem;font-family:var(--mono);color:var(--text3)}

/* 곡 카드 */
.lc{
  display:flex;align-items:center;gap:1rem;padding:0.9rem 1.8rem;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background 0.28s var(--ease-soft);position:relative;
}
.lc::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:2px;height:60%;background:var(--gold-rail);border-radius:0 2px 2px 0;
  transition:transform 0.4s var(--ease-spring);
  box-shadow:0 0 8px rgba(212,176,116,0.2);
}
.lc:hover{background:rgba(255,255,255,0.022)}
.lc:hover .lc-thumb{transform:scale(1.04);border-color:var(--border2)}
.lc.active{background:var(--gold-glow)}
.lc.active::before{transform:translateY(-50%) scaleY(1)}
.lc-thumb{
  width:52px;height:52px;border-radius:var(--r8);object-fit:cover;
  border:1px solid var(--border);flex-shrink:0;
  background:var(--surface2);
  transition:transform 0.4s var(--ease-soft),border-color 0.28s var(--ease-soft),box-shadow 0.28s var(--ease-soft);
  will-change:transform;
}
.lc:hover .lc-thumb,.lc:hover .lc-thumb-ph{box-shadow:0 4px 14px -4px rgba(0,0,0,0.35)}
.lc-thumb-ph{
  width:52px;height:52px;border-radius:var(--r8);border:1px solid var(--border);
  flex-shrink:0;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;color:var(--text4);
}
.lc-info{flex:1;min-width:0}
.lc-title{font-family:var(--serif);font-size:0.9rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.02em;
  transition:color 0.15s;margin-bottom:0.18rem}
.lc.active .lc-title{color:var(--gold)}
.lc-artist{font-size:0.72rem;font-family:var(--mono);color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-date{font-size:0.64rem;font-family:var(--mono);color:var(--text4);white-space:nowrap;margin-top:0.15rem}

/* 리사이즈 핸들 */
#lyrics-panel-resize{display:none}

/* list panel 축소 시: 앨범아트만 */
#lyrics-list-panel.compact .lyrics-list-header,
#lyrics-list-panel.compact .lc-info,
#lyrics-list-panel.compact .lc-date{display:none}
#lyrics-list-panel.compact .lc{
  padding:0.55rem;justify-content:center;gap:0;
}
#lyrics-list-panel.compact .lc-thumb,
#lyrics-list-panel.compact .lc-thumb-ph{
  width:48px;height:48px;border-radius:var(--r4);flex-shrink:0;
}

/* 오른쪽 : 가사 상세 패널 */
#lyrics-detail-panel{
  flex:1;min-width:320px;overflow-y:auto;display:flex;flex-direction:column;
  flex-shrink:0;
}
#lyrics-detail-panel::-webkit-scrollbar{width:3px}
#lyrics-detail-panel::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px}
.lyrics-empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--text4);font-family:var(--mono);font-size:0.78rem;letter-spacing:0.06em;
  gap:0.8rem;
}
.lyrics-empty-state svg{opacity:0.15;width:40px;height:40px}
/* ── 가사 컨트롤 sticky ──────────────────────
   #post-lyrics-ctrl : #v-post의 직계 자식 → sticky 완벽 동작
   #lyrics-ctrl-slot : #lyrics-detail-panel의 직계 자식 → sticky 완벽 동작
──────────────────────────────────────────── */
#post-lyrics-ctrl{
  position:sticky;
  top:0;
  z-index:20;
  flex-shrink:0;
}
#post-body > .yt-player-wrap,
#post-body > .metrono-player-wrap{margin-bottom:1.6rem}
#post-body > #post-lyrics-ctrl{margin-top:0.25rem}
#v-post .acc-item.open .acc-head{
  top:var(--post-ctrl-h,0px);
}
#post-lyrics-ctrl .lyrics-controls{
  border-left:none;border-right:none;border-top:none;border-bottom:none;border-radius:0;
  margin-bottom:1.25rem;
  padding-left:3.5rem;padding-right:3.5rem;
}
#lyrics-ctrl-slot{
  position:sticky;
  top:0;
  z-index:20;
  flex-shrink:0;
}
#lyrics-ctrl-slot .lyrics-controls{
  border-left:none;border-right:none;border-top:none;border-radius:0;
  margin-bottom:0.8rem;
}
@media(max-width:768px){
  #post-lyrics-ctrl{top:0}
  #post-lyrics-ctrl .lyrics-controls{
    padding-left:1.25rem;padding-right:1.25rem;
    margin-bottom:1rem;
  }
  #post-body > .yt-player-wrap,
  #post-body > .metrono-player-wrap{margin-bottom:1.1rem}
}

/* ── album-trk-ctrl-bar: sticky in #album-detail-panel (desktop) ── */
#album-trk-ctrl{
  position:sticky;top:0;z-index:15;flex-shrink:0;
}
#album-trk-ctrl .lyrics-controls{
  border-left:none;border-right:none;border-top:none;border-radius:0;
  margin-bottom:0.8rem;
}

/* ── post-alb-ctrl-*-bar: sticky in #v-post, below post ctrl + open acc-head ── */
.lyrics-ctrl-slot{
  position:sticky;
  top:calc(var(--post-ctrl-h,0px) + var(--post-acc-head-h,0px));
  z-index:11;flex-shrink:0;
}
.lyrics-ctrl-slot .lyrics-controls{
  border-left:none;border-right:none;border-top:none;border-radius:0;
  margin-bottom:0.8rem;
}

/* ── acc-ctrl-*: sticky in #v-lyrics-mob, below open acc-head ── */
#v-lyrics-mob .lyrics-ctrl-slot{
  top:var(--mob-acc-head-h,0px);
  z-index:11;
}

/* ── at-item-head: sticky in #v-album-mob, below open acc-head ── */
#v-album-mob .at-item-head{
  position:sticky;
  top:var(--alb-acc-head-h,0px);
  z-index:9;
  background:rgba(6,6,6,0.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] #v-album-mob .at-item-head{
  background:rgba(250,249,247,0.96);
}

/* ── albacc-trk-ctrl-*-bar: sticky in #v-album-mob, below acc-head + at-item-head ── */
.albacc-trk-ctrl-slot{
  position:sticky;
  top:calc(var(--alb-acc-head-h,0px) + var(--at-head-h,0px));
  z-index:7;flex-shrink:0;
}
.albacc-trk-ctrl-slot .lyrics-controls{
  border-left:none;border-right:none;border-top:none;border-radius:0;
  margin-bottom:0.8rem;
}
.lyrics-detail-inner{padding:0;max-width:700px;animation:fadeIn 0.3s var(--ease-out)}
#lyrics-detail-content{padding:1.2rem 2.5rem 3rem}
/* 유튜브 플레이어 — 제목 아래, 가운데 정렬, 적당한 크기 */
.lyrics-detail-inner .yt-player-wrap{
  width:72%;max-width:460px;margin:0 auto 2rem;
  padding-bottom:calc(72% * 0.5625);
  border-radius:var(--r12);
  box-shadow:0 6px 24px rgba(0,0,0,0.45);
}
.lyrics-detail-inner .metrono-player-wrap{
  width:72%;max-width:460px;margin:0 auto 2rem;
  box-shadow:0 6px 24px rgba(0,0,0,0.45);
}
.lyrics-song-title{
  font-family:var(--serif);font-size:1.9rem;font-weight:500;
  letter-spacing:-0.04em;line-height:1.22;color:var(--text);margin-bottom:0.5rem;
}
.lyrics-artist-name{
  font-family:var(--mono);font-size:0.82rem;color:var(--gold);
  letter-spacing:0.04em;margin-bottom:0.4rem;opacity:0.9;
}
.lyrics-meta{
  display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;
  font-size:0.68rem;font-family:var(--mono);color:var(--text3);
  margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);
}
.lyrics-body{font-family:var(--serif);font-size:1rem;line-height:2.1;color:var(--text)}
.lyrics-body p{margin-bottom:1.8em;white-space:pre-line}

/* ── 기악곡 (가사 없음) 플레이스홀더 ──────── */
.lyrics-instrumental{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:3.5rem 1.2rem 3.2rem;text-align:center;
  color:var(--text2);font-family:var(--serif);
}
.lyrics-instrumental-icon{
  width:76px;height:auto;color:var(--gold);
  animation:lyrics-instrumental-bob 3.4s cubic-bezier(.45,.05,.55,.95) infinite;
  filter:drop-shadow(0 4px 14px var(--gold-glow));
}
.lyrics-instrumental-text{
  font-size:0.98rem;letter-spacing:0.04em;line-height:1.5;
  color:var(--text2);
}
@keyframes lyrics-instrumental-bob{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-7px) rotate(1.5deg)}
}
@media (prefers-reduced-motion:reduce){
  .lyrics-instrumental-icon{animation:none}
}
.lyrics-admin-bar{display:none;margin:3.25rem 2.5rem 0;padding:1.75rem 0 4rem;border-top:1px solid var(--border);gap:0.85rem;flex-wrap:wrap}
.lyrics-admin-bar.show{display:flex}
.lyrics-admin-bar .btn{padding:0.55rem 1.15rem}

/* ══════════════════════════════════════════
   LYRICS CONTROLS — 표시 옵션 바
══════════════════════════════════════════ */
.lyrics-controls{
  display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
  padding:0.5rem 2.5rem;
  background:rgba(10,10,10,0.92);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  margin-bottom:1.2rem;
}

.lc-toggle{
  display:flex;align-items:center;gap:0.4rem;
  padding:0.32rem 0.7rem;border-radius:99px;
  border:1px solid var(--border2);background:none;
  font-size:0.68rem;font-family:var(--mono);color:var(--text2);
  cursor:pointer;
  transition:border-color 0.22s var(--ease-soft),color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  letter-spacing:0.03em;user-select:none;
}
.lc-toggle:hover{border-color:var(--border3);color:var(--text)}
.lc-toggle:active{transform:scale(0.96)}
.lc-toggle.active{background:var(--gold-glow);border-color:var(--gold3);color:var(--gold)}
.lc-toggle .lc-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--border3);flex-shrink:0;
  transition:background 0.25s var(--ease-soft),box-shadow 0.25s var(--ease-soft);
}
.lc-toggle.active .lc-dot{background:var(--gold);box-shadow:0 0 6px rgba(212,176,116,0.6)}
.lc-sep{width:1px;height:16px;background:var(--border2);flex-shrink:0;margin:0 0.1rem}
.lc-layout-btn{
  display:flex;align-items:center;gap:0.4rem;
  padding:0.32rem 0.7rem;border-radius:99px;
  border:1px solid var(--border2);background:none;
  font-size:0.68rem;font-family:var(--mono);color:var(--text2);
  cursor:pointer;
  transition:border-color 0.22s var(--ease-soft),color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  margin-left:auto;letter-spacing:0.03em;
}
.lc-layout-btn:hover{border-color:var(--border3);color:var(--text)}
.lc-layout-btn:active{transform:scale(0.96)}
.lc-layout-btn.active{background:rgba(122,180,204,0.1);border-color:rgba(122,180,204,0.4);color:#7ab4cc}
.lc-layout-btn svg{width:12px;height:12px;flex-shrink:0}

/* ══════════════════════════════════════════
   LYRICS BODY — 가사 클래스 스타일
══════════════════════════════════════════ */
.lyrics-body{font-family:var(--serif);font-size:1rem;line-height:1.9;color:var(--text)}

/* 각 라인 공통 */
.lyrics-body .en,
.lyrics-body .ko,
.lyrics-body .jp,
.lyrics-body .pn{
  display:block;line-height:1.9;
}
/* 원문 (영어/일본어) */
.lyrics-body .en{
  color:var(--text);font-size:1rem;
  margin-bottom:0.1em;
}
.lyrics-body .jp{
  color:var(--text);font-size:1rem;
  margin-bottom:0.1em;
}
/* 발음 */
.lyrics-body .pn{
  color:var(--text3);font-size:0.82rem;font-family:var(--sans);
  margin-bottom:0.1em;letter-spacing:0.01em;
}
/* 번역 */
.lyrics-body .ko{
  color:var(--text2);font-size:0.88rem;font-family:var(--sans);
  margin-bottom:0.6em;
}
/* 숨김 처리 */
.lyrics-body.hide-en .en,
.lyrics-body.hide-ko .ko,
.lyrics-body.hide-jp .jp,
.lyrics-body.hide-pn .pn{ display:none!important }

/* 문단 구분 */
.lyrics-body .sp{
  display:block;height:1.6rem;
}
.lyrics-body .sp2{
  display:block;height:0.7rem;
}

/* ── 가로 배열 모드 ── */
.lyrics-body.layout-wide .en,
.lyrics-body.layout-wide .jp,
.lyrics-body.layout-wide .pn,
.lyrics-body.layout-wide .ko{ display:none!important }

.lyrics-body.layout-wide .sp{ display:grid;gap:0 1.5rem;height:1.6rem;align-items:center }
.lyrics-body.layout-wide .sp.cols-2{ grid-template-columns:1fr 1fr }
.lyrics-body.layout-wide .sp.cols-3{ grid-template-columns:1fr 1fr 1fr }
.lyrics-body.layout-wide .sp .sp-mark{
  display:block;height:1px;width:64px;background:var(--border3);
  justify-self:start;
}
.lyrics-body.layout-center.layout-wide .sp .sp-mark{ justify-self:center }
.lyrics-body.layout-wide .sp2{ height:0.8rem }
.lyrics-body.layout-wide .sp .sp-dash{ display:none }

/* 가로 그룹 — JS로 동적 생성 */
.lyrics-wide-row{
  display:grid;
  gap:0 1.5rem;
  align-items:start;
  margin-bottom:0.15em;
}
.lyrics-wide-row.cols-2{ grid-template-columns:1fr 1fr }
.lyrics-wide-row.cols-3{ grid-template-columns:1fr 1fr 1fr }

.lyrics-wide-row .w-orig{
  color:var(--text);font-size:0.95rem;line-height:1.85;
  font-family:var(--serif);
}
.lyrics-wide-row .w-pn{
  color:var(--text3);font-size:0.78rem;font-family:var(--sans);
  line-height:1.85;letter-spacing:0.01em;
}
.lyrics-wide-row .w-ko{
  color:var(--text2);font-size:0.82rem;font-family:var(--sans);
  line-height:1.85;
}
/* 가로모드 헤더 */
.lyrics-wide-header{
  display:grid;gap:0 1.5rem;
  margin-bottom:0.6rem;padding-bottom:0.5rem;
  border-bottom:1px solid var(--border);
  font-size:0.6rem;font-family:var(--mono);color:var(--text4);
  letter-spacing:0.1em;text-transform:uppercase;
}
.lyrics-wide-header.cols-2{ grid-template-columns:1fr 1fr }
.lyrics-wide-header.cols-3{ grid-template-columns:1fr 1fr 1fr }

/* 가운데 정렬 모드 */
.lyrics-body.layout-center{ text-align:center }
.lyrics-body.layout-center .en,
.lyrics-body.layout-center .ko,
.lyrics-body.layout-center .jp,
.lyrics-body.layout-center .pn{ display:block;text-align:center }
.lyrics-body.layout-center .lyrics-wide-row{ justify-items:center }
.lyrics-body.layout-center .lyrics-wide-header{ justify-items:center }

/* ══════════════════════════════════════════
   LYRICS — 모바일 아코디언
══════════════════════════════════════════ */
#v-lyrics-mob{display:none;flex:1;flex-direction:column;overflow-y:auto}
#v-lyrics-mob.active{display:flex}
.mob-lyrics-header{
  padding:1.8rem 1.25rem 1.2rem;border-bottom:1px solid var(--border);
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
/* 모바일 아코디언: acc-head sticky at top */
#v-lyrics-mob .acc-item.open .acc-head,
#v-album-mob .acc-item.open .acc-head{
  top:0;
}
.mob-lyrics-title{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:-0.03em;margin-bottom:0.25rem}
.mob-lyrics-count{font-size:0.68rem;font-family:var(--mono);color:var(--text3)}
.mob-accordion-list{flex:1}

/* ══════════════════════════════════════════
   ALBUM VIEW (앨범 번역) — 데스크탑 2-column (리사이즈 없음)
══════════════════════════════════════════ */
#v-album{display:none;flex:1;flex-direction:row;overflow:hidden}
#v-album.active{display:flex}
#album-list-panel{
  width:420px;flex-shrink:0;border-right:1px solid var(--border);
  overflow-y:auto;display:flex;flex-direction:column;
}
#album-list-panel::-webkit-scrollbar{width:3px}
#album-list-panel::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px}
#album-cards{padding-bottom:2rem}
.album-list-header{
  padding:2rem 1.8rem 1.1rem;border-bottom:1px solid var(--border);flex-shrink:0;
  position:sticky;top:0;background:rgba(10,10,10,0.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
}
[data-theme="light"] .album-list-header{background:rgba(250,249,247,0.95)}
.album-list-title{font-family:var(--serif);font-size:1.45rem;font-weight:500;letter-spacing:-0.03em;color:var(--text);margin-bottom:0.3rem}
.album-list-count{font-size:0.68rem;font-family:var(--mono);color:var(--text3)}
#album-detail-panel{
  flex:1;min-width:320px;overflow-y:auto;display:flex;flex-direction:column;
  flex-shrink:0;
}
#album-detail-panel::-webkit-scrollbar{width:3px}
#album-detail-panel::-webkit-scrollbar-thumb{background:var(--border3);border-radius:99px}
#album-ctrl-slot{
  position:sticky;top:0;z-index:20;flex-shrink:0;
}
#album-ctrl-slot .lyrics-controls{
  border-left:none;border-right:none;border-top:none;border-radius:0;
  margin-bottom:0.8rem;
}
.album-detail-inner{padding:0;max-width:700px;animation:fadeIn 0.3s var(--ease-out)}
#album-detail-content{padding:1.2rem 2.5rem 3rem}
#v-album-mob{display:none;flex:1;flex-direction:column;overflow-y:auto;padding-bottom:3rem}
#v-album-mob.active{display:flex}

/* ── 앨범 상세 (list-panel 내부) ── */
.album-detail-hero{
  padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;
  align-items:center;text-align:center;border-bottom:1px solid var(--border);
}
.album-detail-art{
  width:140px;height:140px;border-radius:var(--r12,12px);object-fit:cover;
  border:1px solid var(--border);background:var(--surface2);
  box-shadow:0 6px 24px rgba(0,0,0,0.25);margin-bottom:1rem;
}
.album-detail-title{
  font-family:var(--serif);font-size:1.15rem;font-weight:600;
  letter-spacing:-0.03em;color:var(--text);line-height:1.3;margin-bottom:0.2rem;
}
.album-detail-artist{
  font-family:var(--mono);font-size:0.75rem;color:var(--gold);
  letter-spacing:0.03em;margin-bottom:0.4rem;
}
.album-detail-date{
  font-size:0.65rem;font-family:var(--mono);color:var(--text4);margin-bottom:0.2rem;
}
.album-detail-tags{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0.35rem;font-size:0.65rem;margin-top:0.35rem;margin-bottom:0.15rem;
}
.album-detail-admin{margin-top:0.5rem;display:flex;gap:0.35rem;justify-content:center}
.album-detail-admin .btn{font-size:0.68rem;padding:0.2rem 0.55rem}
.album-detail-yt{padding:0.8rem 1.2rem 0.4rem}
.album-detail-yt .yt-player-wrap,
.album-detail-yt .metrono-player-wrap{
  width:100%;max-width:none;margin:0;
  border-radius:var(--r8);box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.album-trk-section-title{
  padding:0.7rem 1.2rem 0.4rem;font-size:0.68rem;font-family:var(--mono);
  color:var(--text3);letter-spacing:0.04em;
}
.album-trk-item{
  display:flex;align-items:center;gap:0.65rem;padding:0.65rem 1.2rem;
  cursor:pointer;transition:background 0.25s var(--ease-soft);
  border-bottom:1px solid var(--border);position:relative;
}
.album-trk-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.38s var(--ease-spring);
  box-shadow:0 0 6px rgba(212,176,116,0.2);
}
#album-track-list{padding-bottom:2.5rem}
.album-trk-item:hover{background:rgba(255,255,255,0.025)}
[data-theme="light"] .album-trk-item:hover{background:rgba(0,0,0,0.025)}
.album-trk-item.active{background:var(--gold-glow)}
.album-trk-item.active::before{transform:translateY(-50%) scaleY(1)}
.album-trk-num{
  width:22px;text-align:center;font-size:0.72rem;font-family:var(--mono);
  color:var(--text3);flex-shrink:0;font-weight:600;
}
.album-trk-item.active .album-trk-num{color:var(--gold)}
.album-trk-title{
  flex:1;min-width:0;font-family:var(--serif);font-size:0.85rem;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-0.01em;
}
.album-trk-item.active .album-trk-title{color:var(--gold)}
.album-trk-play{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border2);
  background:none;color:var(--text3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 0.22s var(--ease-soft),color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),transform 0.22s var(--ease-soft);
  flex-shrink:0;
}
.album-trk-play:hover{border-color:var(--gold3);color:var(--gold);background:var(--gold-glow);transform:scale(1.08)}
.album-trk-play:active{transform:scale(0.94)}
.album-trk-item.active .album-trk-play{border-color:var(--gold3);color:var(--gold)}

/* 아코디언 아이템 */
.acc-item{border-bottom:1px solid var(--border);overflow:hidden}
.acc-item.open{overflow:visible}
.acc-item.open .acc-head{
  position:sticky;top:0;z-index:12;
  background:rgba(6,6,6,0.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .acc-item.open .acc-head{background:rgba(250,249,247,0.95)}
.acc-head{
  display:flex;align-items:center;gap:0.85rem;padding:0.9rem 1.25rem;
  cursor:pointer;transition:background 0.25s var(--ease-soft);user-select:none;
}
.acc-head:hover{background:rgba(255,255,255,0.018)}
[data-theme="light"] .acc-head:hover{background:rgba(0,0,0,0.018)}
.acc-head:active{background:rgba(255,255,255,0.025)}
.acc-thumb{
  width:44px;height:44px;border-radius:var(--r8);object-fit:cover;
  border:1px solid var(--border);flex-shrink:0;background:var(--surface2);
}
.acc-thumb-ph{
  width:44px;height:44px;border-radius:var(--r8);border:1px solid var(--border);
  flex-shrink:0;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;color:var(--text4);
}
.acc-info{flex:1;min-width:0}
.acc-song{font-family:var(--serif);font-size:0.92rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.02em;margin-bottom:0.15rem}
.acc-artist{font-size:0.7rem;font-family:var(--mono);color:var(--text3)}
.acc-chevron{
  width:18px;height:18px;flex-shrink:0;color:var(--text3);
  transition:transform 0.45s var(--ease-spring),color 0.25s var(--ease-soft);
}
.acc-head:hover .acc-chevron{color:var(--text2)}
.acc-item.open .acc-chevron{transform:rotate(180deg);color:var(--gold)}
.acc-body{
  max-height:0;overflow:hidden;
  transition:max-height 0.4s var(--ease);
}
.acc-item.open .acc-body{max-height:none;overflow:visible;transition:none}
.acc-content{
  padding:1.2rem 0.5rem 1.8rem;
  border-top:1px solid var(--border);
  background:var(--bg);
}
#post-album-accordion{margin-top:1.2rem}
.acc-content .yt-player-wrap{
  width:80%;max-width:400px;margin:0 auto 1.5rem;
  padding-bottom:calc(80% * 0.5625);
  border-radius:var(--r8);
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.acc-content .metrono-player-wrap{
  width:80%;max-width:400px;margin:0 auto 1.5rem;
  border-radius:var(--r8);
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
/* 모바일 노래/앨범 번역 — 아코디언 안 iframe만 좌우로 조금 더 넓게.
   전체글(post) iframe은 #post-body 직속이라 영향 없음. */
#v-lyrics-mob .acc-content .yt-player-wrap,
#v-album-mob .acc-content .yt-player-wrap{
  width:92%;max-width:460px;
  padding-bottom:calc(92% * 0.5625);
}
#v-lyrics-mob .acc-content .metrono-player-wrap,
#v-album-mob .acc-content .metrono-player-wrap{
  width:92%;max-width:460px;
}
.acc-content .lyrics-body{font-size:0.95rem}
#v-lyrics-mob .acc-content .lyrics-body{margin-left:0.6rem;margin-right:0.6rem}
.acc-admin-actions{display:none;margin-top:1.6rem;padding:1.1rem 0 1.4rem;border-top:1px solid var(--border2);gap:0.7rem;flex-wrap:wrap}
.acc-admin-actions.show{display:flex}
.acc-admin-actions .btn{padding:0.5rem 1.05rem}

/* ══════════════════════════════════════════
   PHOTO GRID VIEW (사진)
══════════════════════════════════════════ */
#v-photo{padding:2.8rem 3.5rem;max-width:1100px}
.photo-header{margin-bottom:2rem}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:2px;
}
.photo-card{
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--surface2);
  aspect-ratio:1;
  content-visibility:auto;contain-intrinsic-size:220px 220px;
  isolation:isolate;
}
.photo-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.15) 35%,transparent 60%);
  opacity:0;transition:opacity 0.45s var(--ease-soft);z-index:1;pointer-events:none;
}
.photo-card:hover::after,.photo-card:focus-visible::after{opacity:1}
.photo-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.8s var(--ease-soft),filter 0.45s var(--ease-soft);display:block;will-change:transform;
}
.photo-card:hover img{transform:scale(1.06);filter:brightness(1.05)}
.photo-card-info{
  position:absolute;bottom:0;left:0;right:0;padding:0.85rem 0.95rem;
  z-index:2;opacity:0;transform:translateY(8px);
  transition:opacity 0.4s var(--ease-soft),transform 0.4s var(--ease-soft);
}
.photo-card:hover .photo-card-info,.photo-card:focus-visible .photo-card-info{opacity:1;transform:translateY(0)}
.photo-card:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.photo-card-title{
  font-family:var(--serif);font-size:0.8rem;font-weight:500;
  color:#fff;letter-spacing:-0.01em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.photo-card-date{font-size:0.6rem;font-family:var(--mono);color:rgba(255,255,255,0.55);margin-top:0.2rem}
.photo-empty{
  grid-column:1/-1;padding:5rem 0;text-align:center;
  color:var(--text3);font-family:var(--mono);font-size:0.78rem;letter-spacing:0.04em;
}
/* 사진 카드 스태거 애니메이션 */
.photo-card{opacity:0;animation:fadeInPhoto 0.55s var(--ease-soft) forwards}
@keyframes fadeInPhoto{from{opacity:0;transform:scale(0.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.photo-card:nth-child(1){animation-delay:0.03s}
.photo-card:nth-child(2){animation-delay:0.08s}
.photo-card:nth-child(3){animation-delay:0.13s}
.photo-card:nth-child(4){animation-delay:0.18s}
.photo-card:nth-child(5){animation-delay:0.23s}
.photo-card:nth-child(6){animation-delay:0.28s}
.photo-card:nth-child(7){animation-delay:0.32s}
.photo-card:nth-child(8){animation-delay:0.36s}
.photo-card:nth-child(n+9){animation-delay:0.4s}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:var(--r8);
  font-size:0.78rem;font-weight:500;cursor:pointer;
  transition:color 0.22s var(--ease-soft),border-color 0.22s var(--ease-soft),background 0.22s var(--ease-soft),box-shadow 0.22s var(--ease-soft),transform 0.18s var(--ease-soft);
  border:1px solid var(--border2);background:none;color:var(--text2);
  white-space:nowrap;letter-spacing:-0.01em;position:relative;
}
.btn:hover{color:var(--text);border-color:var(--border3);background:var(--surface2)}
.btn:active{transform:scale(0.96)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold3));border-color:var(--gold3);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,0.08) inset,0 4px 14px -4px rgba(212,176,116,0.45)}
.btn.primary:hover{background:linear-gradient(180deg,var(--gold),var(--gold2));border-color:var(--gold2);box-shadow:0 1px 0 rgba(255,255,255,0.12) inset,0 6px 18px -4px rgba(212,176,116,0.55)}
.btn.active{background:var(--surface2);border-color:var(--border3);color:var(--text)}
.btn.danger{color:var(--red);border-color:rgba(192,72,72,0.2)}
.btn.danger:hover{background:rgba(192,72,72,0.08);border-color:var(--red)}
.btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.btn svg{width:12px;height:12px;flex-shrink:0}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ib:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.s-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.s-tag:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.set-toggle input:focus-visible+.set-toggle-track{outline:2px solid var(--gold);outline-offset:2px}
a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

/* ══════════════════════════════════════════
   CAROUSEL — post view
══════════════════════════════════════════ */
.pv-carousel-wrap{position:relative;margin-bottom:0.5rem;user-select:none}
.pv-carousel-wrap:last-child{margin-bottom:2rem}
.pv-carousel{
  display:flex;overflow-x:scroll;
  align-items:flex-start;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:0 8%;
  gap:10px;
  cursor:grab;
}
.pv-carousel::-webkit-scrollbar{display:none}
.pv-carousel:active,.pv-carousel:active .pv-car-item{cursor:grabbing}
.pv-car-item{
  flex:0 0 84%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  cursor:zoom-in;
  border-radius:var(--r12);
  overflow:hidden;
  position:relative;
  background:var(--surface2);
  /* Fallback height if image dimensions are unavailable */
  min-height:40px;
  /* Cap extreme portrait images */
  max-height:min(80vh,700px);
  transition:opacity 0.25s var(--ease),transform 0.25s var(--ease);
}
.pv-car-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.pv-car-cap{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.62));
  color:#fff;font-size:0.72rem;font-family:var(--sans);
  padding:1.4rem 0.9rem 0.7rem;line-height:1.4;margin:0;
}
/* Bar: indicator + nav buttons */
.pv-car-bar{
  display:flex;align-items:center;gap:0.55rem;
  margin:0.7rem 8% 0;
}
.pv-car-indicator{
  flex:1;position:relative;height:3px;
  background:var(--surface3);border-radius:2px;
  cursor:pointer;outline:none;
}
.pv-car-indicator:focus-visible{outline:2px solid var(--gold3);outline-offset:3px}
.pv-car-pip{
  position:absolute;top:0;left:0;height:100%;
  background:var(--gold);border-radius:2px;
  pointer-events:none;
}
.pv-car-btns{display:flex;gap:0.25rem;flex-shrink:0}
.pv-car-btn{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text3);cursor:pointer;flex-shrink:0;
  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);
}
.pv-car-btn:hover{background:var(--surface3);color:var(--text);border-color:var(--border3);transform:scale(1.06)}
.pv-car-btn:active{transform:scale(0.94)}
.pv-car-btn svg{flex-shrink:0}

@media(max-width:640px){
  .pv-carousel{padding:0 5%;gap:8px}
  .pv-car-item{flex:0 0 90%}
  .pv-car-bar{margin-left:5%;margin-right:5%}
}

/* ══════════════════════════════════════════
   PHOTO GRID — post view
══════════════════════════════════════════ */
.pv-grid{
  display:grid;gap:4px;border-radius:var(--r12);overflow:hidden;
  margin-bottom:0.5rem;
}
.pv-grid:last-child{margin-bottom:2rem}
.pv-slot{
  position:relative;overflow:hidden;background:var(--surface2);margin:0;
  /* Fill slots: stretch to row height determined by anchor slot */
  align-self:stretch;cursor:zoom-in;
}
.pv-slot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.3s var(--ease);
}
.pv-slot:hover img{transform:scale(1.02)}
.pv-cap{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.6));
  color:#fff;font-size:0.72rem;font-family:var(--sans);font-weight:400;
  padding:1.6rem 0.85rem 0.65rem;line-height:1.4;
}
/* ── POST RATING (평론) ── */
.post-rating{
  display:flex;align-items:center;gap:0.55rem;margin:0.6rem 0 1.2rem;
  animation:postRatingFadeIn 0.55s var(--ease-soft) backwards;
}
.post-rating-stars{width:160px;height:32px;flex-shrink:0;display:block;overflow:visible}
.post-rating-empty-g path{fill:var(--surface3);stroke:var(--border3);stroke-width:0.3}
.post-rating-filled-g path{fill:var(--gold);transition:filter 0.3s var(--ease)}
.post-rating:hover .post-rating-filled-g path{filter:drop-shadow(0 0 1.2px rgba(255,200,80,0.45))}
.post-rating-val{
  font-family:var(--mono);font-size:0.78rem;color:var(--gold);
  letter-spacing:0.04em;font-weight:500;
  font-variant-numeric:tabular-nums;
  animation:postRatingValFade 0.55s var(--ease-soft) 0.08s backwards;
}
@keyframes postRatingFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes postRatingValFade{from{opacity:0}to{opacity:1}}