:root {
    --bg: #FAFAF7;
    --fg: #0A0A0A;
    --muted: #8A8A85;
    --line: #E6E5E0;
    --card: #FFFFFF;
    --body: #222;
    --hover: rgba(10,10,10,0.05);
    --hover-strong: rgba(10,10,10,0.1);
    --hover-soft: rgba(10,10,10,0.025);
    --header-bg: rgba(250,250,247,0.88);
    --maxw: 1280px;
  }
  /* html.dark = 렌더 직전 인라인 스크립트가 붙이는 클래스(FOUC 방지).
     body.dark = app.js가 붙이는 클래스(컴포넌트별 body.dark .x 규칙용).
     두 선택자 모두 동일한 다크 토큰을 root/body 레벨에 적용해 흰 화면 깜빡임을 없앤다. */
  html.dark,
  body.dark {
    --bg: #0E0E0D;
    --fg: #F5F4F0;
    --muted: #8E8E88;
    --line: #2A2925;
    --card: #181816;
    --body: rgba(245,244,240,0.88);
    --hover: rgba(245,244,240,0.06);
    --hover-strong: rgba(245,244,240,0.12);
    --hover-soft: rgba(245,244,240,0.03);
    --header-bg: rgba(14,14,13,0.82);
  }
  body { transition: background .3s, color .3s; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--bg); color: var(--fg); }
  html { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
  body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* Sticky footer: main grows to fill viewport so the footer never floats up
     on short pages. Fixed elements (drawer, modals, toast) are out of flow. */
  body > main { flex: 1 0 auto; }
  /* 푸터 래퍼(.container)가 body의 flex 자식일 때 margin:auto 때문에 가로폭이
     콘텐츠 너비로 줄어드는 문제 방지 — 메인 페이지 푸터처럼 전체 폭으로 정렬 */
  body > .container { width: 100%; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; height: auto; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

  /* ========== Header ========== */
  .header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
  }
  .logo {
    font-size: 17px; font-weight: 700; letter-spacing: 0.2em;
    display: inline-flex; align-items: center;
    line-height: 1;
  }
  .logo img {
    height: 26px; width: auto; display: block;
    transition: opacity .2s;
  }
  .logo .logo-white { display: none; }
  body.dark .logo .logo-black { display: none; }
  body.dark .logo .logo-white { display: block; }
  .drawer-top .logo img { height: 21px; }
  @media (max-width: 900px) {
    .logo img { height: 21px; }
  }
  .header-nav { display: none; }
  .header-right {
    display: flex; align-items: center; gap: 4px;
    position: relative;
  }
  /* 로그인 후 계정 메뉴 (아바타 클릭) */
  .account-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 184px;
    background: var(--bg, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    z-index: 120;
    display: none;
    flex-direction: column; gap: 2px;
  }
  .account-menu.open { display: flex; }
  body.dark .account-menu {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .account-menu-name {
    font-size: 12px; color: var(--muted, #888);
    padding: 8px 12px 6px; margin-bottom: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  body.dark .account-menu-name { border-bottom-color: rgba(255,255,255,0.08); }
  .account-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box; text-align: left;
    padding: 10px 12px; font-size: 13.5px;
    background: transparent; border: none; cursor: pointer;
    color: var(--fg, #111); border-radius: 8px;
    font-family: inherit; text-decoration: none;
  }
  .account-menu-item i { width: 16px; text-align: center; font-size: 13px; color: var(--muted, #888); }
  .account-menu-item:hover { background: rgba(0,0,0,0.05); }
  body.dark .account-menu-item:hover { background: rgba(255,255,255,0.08); }
  .account-menu-logout { color: #dc2626; }
  .account-menu-logout i { color: #dc2626; }
  .account-menu-logout:hover { background: rgba(220,38,38,0.08); }
  .icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s;
    background: transparent;
    color: var(--fg);
  }
  .icon-btn:hover { background: var(--hover); }

  /* Login button (avatar icon) */
  .login-btn i {
    font-size: 18px;
    line-height: 1;
    display: block;
  }
  .login-btn .ico-user-filled { display: none; }
  body.logged-in .login-btn .ico-user { display: none; }
  body.logged-in .login-btn .ico-user-filled { display: block; }
  /* Admin gear button (관리자 전용) */
  .admin-btn { color: var(--fg); text-decoration: none; }
  .admin-btn i { font-size: 16px; line-height: 1; display: block; }
  .admin-btn[hidden] { display: none; }
  /* Category filter (목록 페이지) */
  .cat-filter {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 28px;
  }
  .cat-filter:empty { display: none; }
  /* 전체보기 페이지: 메인 메뉴바와 동일한 탭 스타일 */
  .list-filterbar {
    margin-bottom: 28px;
  }
  /* 구분선은 전체폭(양끝 붙음)이 아니라 콘텐츠 폭에 맞춰 인셋 — 탭 하단에 둔다 */
  .list-filterbar .tabs {
    border-bottom: 1px solid var(--line);
  }
  /* 2차 카테고리 탭: 마이 아카이브 탭처럼 활성 시 하단 볼드 라인 */
  .list-filterbar .tabs .tab {
    position: relative;
    padding-bottom: 14px;
  }
  .list-filterbar .tabs .tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--fg);
  }
  .list-filterbar:has(#catFilter:empty) { display: none; }
  /* 카테고리 모드: 탭 아래 구분선(filterbar border-bottom)이 이미 있으므로
     list-section의 위쪽 구분선을 제거해 '두 줄'이 겹쳐 보이지 않게 한다 */
  .list-filterbar:not(:has(#catFilter:empty)) ~ .list-section .list-rows { border-top: none; padding-top: 0; }
  /* BACK 링크는 카테고리 모드(?cat=)에서 상단에만 노출 — 하단 BACK은 제거 */
  .list-back-top, .list-back-bottom { display: none; }
  .list-view.cat-mode .list-back-top { display: inline-flex; margin-bottom: 22px; }
  .series-empty {
    padding: 60px 0; text-align: center;
    color: var(--muted); font-size: 14px;
  }
  .cat-chip {
    padding: 7px 15px; border-radius: 999px;
    border: 1px solid var(--border, rgba(0,0,0,0.14));
    background: transparent; color: var(--fg);
    font-size: 13px; font-family: inherit; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .cat-chip:hover { background: var(--hover); }
  .cat-chip.active {
    background: var(--fg); color: var(--bg); border-color: var(--fg);
  }
  .theme-toggle .ico-sun { display: none; }
  body.dark .theme-toggle .ico-moon { display: none; }
  body.dark .theme-toggle .ico-sun { display: inline-block; }
  .menu-toggle { display: inline-flex; }

  /* Mobile drawer */
  .drawer {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.4,0,.2,1), visibility .3s;
  }
  .drawer.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .drawer-inner {
    transform: translateY(12px);
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .drawer.open .drawer-inner {
    transform: translateY(0);
  }
  .drawer-inner {
    display: flex; flex-direction: column; height: 100%;
    padding: 0 48px;
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
  }
  .drawer-top {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
  }
  .drawer-top .logo { font-size: 14px; }
  .drawer-nav {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
    padding-top: 40px;
  }
  .drawer-nav a {
    font-size: 28px; font-weight: 500; letter-spacing: -0.025em;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    color: var(--fg);
  }
  .drawer-nav .nav-soon {
    font-size: 28px; font-weight: 500; letter-spacing: -0.025em;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    color: var(--muted);
    cursor: default; pointer-events: none;
  }
  .drawer-foot {
    padding: 24px 0 36px;
    display: flex; gap: 8px;
  }
  .drawer-foot button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--hover);
    color: var(--fg);
    font-size: 13px;
  }
  .drawer-foot button:hover { background: var(--hover-strong); }

  /* ========== Page header ========== */
  .page-head {
    padding: 56px 0 32px;
  }
  .page-head h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500; letter-spacing: -0.035em; line-height: 1.1;
    margin-bottom: 12px;
  }
  .page-head p {
    font-size: 14px; color: var(--muted);
  }

  /* ========== Filter bar ========== */
  .filterbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 18px 0;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 68px;
    background: var(--bg);
    z-index: 40;
  }
  .tabs {
    display: flex; gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .filterbar-hint { display: none; }
  .tab {
    flex-shrink: 0;
    font-size: 13px; font-weight: 400;
    color: var(--muted);
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color .15s;
    padding: 0;
  }
  .tab:hover { color: var(--fg); }
  .tab.active { color: var(--fg); font-weight: 600; }

  .sort {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--muted);
    cursor: pointer;
  }
  .sort:hover { color: var(--fg); }

  /* ========== Featured hero ========== */
  /* hero 미설정 시 — 아주 연한 회색 플레이스홀더 (영역 유지) */
  .carousel.carousel-empty { background: transparent; }
  .carousel-placeholder {
    width: 100%; aspect-ratio: 16 / 9;
    background: #f2f2f2; border-radius: 4px;
  }
  body.dark .carousel-placeholder { background: rgba(255,255,255,0.05); }
  .featured {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 80px;
    cursor: pointer;
    background: #111;
  }
  .featured-thumb {
    position: absolute; inset: 0;
  }
  .featured-thumb picture { display: block; width: 100%; height: 100%; }
  .featured-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
  }
  .featured:hover .featured-thumb img { transform: scale(1.04); }
  .featured-overlay {
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 38%, rgba(0,0,0,0) 68%);
  }
  .featured-top {
    position: absolute; top: 36px; left: 40px; right: 40px;
    display: flex; justify-content: space-between; align-items: center;
    color: rgba(255,255,255,0.85);
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  }
  .featured-top .badge {
    display: inline-flex; align-items: center; gap: 10px;
  }
  .featured-top .badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
  }
  .featured-bottom {
    position: absolute; bottom: 96px; left: 40px; right: 40px;
    color: #fff;
  }
  .featured-meta {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 22px;
    display: flex; align-items: center; gap: 14px;
  }
  .featured-meta .divider {
    width: 24px; height: 1px; background: rgba(255,255,255,0.4);
  }
  .featured-title {
    font-size: clamp(30px, 4.2vw, 60px);
    font-weight: 500; letter-spacing: -0.035em; line-height: 1.05;
    margin-bottom: 20px;
    max-width: 760px;
  }
  .featured-excerpt {
    font-size: 15px; line-height: 1.7;
    color: rgba(255,255,255,0.82);
    max-width: 560px;
    margin-bottom: 28px;
  }
  .featured-cta {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: #fff;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    transition: border-color .25s, gap .25s;
  }
  .featured:hover .featured-cta {
    border-color: #fff;
    gap: 14px;
  }

  /* ========== Carousel ========== */
  .carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
    background: #111;
  }
  .carousel-track {
    display: flex;
    transition: transform .9s cubic-bezier(.7,0,.2,1);
    will-change: transform;
  }
  .carousel-slide {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  .carousel-controls {
    position: absolute;
    bottom: 32px; left: 40px; right: 40px;
    display: flex; align-items: center; gap: 24px;
    z-index: 10;
    color: #fff;
  }
  .carousel-nav {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
  }
  .carousel-counter {
    font-size: 13px; font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #fff;
    min-width: 44px; text-align: center;
    letter-spacing: 0.02em;
  }
  .carousel-counter .slash { color: rgba(255,255,255,0.45); margin: 0 5px; }
  .carousel-counter .total { color: rgba(255,255,255,0.55); }
  .carousel-arrow {
    width: 26px; height: 26px;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.75);
    transition: color .2s;
    padding: 0;
  }
  .carousel-arrow:hover { color: #fff; }
  .carousel-progress {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.22);
    position: relative;
    overflow: hidden;
  }
  .carousel-progress-bar {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: #fff;
    width: 0%;
    transition: none;
  }
  .carousel-progress-bar.run {
    transition: width 7s linear;
    width: 100%;
  }
  .carousel-playpause {
    width: 26px; height: 26px;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.75);
    transition: color .2s;
    flex-shrink: 0;
    padding: 0;
  }
  .carousel-playpause:hover { color: #fff; }

  /* ===== Video slide ===== */
  .video-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    z-index: 4;
    pointer-events: none;
    transition: background .35s, transform .35s, border-color .35s;
  }
  .video-play-btn i { margin-left: 4px; font-size: 22px; }
  .carousel-slide:hover .video-play-btn {
    background: rgba(255,255,255,0.22);
    transform: translate(-50%, -50%) scale(1.06);
    border-color: #fff;
  }

  /* ===== Video Modal ===== */
  .video-modal {
    position: fixed; inset: 0;
    background: rgba(10,10,10,0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1000;
    display: none;
    align-items: center; justify-content: center;
    padding: 40px;
  }
  .video-modal.open { display: flex; animation: fadeIn .25s ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .video-modal-inner {
    width: 100%; max-width: 1100px;
    position: relative;
  }
  .video-player {
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
    overflow: hidden;
  }
  .video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }
  .video-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px;
    color: rgba(255,255,255,0.55);
    background:
      radial-gradient(ellipse at center, rgba(40,40,40,0.6) 0%, rgba(0,0,0,0.95) 75%);
  }
  .video-placeholder .play-ring {
    width: 84px; height: 84px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
  }
  .video-placeholder .play-ring i { margin-left: 4px; }
  .video-placeholder .ph-meta {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }
  .video-close {
    position: fixed; top: 28px; right: 32px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    z-index: 1001;
    transition: background .2s;
  }
  .video-close:hover { background: rgba(255,255,255,0.18); }
  .video-modal-meta {
    margin-top: 24px;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 20px; flex-wrap: wrap;
    color: #fff;
  }
  .video-modal-title {
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  }
  .video-modal-sub {
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
  }
  .video-modal-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    align-items: center;
  }
  .video-modal-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: 0.04em; font-weight: 500;
    color: #0a0a0a; background: #fff;
    border: 1px solid #fff;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, color .2s;
    flex-shrink: 0;
  }
  .video-modal-cta:hover { background: rgba(255,255,255,0.85); }
  .video-modal-cta i { font-size: 12px; }
  .video-fallback-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 9px 16px;
    border-radius: 999px;
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
  }
  .video-fallback-link:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
  }
  .video-fallback-link i { font-size: 10px; }

  @media (max-width: 900px) {
    .video-play-btn { width: 60px; height: 60px; }
    .video-modal { padding: 20px; }
    .video-close { top: 16px; right: 16px; width: 36px; height: 36px; }
    .video-modal-title { font-size: 17px; }
  }

  /* ========== Article grid ========== */
  .grid-section { padding-bottom: 100px; }
  .grid-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 32px;
  }
  .grid-head h2 {
    font-size: 13px; font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .grid-head a {
    font-size: 12px; color: var(--muted); letter-spacing: 0.08em;
  }

  .article-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  }
  .article-grid .card.dim { opacity: 0.55; }
  .article-grid .card.dim:hover { opacity: 0.75; }
  .home-loadmore { display: flex; justify-content: center; margin-top: 28px; }
  .home-loadmore[hidden] { display: none; }
  .home-loadmore-btn {
    appearance: none; cursor: pointer; font-family: inherit;
    padding: 12px 36px; font-size: 13px; letter-spacing: 0.08em;
    color: var(--fg); background: transparent;
    border: 1px solid var(--border, rgba(0,0,0,0.18)); border-radius: 999px;
    transition: background 0.15s, color 0.15s;
  }
  .home-loadmore-btn:hover { background: var(--fg); color: var(--bg); }

  /* 이어보기(CONTINUE READING) 스트립 */
  .resume-section[hidden] { display: none; }
  .resume-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  }
  .resume-card {
    display: flex; gap: 14px; align-items: stretch; cursor: pointer;
    padding: 12px; border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 14px; background: var(--card-bg, rgba(0,0,0,0.015));
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .resume-card:hover {
    border-color: rgba(0,0,0,0.3); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  }
  .resume-thumb {
    position: relative; flex: 0 0 84px; width: 84px; height: 84px;
    border-radius: 10px; overflow: hidden; background: #e9e9e9;
  }
  .resume-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .resume-thumb--empty {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#d8d8d8,#efefef);
  }
  .resume-pct {
    position: absolute; left: 6px; bottom: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    color: #fff; background: rgba(0,0,0,0.62);
    padding: 2px 6px; border-radius: 999px;
  }
  .resume-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
  .resume-cat { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
  .resume-title {
    font-size: 14px; font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .resume-track { height: 3px; border-radius: 999px; background: rgba(0,0,0,0.1); overflow: hidden; }
  .resume-bar { height: 100%; background: var(--fg); border-radius: 999px; }
  .resume-action { font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; }
  @media (max-width: 900px) {
    .resume-row { grid-template-columns: 1fr; gap: 12px; }
  }

  .card {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    cursor: pointer;
    background: #222;
  }
  .card-thumb {
    position: absolute; inset: 0;
  }
  .card-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.7,.2,1);
    filter: brightness(0.85); /* 콘텐츠 썸네일 약 15% 어둡게 */
  }
  .card:hover .card-thumb img { transform: scale(1.05); }
  /* 영상 콘텐츠 표시 — 썸네일 우측 상단 픽토그램 */
  .card-video-badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 3;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff; font-size: 12px;
    pointer-events: none;
  }
  .card-video-badge i { font-size: 13px; }
  /* 인기 콘텐츠 표시 — 썸네일 우측 하단 불꽃 픽토그램 (조회수 앞 아이콘 대체) */
  .card-hot-badge {
    position: absolute;
    bottom: 14px; right: 14px;
    z-index: 3;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    pointer-events: none;
  }
  .card-hot-badge i { font-size: 22px; }
  /* 인기 순위 뱃지 — 썸네일 좌측 상단 */
  /* 인기글 순위: 우측에 우아한 세리프 이탤릭 숫자를 워터마크처럼 표시 (텍스트 뒤) */
  .card-rank {
    position: absolute;
    top: 50%; right: 18px;
    transform: translateY(-54%);
    z-index: 1;
    font-family: Georgia, 'Times New Roman', 'Noto Serif KR', serif;
    font-style: italic;
    font-size: clamp(62px, 9vw, 104px);
    font-weight: 500;
    line-height: 1;
    color: rgba(255,255,255,0.16);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    user-select: none;
  }
  .card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%);
  }
  .card-top {
    position: absolute; top: 18px; left: 20px; right: 20px;
    z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    color: rgba(255,255,255,0.85);
  }
  .card-cat {
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(255,255,255,0.9);
  }
  /* 시리즈 표시용 "Series" 라벨 */
  .card-cat-series {
    display: inline-block; margin-right: 7px;
    font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase;
  }
  .card-bottom {
    position: absolute; bottom: 22px; left: 20px; right: 20px;
    z-index: 2;
    color: #fff;
  }
  .card-title {
    font-size: 17px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3;
    margin-bottom: 6px;
  }
  .card-sub {
    font-size: 12px; font-weight: 400; line-height: 1.4;
    letter-spacing: -0.005em;
    color: rgba(255,255,255,0.72);
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.4em; /* 서브타이틀 미입력 시에도 한 줄 공간 예약 → 헤드타이틀 위치 고정 */
  }
  .card-meta {
    font-size: 11px; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
  }
  .card-readtime {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.78);
  }
  .card-readtime i { font-size: 10px; opacity: 0.8; }

  /* placeholder cards */
  .ph {
    background: linear-gradient(135deg,#1a1a1a 0%,#3a3a3a 100%);
  }
  .ph.light {
    background: linear-gradient(135deg,#3d3a33 0%,#5a554b 100%);
  }

  /* ========== Footer ========== */
  .footer {
    border-top: 1px solid var(--line);
    padding: 40px 0 32px;
    font-size: 12px; color: var(--muted);
  }
  .footer-top {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 32px;
  }
  .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: 12px;
    font-size: 11px; letter-spacing: 0.06em;
  }
  .footer-bottom .brand-link { cursor: pointer; transition: color .2s; }
  .footer-bottom .brand-link:hover { color: var(--fg); }
  .footer-legal { display: inline-flex; gap: 16px; }
  .footer-legal a { color: var(--muted); transition: color .2s; }
  .footer-legal a:hover { color: var(--fg); }
  .notice-ticker {
    display: flex; align-items: center; gap: 14px;
    font-size: 12px; color: var(--muted);
    flex: 1; min-width: 0;
  }
  .notice-ticker .meta-label { color: var(--fg); flex-shrink: 0; }
  .ticker-track {
    position: relative;
    height: 20px;
    overflow: hidden;
    flex: 1; min-width: 0;
  }
  .ticker-item {
    position: absolute; inset: 0;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s;
    display: flex; align-items: center; gap: 12px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    opacity: 0;
  }
  .ticker-item.active {
    transform: translateY(0);
    opacity: 1;
  }
  .ticker-item.leaving {
    transform: translateY(-100%);
    opacity: 0;
  }
  .t-date {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--fg);
    flex-shrink: 0;
  }
  .t-text {
    color: var(--muted);
    overflow: hidden; text-overflow: ellipsis;
  }
  .footer-links { display: flex; gap: 24px; }
  .footer-links a { font-size: 13px; }
  .footer-links a:hover { color: var(--fg); }

  /* ========== Quote widget ========== */
  .quote-widget {
    padding: 96px 0;
    border-top: 1px solid var(--line);
  }
  .quote-widget .qw-text {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.25;
    max-width: 920px;
    margin-bottom: 28px;
  }
  .quote-widget .qw-text strong { font-weight: 600; }
  .quote-widget .qw-attr {
    font-size: 11px; letter-spacing: 0.2em; color: var(--muted);
    text-transform: uppercase;
  }

  /* ========== Home Notes section ========== */
  .home-notes {
    padding: 80px 0;
    border-top: 1px solid var(--line);
  }
  .notes-preview {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  }
  .notes-preview .note-item {
    display: block;
    padding: 24px 32px;
    border-left: 1px solid var(--line);
    transition: background .2s;
  }
  .notes-preview .note-item:first-child { padding-left: 0; border-left: none; }
  .notes-preview .note-item:hover { background: var(--hover); }
  .notes-preview .note-date {
    font-size: 11px; letter-spacing: 0.18em; color: var(--muted);
    margin-bottom: 12px;
  }
  .notes-preview .note-text {
    font-size: 14px; line-height: 1.65;
    color: var(--body);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ========== Home Curation ========== */
  .home-curation {
    padding: 80px 0 120px;
    border-top: 1px solid var(--line);
  }
  .grid-head-meta {
    font-size: 11px; letter-spacing: 0.2em; color: var(--muted);
  }
  .curation-list {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
  }
  .curation-item {
    display: block;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    transition: padding-top .2s;
  }
  .curation-item:hover { padding-top: 16px; }
  .cur-meta {
    font-size: 11px; letter-spacing: 0.16em; color: var(--muted);
    margin-bottom: 14px;
  }
  .cur-title {
    font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .cur-comment {
    font-size: 13px; color: var(--muted); line-height: 1.65;
  }

  /* ========== Upcoming / Pre-release card on home ========== */
  .upcoming-section {
    padding: 24px 0 120px;
    border-top: 1px solid var(--line);
  }
  .upcoming-section .grid-head { margin-top: 56px; margin-bottom: 32px; }
  .upcoming-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  /* Upcoming card — 콘텐츠/오피니언 카드와 동일한 16:9 비율, 회색 톤 */
  .card.upcoming-card {
    aspect-ratio: 16 / 9;
    background: var(--hover);
    border: 1px solid transparent;
    transition: background .25s, border-color .25s;
  }
  .upcoming-card:hover {
    background: var(--hover-strong);
  }
  .upcoming-card .card-thumb,
  .upcoming-card .card-overlay { display: none; }
  .upcoming-card .card-cat { color: var(--muted); }
  .upcoming-card .card-title { color: var(--fg); }
  .upcoming-card .card-sub { color: var(--muted); }
  .upcoming-card .card-meta { color: var(--muted); }
  /* 예약 공개 대기 — 옅게 처리하고 클릭 불가 */
  .upcoming-card.is-locked {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
  }
  .upcoming-card.is-locked:hover { background: var(--hover); }
  /* 예약 발행(SCHEDULED) 미러 — '곧 공개되는 일반 콘텐츠'.
     프리릴리즈(회색 텍스트 박스)와 달리 실제 썸네일을 보여주되,
     아직 공개 전이라 색을 빼고(그레이스케일) 옅게 처리한다. */
  .upcoming-card.is-teaser .card-thumb,
  .upcoming-card.is-prerelease .card-thumb { display: block; }
  .upcoming-card.is-teaser .card-overlay,
  .upcoming-card.is-prerelease .card-overlay { display: block; }
  .upcoming-card.is-teaser .card-thumb img {
    filter: grayscale(1) contrast(0.95) brightness(1.04);
  }
  /* 프리릴리즈는 선명한 썸네일(색 유지) */
  .upcoming-card.is-prerelease .card-thumb img { filter: none; }
  .upcoming-card.is-teaser .card-title,
  .upcoming-card.is-teaser .card-sub,
  .upcoming-card.is-teaser .card-cat,
  .upcoming-card.is-teaser .card-meta,
  .upcoming-card.is-prerelease .card-title,
  .upcoming-card.is-prerelease .card-sub,
  .upcoming-card.is-prerelease .card-cat,
  .upcoming-card.is-prerelease .card-meta { color: #fff; }
  .upcoming-card.is-teaser .upcoming-countdown,
  .upcoming-card.is-prerelease .upcoming-countdown { color: #fff; }
  /* 프리릴리즈 카드는 썸네일이 있으므로 호버 시 배경 변화 불필요 */
  .upcoming-card.is-prerelease:hover { background: var(--hover); }
  /* '프리릴리즈' 뱃지 — 썸네일 우측 상단 */
  .upcoming-card .card-thumb { position: relative; }
  .upcoming-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(2px);
  }
  .upcoming-countdown {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }

  /* Pre-release badge */
  .pr-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 500;
    background: var(--hover);
    color: var(--fg);
    border: none;
  }
  .pr-badge i { font-size: 9px; }
  .prerelease-banner .pr-banner-badge { color: var(--fg); }

  /* ========== Pre-release article page ========== */
  .prerelease-banner {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
    padding: 8px 14px;
    background: var(--hover);
    border-radius: 999px;
  }
  .pr-banner-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fg); font-weight: 600;
  }
  .pr-banner-badge i { font-size: 10px; }
  .pr-banner-date {
    font-size: 11px; letter-spacing: 0.1em;
    color: var(--muted);
  }
  .prerelease-outline {
    margin: 48px 0;
    padding: 32px;
    background: var(--card);
    border: 1px solid var(--line);
  }
  .pr-outline-head {
    display: flex; align-items: baseline; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .pr-outline-head .meta-label { color: var(--fg); }
  .pr-outline-sub {
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.02em;
  }
  .pr-outline-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 18px;
  }
  .pr-outline-list li {
    display: flex; gap: 16px; align-items: flex-start;
  }
  .pr-ol-num {
    font-size: 14px; color: var(--muted);
    flex-shrink: 0;
    padding-top: 2px;
  }
  .pr-ol-title {
    font-size: 15px; font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
    color: var(--fg);
  }
  .pr-ol-desc {
    font-size: 13px; color: var(--muted);
    line-height: 1.55;
  }
  .prerelease-note {
    margin: 40px 0 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--muted);
  }

  /* Pre-release actions — same row style as reactions */
  .prerelease-actions {
    padding: 56px 0 96px;
    border-top: 1px solid var(--line);
  }
  .prerelease-actions .meta-label {
    display: block;
    margin-bottom: 18px;
  }
  .pr-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pr-submit-reaction .r-arrow {
    font-size: 14px;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }
  .pr-submit-reaction:hover .r-arrow { opacity: 0.75; }
  .pr-cheer-reaction.cheered {
    background: var(--fg);
    color: var(--bg);
  }
  .pr-cheer-reaction.cheered::before {
    content: '\f004';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #e63946;
    margin-right: 2px;
    font-size: 12px;
  }
  .pr-cheer-reaction.cheered .r-count { opacity: 0.75; }

  /* ===== 프리릴리즈 — 작성 중인 목차 박스 (v2: Firestore 렌더 경로) ===== */
  .prerelease-outline .outline-head {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line, rgba(0,0,0,0.06));
    flex-wrap: wrap;
  }
  .prerelease-outline .outline-label {
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .prerelease-outline .outline-note {
    font-size: 12px;
    color: var(--muted);
  }
  .prerelease-outline .outline-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 18px;
  }
  .prerelease-outline .outline-list li {
    display: grid; grid-template-columns: 32px 1fr; gap: 14px;
    align-items: start;
  }
  .prerelease-outline .outline-num {
    font-size: 13px; color: var(--muted);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
  }
  .prerelease-outline .outline-item-title {
    font-size: 15px; font-weight: 500; line-height: 1.5;
    margin-bottom: 4px;
    color: var(--fg);
  }
  .prerelease-outline .outline-item-desc {
    font-size: 13px; line-height: 1.7; color: var(--muted);
  }

  /* 단편 인텐트 */
  .prerelease-intent {
    margin: 32px 0;
    font-size: 15px; line-height: 1.8;
    color: var(--fg);
  }

  /* 발행된 글 상단의 '이 콘텐츠는' 흰색 박스 (프리릴리즈 단계의 intent를 노출) */
  .article-intent-box {
    margin: 4px 0 30px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.05);
  }
  .article-intent-box .intent-box-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: #9a9a9a;
  }
  .article-intent-box .intent-box-text {
    margin: 0;
    font-size: 15px; line-height: 1.75;
    color: #222;
  }
  body.dark .article-intent-box { border-color: #e2e2e2; }

  /* 종결 메시지 */
  .prerelease-closing {
    margin: 40px 0 24px;
    font-size: 14px; line-height: 1.9;
    color: var(--muted);
  }

  /* Contribute Modal */
  .contribute-modal {
    position: fixed; inset: 0; z-index: 970;
    background: rgba(10,10,10,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .25s;
  }
  body.dark .contribute-modal { background: rgba(0,0,0,0.7); }
  .contribute-modal.open { display: flex; opacity: 1; }
  .contribute-modal-inner {
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 40px 36px 32px;
    position: relative;
    transform: translateY(8px);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .contribute-modal.open .contribute-modal-inner { transform: translateY(0); }
  .contribute-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%; border: none;
    background: transparent;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .contribute-close:hover { background: var(--hover); color: var(--fg); }
  .contribute-head { text-align: center; margin-bottom: 28px; }
  .contribute-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--hover);
    color: var(--fg);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    font-size: 18px;
  }
  .contribute-title {
    font-size: 19px; font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .contribute-sub {
    font-size: 13px; color: var(--muted);
    line-height: 1.6;
  }
  .contribute-form {
    display: flex; flex-direction: column; gap: 16px;
  }
  .contribute-field { display: flex; flex-direction: column; gap: 6px; }
  .contribute-field label {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
  }
  .contribute-field .required { color: var(--fg); }
  .contribute-field input[type="text"],
  .contribute-field input[type="url"],
  .contribute-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    font-family: inherit; font-size: 13.5px;
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color .2s;
    resize: vertical;
  }
  .contribute-field input:focus,
  .contribute-field textarea:focus { border-color: var(--fg); }
  .contribute-field input::placeholder,
  .contribute-field textarea::placeholder { color: var(--muted); }
  .contribute-type-row {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding-top: 4px;
  }
  .contribute-radio {
    font-size: 13px;
    color: var(--fg);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: -0.005em;
  }
  .contribute-radio input { margin: 0; accent-color: var(--fg); }
  .contribute-checkbox label {
    font-size: 12px; letter-spacing: -0.005em;
    color: var(--muted);
    text-transform: none;
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer;
  }
  .contribute-checkbox input { accent-color: var(--fg); }
  .contribute-submit {
    margin-top: 6px;
    padding: 14px;
    border: none;
    background: var(--fg);
    color: var(--bg);
    font-size: 13.5px; font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity .2s;
  }
  .contribute-submit:hover { opacity: 0.85; }

  @media (max-width: 900px) {
    .upcoming-grid { grid-template-columns: 1fr; }
    .upcoming-section { padding: 0 0 80px; }
    .upcoming-section .grid-head { margin-top: 40px; }

    .prerelease-outline { padding: 22px; margin: 32px 0; }
    .prerelease-outline .outline-item-title { font-size: 14px; }
    .prerelease-outline .outline-item-desc { font-size: 12.5px; }
    .prerelease-intent { font-size: 14px; margin: 28px 0; }
    .prerelease-closing { font-size: 13px; margin: 32px 0 0; }
    .prerelease-note { font-size: 12.5px; margin: 28px 0 0; }
    .prerelease-actions { padding: 40px 0 64px; }
    .pr-action-row { gap: 6px; }
    .contribute-modal-inner { padding: 32px 24px 24px; }
  }

  /* ========== Content gating (non-logged-in) ========== */
  .gate-cta { display: none; }
  body:not(.logged-in) .gate-cta { display: block; }
  body:not(.logged-in) .article-body {
    max-height: 720px;
    overflow: hidden;
    position: relative;
    padding-bottom: 0;
  }
  body:not(.logged-in) .article-body::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 280px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 85%);
    pointer-events: none;
  }
  /* Free article + pre-release bypass — fully open to everyone */
  body:not(.logged-in) .article-content[data-free="true"] .article-body,
  body:not(.logged-in) .article-content[data-prerelease="true"] .article-body {
    max-height: none;
    overflow: visible;
  }
  body:not(.logged-in) .article-content[data-free="true"] .article-body::after,
  body:not(.logged-in) .article-content[data-prerelease="true"] .article-body::after { display: none; }
  body:not(.logged-in) .article-content[data-free="true"] .gate-cta,
  body:not(.logged-in) .article-content[data-prerelease="true"] .gate-cta { display: none; }

  /* 영상 임베드 여백 — 위 패딩은 본문 상단(72px)에서 25% 줄이고(-18px), 아래는 100px */
  .article-video-embed { margin: -18px 0 100px; }

  /* 독자 전용 영상 — 비로그인 시 재생 차단 + 잠금 안내 오버레이 */
  .article-video-embed .av-lock { display: none; }
  body:not(.logged-in) .article-content:not([data-free="true"]):not([data-prerelease="true"]) .av-lock {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0; z-index: 3; border-radius: 8px; overflow: hidden;
  }
  /* 잠금 포스터 — iframe을 아예 렌더하지 않은 정적 잠금 화면(재생 자체 불가) */
  .article-video-embed .av-lock--static {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0; z-index: 3; border-radius: 8px; overflow: hidden;
  }
  .av-lock-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.38); }
  .av-lock-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: #fff; text-align: center; padding: 20px;
  }
  .av-lock-inner svg { width: 30px; height: 30px; opacity: .92; }
  .av-lock-inner .av-lock-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
  .av-lock-inner .av-lock-sub { font-size: 12.5px; opacity: .8; }

  /* 모바일 이어재생 "소리 켜기" 오버레이 — 음소거 자동재생 후 탭으로 소리 켜기 */
  .av-unmute {
    position: absolute; left: 12px; bottom: 12px; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px 9px 12px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(0,0,0,0.72); color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: opacity .25s ease, transform .25s ease;
  }
  .av-unmute svg { width: 18px; height: 18px; }
  .av-unmute--gone { opacity: 0; transform: translateY(6px); pointer-events: none; }

  /* Free / Open badge — outline only with unlock icon */
  .card-free, .featured-free {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px 5px 9px;
    background: transparent;
    color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border-radius: 999px;
    line-height: 1;
    flex-shrink: 0;
  }
  .card-free i, .featured-free i {
    font-size: 10px;
    line-height: 1;
  }
  .featured-free {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 6px 12px 6px 10px;
    font-size: 10.5px;
  }
  .featured-free i { font-size: 11px; }

  .gate-cta {
    padding: 8px 0 80px;
  }
  .gate-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 56px 36px;
    border: 1px solid var(--line);
    background: var(--card);
    text-align: center;
  }
  .gate-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--hover);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    color: var(--muted);
  }
  .gate-title {
    font-size: 20px; font-weight: 500; letter-spacing: -0.025em;
    line-height: 1.3;
    margin-bottom: 16px;
    color: var(--fg);
  }
  .gate-sub {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 30px;
  }
  .gate-actions {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  }
  .gate-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px;
    font-size: 12.5px; font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--fg);
    cursor: pointer;
    transition: opacity .2s, background .2s, color .2s;
    text-decoration: none;
  }
  .gate-btn.primary {
    background: var(--fg); color: var(--bg);
  }
  .gate-btn.primary:hover { opacity: 0.85; }
  .gate-btn.ghost {
    background: transparent; color: var(--fg);
  }
  .gate-btn.ghost:hover { background: var(--fg); color: var(--bg); }

  /* ========== Confirm Modal ========== */
  .confirm-modal {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(10,10,10,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .25s;
  }
  body.dark .confirm-modal { background: rgba(0,0,0,0.65); }
  .confirm-modal.open { display: flex; opacity: 1; }
  .confirm-modal-inner {
    width: 100%; max-width: 360px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 36px 32px 28px;
    text-align: center;
    transform: translateY(8px);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .confirm-modal.open .confirm-modal-inner { transform: translateY(0); }
  .confirm-icon {
    font-size: 26px;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1;
  }
  .confirm-title {
    font-size: 17px; font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--fg);
  }
  .confirm-msg {
    font-size: 13px; color: var(--muted);
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .sys-prompt-input {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.6;
    font-family: inherit;
    color: var(--fg);
    background: var(--bg-soft, var(--bg));
    border: 1px solid var(--line);
    border-radius: 8px;
    resize: vertical;
    box-sizing: border-box;
  }
  .sys-prompt-input:focus {
    outline: none;
    border-color: var(--muted);
  }
  .confirm-actions {
    display: flex; gap: 8px;
  }
  .confirm-btn {
    flex: 1;
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .confirm-btn.ghost:hover {
    background: var(--hover);
    border-color: var(--muted);
  }
  .confirm-btn.primary {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }
  .confirm-btn.primary:hover { opacity: 0.85; }

  /* ========== Login Modal ========== */
  .login-modal {
    position: fixed; inset: 0; z-index: 950;
    background: rgba(10,10,10,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .25s;
  }
  body.dark .login-modal { background: rgba(0,0,0,0.7); }
  .login-modal.open { display: flex; opacity: 1; }
  .login-modal-inner {
    width: 100%; max-width: 400px;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 56px 40px 40px;
    position: relative;
    text-align: center;
    transform: translateY(8px);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .login-modal.open .login-modal-inner { transform: translateY(0); }
  .login-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: color .2s, background .2s;
  }
  .login-close:hover { background: var(--hover); color: var(--fg); }
  .login-brand {
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
  }
  .login-brand img {
    height: 26px; width: auto; display: block;
  }
  .login-brand .logo-white { display: none; }
  body.dark .login-brand .logo-black { display: none; }
  body.dark .login-brand .logo-white { display: block; }
  .login-title {
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: var(--fg);
  }
  .login-sub {
    font-size: 13px; color: var(--muted); line-height: 1.6;
    margin-bottom: 28px;
  }
  .login-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 18px;
  }
  .login-form input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    font-size: 13.5px;
    font-family: inherit;
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color .2s;
  }
  .login-form input:focus { border-color: var(--fg); }
  .login-form input::placeholder { color: var(--muted); }
  .login-submit {
    height: 44px;
    margin-top: 4px;
    border: none;
    background: var(--fg);
    color: var(--bg);
    font-size: 13.5px; font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: opacity .2s;
  }
  .login-submit:hover { opacity: 0.85; }
  .login-agree {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
    text-align: left; cursor: pointer; margin-top: 2px;
  }
  .login-agree input {
    margin: 2px 0 0; flex: none; width: 15px; height: 15px;
    accent-color: var(--fg); cursor: pointer;
  }
  .login-agree a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
  .login-agree a:hover { color: var(--muted); }
  .login-agree .login-agree-req { color: var(--muted); opacity: 0.8; }
  /* 비밀번호 규칙 안내 (회원가입) */
  .login-pw-hint {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    list-style: none; margin: -2px 2px 0; padding: 0;
    text-align: left;
  }
  .login-pw-hint li {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--muted);
    letter-spacing: -0.01em; transition: color .2s;
  }
  .login-pw-hint .pw-dot {
    width: 13px; height: 13px; flex: none; border-radius: 50%;
    border: 1px solid var(--line); position: relative; transition: all .2s;
  }
  .login-pw-hint li.ok { color: var(--fg); }
  .login-pw-hint li.ok .pw-dot { background: var(--fg); border-color: var(--fg); }
  .login-pw-hint li.ok .pw-dot::after {
    content: ''; position: absolute; left: 4px; top: 1.5px;
    width: 3px; height: 6px; border: solid var(--bg);
    border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  }
  .login-pw-match {
    font-size: 11.5px; letter-spacing: -0.01em;
    text-align: left; margin: -2px 2px 0;
  }
  .login-pw-match.ok { color: #1a8f4c; }
  .login-pw-match.err { color: #d23f3f; }
  /* 이메일 중복확인 (회원가입) */
  .login-email-row { display: flex; gap: 8px; align-items: stretch; }
  .login-email-row #loginEmail { flex: 1 1 auto; width: auto; min-width: 0; }
  .login-email-check {
    flex: none; height: 44px; padding: 0 14px;
    border: 1px solid var(--fg); background: transparent; color: var(--fg);
    font-size: 12.5px; font-family: inherit; letter-spacing: -0.01em;
    white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, opacity .2s;
  }
  .login-email-check:hover { background: var(--fg); color: var(--bg); }
  .login-email-check:disabled { opacity: 0.5; cursor: default; }
  .login-email-status {
    font-size: 11.5px; letter-spacing: -0.01em;
    text-align: left; margin: -2px 2px 0;
  }
  .login-email-status.ok { color: #1a8f4c; }
  .login-email-status.err { color: #d23f3f; }
  /* 아이디 저장 (로그인) */
  .login-remember {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
    text-align: left; cursor: pointer; margin-top: 2px;
  }
  .login-remember input {
    margin: 0; flex: none; width: 15px; height: 15px;
    accent-color: var(--fg); cursor: pointer;
  }
  .login-meta {
    font-size: 12px;
    color: var(--muted);
    display: flex; justify-content: center; gap: 10px; align-items: center;
  }
  .login-meta a { color: var(--fg); }
  .login-meta a:hover { color: var(--muted); }
  .login-meta-sep { color: var(--line); }

  @media (max-width: 900px) {
    body:not(.logged-in) .article-body { max-height: 520px; }
    .gate-inner { padding: 40px 24px; }
    .gate-title { font-size: 17px; }
    .gate-sub { font-size: 12.5px; margin-bottom: 24px; }
    .gate-btn { padding: 11px 18px; font-size: 12px; }
    .login-modal-inner { padding: 48px 28px 32px; }
    .login-title { font-size: 19px; }
  }

  /* ========== Page transition ========== */
  @keyframes pageFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  body[data-view="home"] .home-view,
  body[data-view="article"] .article-view,
  body[data-view="series"] .series-view,
  body[data-view="notes"] .notes-view,
  body[data-view="mypage"] .mypage-view,
  body[data-view="about"] .about-view,
  body[data-view="notice"] .notice-view,
  body[data-view="notices"] .notice-view,
  body[data-view="terms"] .notice-view,
  body[data-view="privacy"] .notice-view,
  body[data-view="list"] .list-view {
    animation: pageFade .45s cubic-bezier(.2,.7,.2,1);
  }
  .page-mask {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.4,0,.2,1);
  }
  .page-mask.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* ========== View Routing ========== */
  .article-view, .series-view, .notes-view, .mypage-view, .about-view, .notice-view, .list-view { display: none; }
  body:not([data-view="home"]) .home-view { display: none; }
  body[data-view="article"] .article-view,
  body[data-view="series"] .series-view,
  body[data-view="notes"] .notes-view,
  body[data-view="mypage"] .mypage-view,
  body[data-view="about"] .about-view,
  body[data-view="notice"] .notice-view,
  body[data-view="notices"] .notice-view,
  body[data-view="terms"] .notice-view,
  body[data-view="privacy"] .notice-view,
  body[data-view="list"] .list-view { display: block; }
  body[data-view="article"] .filterbar { display: none; }
  body[data-view="article"] .article-progress { display: block; }

  /* ========== Opinion result summary (종료 박제) ========== */
  .opinion-result {
    margin-top: 18px; padding: 20px 22px;
    border: 1px solid var(--fg, #1f2937); border-radius: 12px;
    background: var(--bg, #fff);
  }
  .opinion-result-label {
    font-size: 13px; font-weight: 600; color: var(--fg, #1f2937);
    margin-bottom: 16px; display: flex; align-items: center; gap: 7px;
  }
  .opinion-result-label i { font-size: 12px; }
  .opinion-result-stats { display: flex; gap: 14px; flex-wrap: wrap; }
  .opinion-result-stat {
    flex: 1; min-width: 92px;
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; border-radius: 9px;
    background: var(--hover, rgba(0,0,0,0.03));
  }
  .opinion-result-stat b {
    font-size: 22px; font-weight: 700; color: var(--fg, #1f2937);
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .opinion-result-stat span { font-size: 12px; color: var(--muted, #6b7280); }
  @media (max-width: 520px) {
    .opinion-result-stat b { font-size: 19px; }
  }

  .article-header { padding: 48px 0 32px; }
  .back-btn {
    display: flex; align-items: center; gap: 10px;
    width: fit-content;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 56px;
    transition: color .2s;
  }
  .back-btn:hover { color: var(--fg); }
  .article-cat {
    font-size: 10px; letter-spacing: 0.24em; color: var(--muted);
    text-transform: uppercase; margin-bottom: 24px;
  }
  /* 콘텐츠 헤더 공통: 일반/시리즈/영상/오디오 동일 위계 */
  .article-eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); font-weight: 700;
    margin-bottom: 4px;
  }
  .article-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pc-accent); flex: 0 0 auto; }
  .article-title {
    font-size: clamp(30px, 5.2vw, 50px);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.14;
    max-width: 960px; margin: 18px 0 0; word-break: keep-all;
  }
  .article-sub {
    font-size: 16px; line-height: 1.6; color: var(--muted);
    margin: 16px 0 0; max-width: 660px; word-break: keep-all;
  }
  .article-meta {
    display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
    margin-top: 28px;
    padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font-size: 12px; color: var(--muted); letter-spacing: 0.06em;
  }
  .article-meta strong { color: var(--fg); font-weight: 500; }
  .article-views {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--muted); font-variant-numeric: tabular-nums;
  }
  .article-views svg { opacity: 0.7; }
  .article-readtime {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--muted);
  }
  .article-readtime svg { opacity: 0.7; }
  .article-author {
    margin-left: auto;
    color: var(--fg); font-weight: 500;
    letter-spacing: 0.04em;
  }

  .article-body { padding: 72px 0; max-width: 720px; margin: 0 auto; }
  .article-lead {
    font-size: 21px; font-weight: 500; letter-spacing: -0.02em;
    line-height: 1.55; margin-bottom: 56px;
  }
  .article-body p {
    font-size: 16px; line-height: 1.85; color: var(--body);
    margin-bottom: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .article-image-full {
    margin: 56px -80px;
  }
  .article-image-full img { width: 100%; height: auto; }

  /* =========================================================
     #28 비주얼 에세이 템플릿 — 이미지 중심·큰 타이포 레이아웃
     article-content[data-layout="visual"] 일 때 본문을 넓고 시원하게.
     ========================================================= */
  .article-content[data-layout="visual"] .article-title { font-size: clamp(34px, 6vw, 62px); line-height: 1.08; }
  .article-content[data-layout="visual"] .article-body { max-width: 860px; padding-top: 88px; }
  .article-content[data-layout="visual"] .article-lead {
    font-size: 25px; line-height: 1.5; font-weight: 600; letter-spacing: -0.025em; color: var(--fg);
    margin-bottom: 64px;
  }
  .article-content[data-layout="visual"] .article-lead::first-letter {
    float: left; font-size: 76px; line-height: 0.82; font-weight: 800;
    padding: 6px 14px 0 0; color: var(--pc-accent, var(--fg));
  }
  .article-content[data-layout="visual"] .article-body p { font-size: 18px; line-height: 1.95; margin-bottom: 24px; }
  .article-content[data-layout="visual"] .article-body h2 {
    font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
    margin: 72px 0 20px; padding-top: 8px;
  }
  .article-content[data-layout="visual"] .article-body h3 {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 48px 0 14px;
  }
  .article-content[data-layout="visual"] .article-body img {
    width: 100%; height: auto; display: block; border-radius: 10px; margin: 8px 0;
  }
  .article-content[data-layout="visual"] .article-body figure { margin: 56px 0; }
  .article-content[data-layout="visual"] .article-body figure img { border-radius: 12px; }
  .article-content[data-layout="visual"] .article-body figcaption {
    margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center;
    letter-spacing: 0.01em; line-height: 1.6;
  }
  .article-content[data-layout="visual"] .article-body blockquote {
    margin: 56px 0; padding: 0 0 0 24px; border-left: 3px solid var(--pc-accent, var(--fg));
    font-size: 23px; line-height: 1.5; font-weight: 600; letter-spacing: -0.02em; color: var(--fg);
  }

  /* ===========================================================
     인라인 주석 호버 카드 (.anno / .anno-tip) — 용어/인용/각주
     본문 단어에 약한 점선 밑줄, 마우스오버·클릭 시 카드 표시.
     =========================================================== */
  .article-body .anno {
    border-bottom: 1px dashed var(--muted, #8A8A85);
    cursor: help;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
  }
  .article-body .anno:hover {
    border-bottom-color: var(--fg);
    background: color-mix(in srgb, var(--fg) 6%, transparent);
  }
  /* 유형별 점선 색 살짝 구분 */
  .article-body .anno-cite { border-bottom-style: dashed; }
  .article-body .anno-term { border-bottom-style: dotted; }
  .article-body .anno-note { border-bottom-style: dotted; }

  .anno-tip {
    position: fixed; z-index: 9000;
    left: 0; top: 0; max-width: 320px; width: max-content;
    box-sizing: border-box;
    padding: 13px 15px 14px;
    background: var(--card, #fff);
    color: var(--fg);
    border: 1px solid var(--line, #E6E5E0);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
    font-size: 14px; line-height: 1.6; letter-spacing: -0.01em;
    opacity: 0; transform: translateY(4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .anno-tip.show { opacity: 1; transform: translateY(0); }
  .anno-tip.pinned { pointer-events: auto; }
  .anno-tip-label {
    display: inline-block; font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted, #8A8A85); margin-bottom: 6px;
  }
  .anno-tip-term .anno-tip-label { color: #2f7d6b; }
  .anno-tip-cite .anno-tip-label { color: #8a6f2f; }
  .anno-tip-note .anno-tip-label { color: #5a6b8a; }
  .anno-tip-text { display: block; color: var(--body, var(--fg)); white-space: normal; }
  .anno-tip-src {
    display: block; margin-top: 9px; font-size: 12.5px;
    color: var(--muted, #8A8A85); text-decoration: none;
    white-space: normal; word-break: break-all;
  }
  .anno-tip-src.has-link { color: var(--fg); }
  .anno-tip-src.has-link:hover { text-decoration: underline; }
  /* 화살표 — 기본 아래쪽(카드가 단어 위) */
  .anno-tip-arrow {
    position: absolute; left: var(--ax, 50%); top: 100%;
    width: 0; height: 0; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 8px solid var(--card, #fff);
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.05));
  }
  .anno-tip.below .anno-tip-arrow {
    top: auto; bottom: 100%;
    border-top: none; border-bottom: 8px solid var(--card, #fff);
  }
  /* 다크 모드 */
  body.dark .anno-tip, html.dark .anno-tip { box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4); }
  body.dark .anno-tip-arrow, html.dark .anno-tip-arrow { border-top-color: var(--card); }
  body.dark .anno-tip.below .anno-tip-arrow, html.dark .anno-tip.below .anno-tip-arrow { border-bottom-color: var(--card); }
  body.dark .anno-tip-term .anno-tip-label, html.dark .anno-tip-term .anno-tip-label { color: #6fd3bd; }
  body.dark .anno-tip-cite .anno-tip-label, html.dark .anno-tip-cite .anno-tip-label { color: #d8b066; }
  body.dark .anno-tip-note .anno-tip-label, html.dark .anno-tip-note .anno-tip-label { color: #9fb0d8; }

  /* ===========================================================
     콘텐츠 포맷 템플릿 (.pf-*) — 에디터 '포맷 삽입'으로 생성되는 레이아웃
     본문(.article-body) 안에서 렌더링. 미리보기·공개 아티클 공통.
     =========================================================== */
  .article-body .pf { margin: 48px 0; }
  .article-body .pf-label {
    font-size: 12px; letter-spacing: 0.14em; font-weight: 700;
    text-transform: uppercase; color: var(--muted); margin: 0 0 18px;
  }
  .article-body .pf img { width: 100%; height: auto; display: block; border-radius: 6px; }

  /* 1. 인터뷰 */
  .article-body .pf-person {
    display: flex; gap: 16px; align-items: center; margin: 0 0 36px;
  }
  .article-body .pf-avatar {
    width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
    object-fit: cover; background: var(--line);
  }
  .article-body .pf-who b { display: block; font-size: 16px; }
  .article-body .pf-who span { font-size: 13px; color: var(--muted); }
  .article-body .pf-qa { margin: 0 0 28px; }
  .article-body .pf-q {
    font-size: 18px; font-weight: 700; line-height: 1.6; margin: 0 0 12px;
  }
  .article-body .pf-q::before { content: 'Q. '; color: var(--muted); }
  .article-body .pf-a {
    font-size: 16px; line-height: 1.85; margin: 0; padding-left: 22px;
    border-left: 2px solid var(--line);
  }
  .article-body .pf-pullquote {
    border: none; border-left: 3px solid var(--fg);
    padding: 6px 0 6px 22px; margin: 40px 0;
    font-size: 22px; font-weight: 600; line-height: 1.5;
  }

  /* 2. 케이스 스터디 */
  .article-body .pf-chips {
    display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px;
  }
  .article-body .pf-chips span {
    font-size: 12px; border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 12px; color: var(--muted);
  }
  .article-body .pf-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 36px;
  }
  .article-body .pf-metric {
    border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-align: center;
  }
  .article-body .pf-metric b {
    display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  }
  .article-body .pf-metric span { font-size: 12px; color: var(--muted); }
  .article-body .pf-section { margin: 0 0 30px; }
  .article-body .pf-section h3 {
    font-size: 13px; letter-spacing: 0.06em; color: var(--fg);
    font-weight: 700; margin: 0 0 10px;
  }
  .article-body .pf-section .pf-step { color: var(--muted); margin-right: 8px; }
  .article-body .pf-section p { margin: 0; }

  /* 3. 비주얼 에세이 */
  .article-body .pf-vfull { margin: 0 0 14px; }
  .article-body .pf-vfull figcaption,
  .article-body .pf-vcap {
    margin: 14px 0 40px; text-align: center; font-size: 14px;
    color: var(--muted); line-height: 1.7;
  }
  .article-body .pf-vduo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0;
  }
  .article-body .pf-vduo figure { margin: 0; }

  /* 4. 큐레이션 */
  .article-body .pf-cur {
    display: grid; grid-template-columns: 52px 120px 1fr; gap: 18px;
    align-items: center; padding: 20px 0; border-top: 1px solid var(--line);
  }
  .article-body .pf-cur:last-child { border-bottom: 1px solid var(--line); }
  .article-body .pf-rank {
    font-size: 26px; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .article-body .pf-curimg { aspect-ratio: 4/3; object-fit: cover; background: var(--line); }
  .article-body .pf-curtxt h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
  .article-body .pf-curtxt p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }

  /* 5. 위클리 다이제스트 */
  .article-body .pf-group { margin: 0 0 30px; }
  .article-body .pf-ghead {
    font-size: 13px; letter-spacing: 0.06em; color: var(--fg); font-weight: 700;
    border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 0 0 6px;
  }
  .article-body .pf-ditem {
    display: flex; gap: 12px; padding: 13px 0;
    border-bottom: 1px solid var(--line); align-items: baseline;
  }
  .article-body .pf-k {
    font-size: 11px; color: var(--muted); flex: 0 0 64px;
    padding-top: 2px; letter-spacing: 0.05em;
  }
  .article-body .pf-dt b { font-size: 15px; font-weight: 600; }
  .article-body .pf-dt span {
    display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.6;
  }

  /* 6. 용어 사전 · 레퍼런스 */
  .article-body .pf-term {
    border: 1px solid var(--line); border-radius: 14px; padding: 28px;
  }
  .article-body .pf-word { font-size: 24px; font-weight: 700; }
  .article-body .pf-pron {
    font-size: 13px; color: var(--muted); margin-left: 8px; font-weight: 400;
  }
  .article-body .pf-def { font-size: 16px; line-height: 1.85; margin: 14px 0 0; }
  .article-body .pf-rel {
    margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line);
  }
  .article-body .pf-rellbl {
    font-size: 12px; color: var(--muted); letter-spacing: 0.08em; margin-bottom: 10px;
  }
  .article-body .pf-rel a {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
    color: var(--fg); text-decoration: none; border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 12px; margin: 0 6px 6px 0;
  }
  .article-body .pf-rel a:hover { border-color: var(--fg); }

  @media (max-width: 640px) {
    .article-body .pf-metrics { grid-template-columns: 1fr; }
    .article-body .pf-cur { grid-template-columns: 40px 1fr; }
    .article-body .pf-curimg { display: none; }
    .article-body .pf-vduo { grid-template-columns: 1fr; }
  }

  /* ===== 영상 콘텐츠 (video-first) ===== */
  .article-content.video-first .video-back { padding-top: 20px; }
  .article-content.video-first .video-back .back-btn { margin-bottom: 0; }
  .article-content.video-first .video-stage {
    min-height: calc(100vh - 68px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 30px; padding: 32px 0 56px; text-align: center;
  }
  .video-stage-meta {
    width: 100%; max-width: 820px;
    padding: 0 24px; box-sizing: border-box;
  }
  .video-stage-meta .series-badge { justify-content: center; }
  .video-stage-meta .article-eyebrow { justify-content: center; }
  .video-stage-meta .article-sub { margin-left: auto; margin-right: auto; text-align: center; }
  .video-stage-title { margin: 14px auto 0; }
  .video-stage-meta .article-meta { justify-content: center; }
  .video-stage-meta .article-author { margin-left: 0; }
  .video-stage-frame {
    width: 100%; max-width: 1120px;
    padding: 0 24px; box-sizing: border-box;
  }
  .video-stage-frame .vs-ratio {
    position: relative; padding-bottom: 56.25%; height: 0;
    border-radius: 12px; overflow: hidden; background: #000;
    box-shadow: 0 24px 70px rgba(0,0,0,0.30);
  }
  .video-stage-frame .vs-ratio iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }
  .video-readmore {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; border-radius: 999px;
    border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
    font-size: 13px; font-family: inherit; cursor: pointer;
    letter-spacing: 0.04em; transition: transform .2s, opacity .2s;
  }
  .video-readmore:hover { transform: translateY(-2px); opacity: 0.9; }
  .video-readmore svg { width: 15px; height: 15px; }
  @media (max-width: 760px) {
    .article-content.video-first .video-stage {
      min-height: calc(100vh - 56px); gap: 22px; padding: 20px 0 40px;
    }
    .video-stage-frame, .video-stage-meta { padding-left: 20px; padding-right: 20px; }
  }

  /* Article reading progress bar */
  .article-progress {
    position: fixed; top: 0; left: 0;
    height: 2px;
    background: var(--fg);
    width: 0%;
    z-index: 100;
    transition: width .08s linear;
    pointer-events: none;
    display: none;
  }

  /* Toast */
  .toast {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--fg); color: var(--bg);
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 12.5px; letter-spacing: -0.005em;
    line-height: 1.55;
    text-align: center;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    max-width: calc(100% - 48px);
  }
  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Reusable meta label */
  .meta-label {
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }

  /* Reactions */
  .article-reactions .meta-label { margin-bottom: 18px; display: block; }
  .reactions-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .reaction {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    padding: 28px 18px;
    border: none;
    border-radius: 6px;
    background: var(--hover);
    font-size: 13.5px; letter-spacing: -0.005em;
    color: var(--fg);
    transition: background .25s, color .25s, transform .2s;
    cursor: pointer;
    width: 100%;
    min-height: 104px;
    text-align: center;
    line-height: 1.45;
  }
  .reaction:hover { background: var(--hover-strong); transform: translateY(-1px); }
  .reaction.active {
    background: var(--fg);
    color: var(--bg);
  }
  /* Disabled (not logged in) — show counts but dimmed */
  body:not(.logged-in) .reaction {
    opacity: 0.5;
  }
  body:not(.logged-in) .reaction:hover {
    background: var(--hover);
    transform: none;
    opacity: 0.7;
  }
  .reaction > span:first-child { font-weight: 500; }
  .reaction .r-count {
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    opacity: 0.5;
  }
  .reaction:hover .r-count { opacity: 0.7; }
  .reaction.active .r-count { opacity: 0.75; }
  /* 프리릴리즈 반응 줄은 버튼이 2개(응원/자료) — 3열 그리드의 빈 칸이 생기지 않도록 2열로 */
  .reactions-row.pr-reactions { grid-template-columns: 1fr 1fr; }
  /* 응원은 비로그인도 가능하므로 프리릴리즈 반응 버튼은 흐리게 처리하지 않는다 */
  body:not(.logged-in) .pr-reactions .reaction { opacity: 1; }
  body:not(.logged-in) .pr-reactions .reaction:hover {
    background: var(--hover-strong); transform: translateY(-1px); opacity: 1;
  }

  /* Thanks to. — credits in a soft gray box */
  .article-thanks {
    padding: 32px 0 8px;
  }
  .thanks-list {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;          /* 본문(720px)과 동일 폭으로 중앙 정렬 */
    box-sizing: border-box;
    background: var(--hover-soft);
    padding: 26px 30px;
    border-radius: 4px;
  }
  .thanks-list li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    align-items: baseline;
  }
  .thanks-role {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .thanks-name {
    font-size: 12.5px;
    color: var(--fg);
    line-height: 1.7;
  }
  .thanks-name a {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s;
  }
  .thanks-name a:hover { text-decoration-color: var(--fg); }

  /* PDF 첨부파일 다운로드 */
  .article-attachments {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 0 4px;
  }
  .article-attachments .meta-label {
    display: block;
    margin-bottom: 12px;
  }
  .attach-download-list {
    display: flex; flex-direction: column;
    gap: 10px;
  }
  .attach-download {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    color: var(--fg);
    transition: border-color .2s, background .2s;
  }
  .attach-download:hover {
    border-color: var(--fg);
    background: var(--hover-soft);
  }
  .attach-download .attach-dl-icon svg { width: 22px; height: 22px; display: block; color: var(--muted); }
  .attach-download .attach-dl-name {
    flex: 1; font-size: 13.5px; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .attach-download .attach-dl-size { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
  .attach-download .attach-dl-arrow svg { width: 18px; height: 18px; display: block; color: var(--muted); flex-shrink: 0; }

  @media (max-width: 900px) {
    .article-thanks { padding: 24px 0 4px; }
    .article-attachments { padding: 18px 0 4px; }
    .attach-download { padding: 12px 14px; gap: 10px; }
    .thanks-list { padding: 22px 22px; gap: 12px; }
    .thanks-list li { grid-template-columns: 80px 1fr; gap: 12px; }
    .thanks-role { font-size: 9.5px; letter-spacing: 0.14em; }
    .thanks-name { font-size: 11.5px; }
  }

  /* Article footer (tags + actions) */
  .article-reactions { padding: 56px 0 32px; }

  /* After Reading — 읽고 난 후 질문 + 비공개 메모 */
  .after-reading {
    padding: 28px 0 8px;
    border-top: 1px solid var(--line);
  }
  .after-reading .meta-label { display: block; margin-bottom: 12px; }
  .ar-question {
    font-size: 18px; line-height: 1.55; font-weight: 600;
    color: var(--fg); margin: 0 0 18px;
  }
  .ar-memo-wrap {
    border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 18px 14px; background: var(--card-bg, rgba(0,0,0,0.015));
  }
  .ar-memo {
    width: 100%; border: 0; outline: 0; resize: vertical;
    background: transparent; color: var(--fg);
    font-family: inherit; font-size: 15px; line-height: 1.7;
    min-height: 92px;
  }
  .ar-memo::placeholder { color: var(--muted); line-height: 1.7; }
  .ar-memo-foot {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .ar-private {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--muted);
  }
  .ar-status {
    font-size: 11.5px; color: var(--muted); opacity: 0;
    transition: opacity 0.2s; margin-left: auto;
  }
  .ar-status.show { opacity: 1; }
  .ar-memo-btns { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
  .ar-btn {
    appearance: none; cursor: pointer; font-family: inherit;
    padding: 7px 18px; font-size: 12.5px; font-weight: 600;
    border: 0; border-radius: 999px; transition: opacity 0.15s, background 0.15s;
  }
  .ar-btn:hover { opacity: 0.85; }
  .ar-btn.ar-save { color: var(--bg); background: var(--fg); }
  .ar-btn.ar-edit { color: var(--fg); background: transparent; border: 1px solid var(--line); }
  .ar-btn.ar-del { color: #c0392b; background: transparent; border: 1px solid var(--line); }
  .ar-btn.ar-del:hover { background: rgba(192,57,43,0.08); opacity: 1; }
  .ar-memo.is-locked { cursor: default; }

  .article-footer {
    padding: 16px 0 28px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
    align-items: center;
  }
  .article-tags {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  }
  .article-tags .meta-label { margin-right: 0; }
  .tag-sep {
    color: var(--line);
    font-size: 13px;
    font-weight: 300;
    user-select: none;
  }
  .tag {
    display: inline-block;
    padding: 0;
    font-size: 13px; letter-spacing: -0.005em;
    color: var(--fg);
    background: transparent;
    border-radius: 0;
    transition: color .2s, opacity .2s;
    cursor: pointer;
  }
  .tag:hover { color: var(--muted); background: transparent; }

  .article-actions {
    display: flex; align-items: center; gap: 6px;
  }
  .action-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--fg); background: transparent;
    transition: background .2s, border-color .2s, color .2s;
    cursor: pointer; padding: 0;
  }
  .action-btn:hover {
    background: var(--fg); color: var(--bg); border-color: var(--fg);
  }
  .action-btn.active {
    background: var(--fg); color: var(--bg); border-color: var(--fg);
  }
  .action-btn svg { width: 15px; height: 15px; }

  /* Series badge (top of article) */
  .series-badge {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 28px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }
  .series-badge .series-name { color: var(--fg); font-weight: 500; }
  .series-badge .sep { width: 18px; height: 1px; background: var(--line); }
  .series-badge .progress { font-variant-numeric: tabular-nums; }

  /* Series next-part card */
  .next-article {
    padding: 0 0 96px;
  }
  .next-article > .container::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--line);
    margin-bottom: 48px;
  }
  /* 다음 편 알림 신청 박스 — 얇고 옅은 풀폭 박스 */
  .series-wait-box {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    width: 100%; box-sizing: border-box;
    padding: 16px 20px; margin-bottom: 28px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft, rgba(0,0,0,0.015));
  }
  .series-wait-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .series-wait-title { font-size: 14px; font-weight: 700; color: var(--fg); }
  .series-wait-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
  .series-wait-btn {
    appearance: none; cursor: pointer; font-family: inherit; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; font-size: 12.5px; font-weight: 600;
    color: var(--fg); background: transparent;
    border: 1px solid var(--fg); border-radius: 999px;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
  }
  .series-wait-btn:hover { opacity: 0.82; }
  .series-wait-btn.is-on {
    color: var(--bg); background: var(--fg); border-color: var(--fg);
  }
  .series-nav-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }
  .series-info { display: flex; align-items: center; gap: 14px; }
  .series-info .series-name { color: var(--fg); font-weight: 500; }

  /* 시리즈 내비 헤더 (SERIES · 시리즈명) */
  .series-nav-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 18px;
  }
  .series-nav-eyebrow {
    font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; flex-shrink: 0;
  }
  .series-nav-name {
    font-size: 13.5px; color: var(--fg); font-weight: 500;
    letter-spacing: -0.01em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 이전 에피소드 카드 — 다음 편 카드와 톤 통일(화살표만 왼쪽 방향) */
  .next-part-card--prev { margin-bottom: 10px; }
  .next-part-card--prev:hover .next-part-arrow { transform: translateX(-4px); }
  .progress-dots {
    display: inline-flex; align-items: center; gap: 5px;
  }
  .progress-dots .pd {
    width: 16px; height: 1px;
    background: var(--line);
    transition: background .25s, width .25s, height .25s;
  }
  .progress-dots .pd.done { background: var(--muted); }
  .progress-dots .pd.current {
    background: var(--fg);
    width: 24px; height: 2px;
  }

  .next-part-card {
    display: grid;
    grid-template-columns: 132px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: background .28s, border-color .28s, color .28s;
    text-decoration: none; color: inherit;
  }
  /* 썸네일 없는 추천 카드(다음 이야기): 제목 + 화살표 2칸 레이아웃 */
  .next-part-card.no-thumb { grid-template-columns: 1fr auto; }
  .next-part-card:hover {
    background: var(--hover);
    border-color: var(--border, var(--line));
  }
  .next-part-card:hover .next-part-arrow {
    color: var(--fg);
    transform: translateX(4px);
  }
  .next-part-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--hover, #eee);
    border-radius: 8px;
  }
  .next-part-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--hover, #f0f0f0);
  }
  .next-part-thumb-empty span {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 18px; font-style: italic;
    color: var(--muted); opacity: 0.5;
  }
  .next-part-card:hover .next-part-thumb-empty span { opacity: 0.35; }
  .next-part-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .next-part-card:hover .next-part-thumb img { transform: scale(1.06); }
  .next-part-label {
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 9px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .next-part-label .arrow-mini {
    display: inline-block;
    width: 10px; height: 1px; background: var(--muted);
    position: relative;
  }
  .next-part-title {
    font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 6px;
  }
  .next-part-sub {
    font-size: 12.5px; color: var(--muted);
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .next-part-arrow {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform .25s, color .25s;
  }
  .next-part-arrow svg { width: 18px; height: 18px; }
  /* 안전장치: 시리즈 내비 영역의 화살표 SVG가 (HTML/CSS 캐시 불일치 등으로)
     클래스 스타일을 못 받아도 전체 화면을 덮을 만큼 커지지 않도록 상한선을 둔다. */
  .next-article svg { max-width: 28px; max-height: 28px; }

  .next-part-card.complete .next-part-label .check {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--fg);
  }
  .next-part-card.complete:hover .next-part-label .check { color: var(--fg); }
  .random-hint {
    margin-top: 14px;
    font-size: 11px; letter-spacing: 0.06em;
    color: var(--muted);
  }

  /* ========== Mobile ========== */
  @media (max-width: 900px) {
    .container { padding: 0 35px; }
    .header-inner { height: 56px; }
    .logo { font-size: 14px; }
    .theme-toggle { display: none; }

    .page-head { padding: 36px 0 20px; }
    .filterbar { top: 56px; padding: 14px 0; margin-bottom: 32px; }
    .filterbar::before,
    .filterbar::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 36px;
      pointer-events: none;
      z-index: 2;
      transition: opacity .25s;
    }
    .filterbar::before {
      left: 0;
      background: linear-gradient(to right, var(--bg) 30%, transparent);
      opacity: 0;
    }
    .filterbar::after {
      right: 0;
      background: linear-gradient(to left, var(--bg) 30%, transparent);
      opacity: 1;
    }
    .filterbar.scrolled::before { opacity: 1; }
    .filterbar.at-end::after { opacity: 0; }
    .filterbar-hint {
      display: inline-flex !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      color: var(--muted);
      pointer-events: none;
      transition: opacity .25s;
    }
    .filterbar-hint-right {
      right: 4px;
      opacity: 1;
      animation: hintNudgeRight 1.8s ease-in-out infinite;
    }
    .filterbar-hint-left {
      left: 4px;
      opacity: 0;
      animation: hintNudgeLeft 1.8s ease-in-out infinite;
    }
    .filterbar.at-end .filterbar-hint-right { opacity: 0; }
    .filterbar.scrolled .filterbar-hint-left { opacity: 1; }
    @keyframes hintNudgeRight {
      0%, 100% { transform: translateY(-50%) translateX(0); }
      50% { transform: translateY(-50%) translateX(3px); }
    }
    @keyframes hintNudgeLeft {
      0%, 100% { transform: translateY(-50%) translateX(0); }
      50% { transform: translateY(-50%) translateX(-3px); }
    }

    .featured {
      aspect-ratio: 4 / 5;
      margin-bottom: 0;
    }
    .carousel { margin-bottom: 48px; }
    .featured-top { top: 20px; left: 20px; right: 20px; font-size: 10px; letter-spacing: 0.18em; }
    .featured-bottom { bottom: 70px; left: 20px; right: 20px; }
    .featured-meta { gap: 10px; margin-bottom: 14px; font-size: 10px; }
    .featured-meta .divider { width: 14px; }
    .featured-title { margin-bottom: 12px; }
    .featured-excerpt { font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
    .carousel-controls { bottom: 22px; left: 20px; right: 20px; gap: 14px; }
    .carousel-nav { gap: 6px; }
    .carousel-arrow { width: 22px; height: 22px; }
    .carousel-counter { font-size: 12px; min-width: 36px; }
    .carousel-playpause { width: 22px; height: 22px; }

    .article-grid { grid-template-columns: 1fr; gap: 14px; }
    .card { aspect-ratio: 16 / 9; }
    .card-top { top: 16px; left: 18px; right: 18px; }
    .card-bottom { bottom: 18px; left: 18px; right: 18px; }
    .card-title { font-size: 16px; line-height: 1.3; }
    .card-sub { font-size: 11px; margin-bottom: 10px; }
    .card-meta { font-size: 10px; }

    .article-header { padding: 24px 0 20px; }
    .back-btn { margin-bottom: 32px; }
    .article-title { margin-top: 14px; }
    .article-sub { font-size: 15px; }
    .article-meta { gap: 12px; margin-top: 22px; }
    .article-body { padding: 48px 35px; }
    .article-video-embed { margin: -12px 0 100px; }
    .article-lead { font-size: 18px; margin-bottom: 40px; }
    .article-body p { font-size: 15px; }
    .article-image-full { margin: 36px -35px; }
    .article-reactions { padding: 40px 0 28px; }
    .reactions-row { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .reactions-row.pr-reactions { grid-template-columns: 1fr 1fr; gap: 5px; }
    .reaction {
      gap: 6px;
      padding: 16px 4px;
      font-size: 11px;
      min-height: 76px;
      line-height: 1.4;
      letter-spacing: -0.02em;
    }
    .reaction > span:first-child {
      word-break: keep-all;
      overflow-wrap: break-word;
    }
    .reaction .r-count { font-size: 10.5px; }
    .article-footer {
      flex-direction: column; align-items: flex-start;
      padding: 28px 0;
    }
    .article-actions { width: 100%; justify-content: flex-start; }
    .action-btn { width: 34px; height: 34px; }
    .next-article { padding: 40px 0 64px; }
    .next-part-card {
      grid-template-columns: 96px 1fr;
      gap: 14px;
      padding: 12px;
    }
    .next-part-card.no-thumb { grid-template-columns: 1fr; }
    .next-part-thumb { aspect-ratio: 1; }
    .next-part-title { font-size: 16px; line-height: 1.25; margin-bottom: 4px; }
    .next-part-sub {
      font-size: 12px;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .next-part-label { margin-bottom: 8px; }
    .next-part-arrow { display: none; }
    .series-nav-bar { font-size: 10px; gap: 12px; flex-wrap: wrap; }
    .series-nav-head { gap: 8px; margin-bottom: 14px; }
    .series-nav-name { font-size: 12.5px; }
    .next-part-card--prev { margin-bottom: 8px; }
    .next-article { padding: 48px 0 72px; }
  }

  /* ========== Page Hero (shared by Series/Notes/Saved/About) ========== */
  .page-hero { padding: 80px 0 56px; }
  .page-hero .meta-label { display: block; margin-bottom: 18px; }
  .page-title {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-bottom: 22px;
  }
  .page-lead {
    font-size: 16px; color: var(--muted);
    line-height: 1.7; max-width: 720px;
  }
  /* 리스트/카테고리 페이지 서브타이틀은 메인 페이지 느낌에 맞춰 작게(14px) */
  .list-view .page-lead { font-size: 14px; line-height: 1.6; }

  /* ========== Series view ========== */
  .series-stats {
    display: flex; align-items: center; gap: 12px;
    margin-top: 28px;
    font-size: 12px; letter-spacing: 0.16em; color: var(--muted);
    text-transform: uppercase;
  }
  .series-stats strong { color: var(--fg); font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }
  .series-stats-sep { color: var(--line); }
  /* 글 수/페이지 표시 — 히어로 제목 옆(오른쪽)에 작게, 제목 베이스라인에 정렬 */
  .list-hero-titlerow {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
  }
  .list-meta {
    display: flex; align-items: baseline; gap: 10px; flex-shrink: 0;
    font-size: 11px; letter-spacing: 0.14em; color: var(--muted);
    text-transform: uppercase; white-space: nowrap;
  }
  .list-meta strong { color: var(--fg); font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }

  .series-list { padding: 16px 0 120px; border-top: 1px solid var(--line); }
  .series-card {
    border-bottom: 1px solid var(--line);
  }
  .series-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-areas: "meta count toggle" "main main toggle";
    column-gap: 28px;
    row-gap: 12px;
    padding: 26px 0;
    cursor: pointer;
    align-items: center;
    transition: padding-left .25s;
  }
  .series-card-meta { grid-area: meta; flex-direction: row; gap: 12px; align-items: center; }
  .series-card-main { grid-area: main; }
  .series-card-count { grid-area: count; align-self: center; }
  .series-toggle { grid-area: toggle; align-self: center; }
  .series-card-head:hover { padding-left: 16px; }
  .series-card.upcoming .series-card-head { cursor: default; opacity: 0.65; }
  .series-card.upcoming .series-card-head:hover { padding-left: 0; }

  .series-card-meta {
    display: flex;
  }
  .series-state {
    font-size: 10px; letter-spacing: 0.18em; color: var(--muted);
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .series-state::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--fg);
  }
  .upcoming-state::before { background: var(--muted); }

  .series-card-main h2 {
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .series-card-main p {
    font-size: 13px; color: var(--muted); line-height: 1.55;
    max-width: 540px;
  }
  .series-card-count {
    font-size: 11px; letter-spacing: 0.18em; color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .series-toggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    color: var(--muted);
    transition: border-color .25s, color .25s;
    justify-self: end;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  .series-toggle svg {
    width: 14px; height: 14px;
    display: block;
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .series-card-head:hover .series-toggle:not(.disabled) {
    border-color: var(--fg);
    color: var(--fg);
  }
  .series-card.open .series-toggle {
    border-color: var(--fg);
    color: var(--fg);
  }
  .series-card.open .series-toggle svg {
    transform: rotate(180deg);
  }
  .series-toggle.disabled { cursor: default; opacity: 0.5; }

  .series-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.2,.7,.2,1);
  }
  .series-card.open .series-card-body {
    max-height: 600px;
  }
  .series-parts {
    list-style: none;
    display: flex; flex-direction: column;
    padding-bottom: 16px;
  }
  .part {
    display: grid;
    grid-template-columns: 56px 104px 1fr 40px;
    gap: 20px 24px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
    transition: padding-left .25s;
  }
  .part:hover { padding-left: 16px; }
  .part-num {
    font-size: 12px; letter-spacing: 0.16em; color: var(--muted);
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
  }
  .part-thumb {
    display: block; width: 104px; aspect-ratio: 16 / 10;
    border-radius: 8px; overflow: hidden;
    background: var(--line); flex: none;
  }
  .part-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .part-thumb-empty { background: var(--line); }
  .part-title {
    font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 3px;
  }
  .part-sub {
    font-size: 12.5px; color: var(--muted);
  }
  .part-arrow {
    font-size: 16px; color: var(--muted);
    transition: transform .25s, color .2s;
    justify-self: end;
  }
  .part:hover .part-arrow { transform: translateX(4px); color: var(--fg); }

  /* ========== List view (all articles) ========== */
  /* 구분선은 콘텐츠 폭에 맞춰 인셋(양옆 패딩) — 메인 페이지와 동일하게 */
  .list-section { padding: 0 0 80px; border-top: none; }
  .list-section > .container { border-top: none; padding-top: 0; }
  .list-rows { border-top: 1px solid var(--line); padding-top: 16px; }
  .list-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 32px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: padding-left .25s, background .2s;
    align-items: baseline;
  }
  .list-row:hover { padding-left: 14px; background: var(--hover); }
  .list-row.dim { opacity: 0.55; }
  .list-row.dim:hover { opacity: 0.75; }
  .list-date {
    font-size: 12px; color: var(--muted);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
  }
  .list-meta-series {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .list-free-mark {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px;
    padding: 2px 8px;
    border: 1px solid var(--muted);
    border-radius: 999px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .list-title {
    font-size: 19px; font-weight: 500; letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .list-sub {
    font-size: 13px; color: var(--muted); line-height: 1.55;
    max-width: 720px;
  }

  /* Pagination */
  .pagination {
    margin-top: 48px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex-wrap: wrap;
  }
  .page-btn {
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--fg);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s, color .2s;
  }
  .page-btn:hover:not(:disabled):not(.active) {
    border-color: var(--fg);
  }
  .page-btn.active {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
    font-weight: 500;
  }
  .page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .page-btn.arrow svg { width: 12px; height: 12px; }
  .page-ellipsis {
    color: var(--muted);
    padding: 0 4px;
    align-self: end;
  }

  @media (max-width: 900px) {
    .list-row {
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 18px 0;
    }
    .list-row:hover { padding-left: 8px; }
    .list-date { padding-top: 0; font-size: 11px; }
    .list-meta-series { margin-bottom: 6px; }
    .list-title { font-size: 16px; }
    .list-sub { font-size: 12.5px; }
    .pagination { margin-top: 32px; gap: 4px; }
    .page-btn { min-width: 32px; height: 32px; font-size: 11px; }
  }

  /* ========== Notes view ========== */
  /* ===== Notes(단상) — 오피니언 페이지와 동일한 정렬/패딩 (가운데 정렬) ===== */
  .notes-view { padding: 80px 0 120px; }
  .notes-hero {
    margin: 0;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
  }
  .notes-hero .meta-label {
    display: block; margin-bottom: 16px;
    color: var(--muted); font-size: 12px; letter-spacing: 0.18em;
  }
  .notes-title {
    font-size: 36px; font-weight: 700; line-height: 1.25;
    margin: 0 0 14px; word-break: keep-all;
  }
  .notes-desc {
    font-size: 16px; line-height: 1.7;
    color: var(--body, var(--fg)); word-break: keep-all; max-width: 800px;
  }
  .notes-thread { margin: 40px 0 0; }
  .note {
    padding: 36px 0;
    border-top: 1px solid var(--line);
  }
  .notes-items .note:first-child { border-top: none; }
  .note-date {
    font-size: 11px; letter-spacing: 0.18em; color: var(--muted);
    margin-bottom: 14px;
  }
  .note-text {
    font-size: 17px; line-height: 1.7;
    color: var(--body);
  }
  /* 메시지 텍스트와 좋아요 버튼을 같은 행에 정렬 (텍스트 왼쪽 / 좋아요 오른쪽 하단) */
  .note-body {
    display: flex; align-items: flex-end; gap: 16px;
  }
  .note-body .note-text { flex: 1; min-width: 0; }
  .note-body .note-foot { margin-top: 0; flex: none; }
  /* 노트 — 헤더(날짜 + 삭제), 푸터(좋아요) */
  .note-head {
    display: flex; align-items: center; justify-content: space-between;
  }
  .note-head .note-date { margin-bottom: 14px; }
  .note-del {
    background: transparent; border: none; cursor: pointer;
    color: var(--muted); font-size: 18px; line-height: 1;
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px; transition: color .15s, background .15s;
  }
  .note-del:hover { color: #dc2626; background: rgba(220,38,38,0.08); }
  .note-foot {
    display: flex; align-items: center; justify-content: flex-end; margin-top: 14px;
  }
  .note-like {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--line);
    border-radius: 999px; padding: 5px 12px; cursor: pointer;
    color: var(--muted); font-size: 12.5px; line-height: 1;
    transition: color .15s, border-color .15s, background .15s;
  }
  .note-like:hover { color: var(--fg); border-color: var(--fg); }
  .note-like i { font-size: 12.5px; }
  .note-like.liked { color: #2563eb; border-color: #2563eb; }
  .note-like.liked:hover { color: #2563eb; }
  .note-like-count { font-variant-numeric: tabular-nums; }
  /* 어드민 작성 박스 — 오피니언 입력 카드와 동일한 스타일/사이즈 (목록 아래) */
  .note-compose {
    margin: 40px 0 0;
    background: var(--hover-soft, rgba(0,0,0,0.03));
    border-radius: 10px; padding: 18px;
  }
  body.dark .note-compose { background: rgba(255,255,255,0.04); }
  .note-compose textarea {
    width: 100%; box-sizing: border-box;
    background: transparent; border: none; outline: none;
    font-size: 14px; line-height: 1.7; color: var(--fg);
    font-family: inherit; resize: vertical; min-height: 80px;
  }
  .note-compose-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  body.dark .note-compose-foot { border-top-color: rgba(255,255,255,0.08); }
  .note-compose-hint { font-size: 12px; color: var(--muted); }
  .note-post-btn {
    padding: 8px 18px; font-size: 13px;
    background: var(--fg); color: var(--bg);
    border: none; border-radius: 6px; cursor: pointer; font-family: inherit;
    transition: opacity .15s;
  }
  .note-post-btn:hover { opacity: 0.85; }
  .note-post-btn:disabled { opacity: 0.5; cursor: default; }
  .notes-empty {
    padding: 60px 0; text-align: center; color: var(--muted); font-size: 14px;
  }

  /* ========== My Page ========== */
  .mp-greeting {
    display: inline-block;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 300;
    color: var(--muted);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .mypage-tabs-bar {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .mypage-tabs-wrap { position: relative; }
  .mypage-tabs {
    display: flex; gap: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mypage-tabs::-webkit-scrollbar { display: none; }
  /* 가로 스크롤 힌트 (메인 메뉴 바와 동일한 방식) — 데스크탑 기본 숨김 */
  .mp-tabs-hint { display: none; }
  @keyframes mpTabsNudgeRight {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(3px); }
  }
  @keyframes mpTabsNudgeLeft {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-3px); }
  }
  .mp-tab {
    flex-shrink: 0;
    padding: 18px 0;
    background: transparent;
    border: none;
    font-size: 14px; font-weight: 400;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    letter-spacing: -0.005em;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .2s;
  }
  .mp-tab:hover { color: var(--fg); }
  .mp-tab.active { color: var(--fg); font-weight: 600; }
  .mp-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--fg);
  }
  .mp-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    padding: 1px 7px;
    background: var(--hover);
    border-radius: 999px;
    letter-spacing: 0;
    font-weight: 500;
  }
  .mp-tab.active .mp-count { background: var(--fg); color: var(--bg); }

  .mypage-content { padding: 48px 0 120px; }
  .mp-panel {}

  .mp-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--muted);
  }
  .mp-empty .empty-mark {
    font-size: 28px;
    margin-bottom: 20px;
    opacity: 0.55;
    color: var(--muted);
  }
  .mp-empty p { font-size: 14px; margin-bottom: 8px; color: var(--fg); }
  .mp-empty .mp-empty-sub {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .mp-empty-btn {
    display: inline-flex; padding: 11px 22px;
    border: 1px solid var(--fg);
    font-size: 12px; letter-spacing: 0.05em;
    color: var(--fg); background: transparent;
    transition: background .2s, color .2s;
    cursor: pointer;
  }
  .mp-empty-btn:hover { background: var(--fg); color: var(--bg); }

  /* Sentences list */
  /* 문장집 보기 토글 (전체/월별/주제별) */
  .sentence-view-toggle {
    display: flex; gap: 6px; margin-bottom: 8px;
  }
  .sentence-view-toggle[hidden] { display: none; }
  .sv-btn {
    appearance: none; cursor: pointer; font-family: inherit;
    padding: 7px 16px; font-size: 12.5px; letter-spacing: 0.02em;
    color: var(--muted); background: transparent;
    border: 1px solid var(--line); border-radius: 999px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .sv-btn:hover { color: var(--fg); }
  .sv-btn.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }
  .sentence-group { margin-bottom: 12px; }
  .sentence-group-head {
    display: flex; align-items: baseline; gap: 10px;
    margin: 28px 0 4px; padding-bottom: 2px;
  }
  .sentence-group-head > span:first-child {
    font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--fg);
  }
  .sentence-group-n {
    font-size: 11px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  }
  .sentence-group .sentence-item:first-child { border-top: none; }

  .sentences-list {
    display: flex; flex-direction: column; gap: 0;
  }
  .sentence-item {
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
  }
  .sentence-item:first-child { border-top: 1px solid var(--line); }
  .sentence-text {
    font-size: 17px; line-height: 1.6;
    color: var(--fg);
    letter-spacing: -0.015em;
    quotes: '"' '"';
  }
  .sentence-text::before { content: open-quote; color: var(--muted); margin-right: 2px; }
  .sentence-text::after { content: close-quote; color: var(--muted); margin-left: 2px; }
  .sentence-meta {
    font-size: 11px; letter-spacing: 0.06em;
    color: var(--muted);
    line-height: 1.6;
    text-align: right;
    white-space: nowrap;
  }
  .sentence-meta a {
    color: var(--muted);
    transition: color .2s;
  }
  .sentence-meta a:hover { color: var(--fg); }
  .sentence-delete {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    background: transparent; border: none; padding: 0;
  }
  .sentence-delete:hover { color: var(--fg); }
  .sentence-share {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; margin-right: 12px;
    font-size: 11px; color: var(--fg);
    cursor: pointer; background: transparent;
    border: 1px solid var(--border, #e5e7eb); border-radius: 999px;
    padding: 3px 10px; font-family: inherit;
    transition: background .15s, border-color .15s;
  }
  .sentence-share:hover { background: var(--hover, rgba(0,0,0,0.04)); border-color: var(--fg); }
  .sentence-share i { font-size: 10px; }

  /* History list */
  .history-list { display: flex; flex-direction: column; }
  .history-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    align-items: center;
    transition: padding-left .25s, background .2s;
  }
  .history-item:first-child { border-top: 1px solid var(--line); }
  .history-item:hover { padding-left: 12px; background: var(--hover); }
  .history-thumb {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 6px; object-fit: cover;
    background: var(--line);
  }
  .history-thumb--empty { background: var(--line); }
  .history-text { min-width: 0; }
  .history-meta {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 5px;
  }
  .history-cat {
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted);
  }
  .history-meta-sep { font-size: 9px; color: var(--muted); opacity: 0.6; }
  .history-date {
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
  .history-title {
    font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .history-progress {
    display: flex; align-items: center; gap: 12px;
    max-width: 360px;
  }
  .history-progress-track {
    flex: 1;
    height: 2px;
    background: var(--line);
    border-radius: 1px;
    overflow: hidden;
  }
  .history-progress-bar {
    height: 100%;
    background: var(--fg);
    opacity: 0.4;
    border-radius: 1px;
    transition: width .3s, opacity .2s;
  }
  .history-progress-pct {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    letter-spacing: 0.04em;
    min-width: 30px;
    text-align: right;
  }
  .history-item:hover .history-progress-bar { opacity: 0.65; }
  .history-memo {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 10px; padding: 8px 10px;
    background: var(--card-bg, rgba(0,0,0,0.03)); border-radius: 8px;
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
  }
  .history-memo svg { flex: 0 0 auto; margin-top: 2px; opacity: 0.7; }
  .history-memo span { color: var(--fg); }
  .history-arrow {
    color: var(--muted);
    font-size: 16px;
    transition: transform .25s, color .2s;
  }
  .history-item:hover .history-arrow { color: var(--fg); transform: translateX(4px); }

  /* Reactions summary */
  .reactions-summary {
    display: flex; flex-direction: column;
  }
  /* 상단: 반응 3종 카드 [ ][ ][ ] */
  .mp-react-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 30px;
  }
  .mp-react-card {
    display: flex; flex-direction: column; gap: 7px;
    text-align: left;
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, background .2s, transform .15s;
  }
  .mp-react-card:hover { border-color: var(--fg); transform: translateY(-2px); }
  .mp-react-card.active { border-color: var(--fg); background: var(--fg); }
  .mp-react-card.active .mp-react-card-count,
  .mp-react-card.active .mp-react-card-label { color: var(--bg); }
  .mp-react-card.active .mp-react-card-unit,
  .mp-react-card.active .mp-react-card-desc { color: var(--bg); opacity: .6; }
  .mp-react-card.is-empty { opacity: .45; }
  .mp-react-card.is-empty:hover { opacity: .7; }
  .mp-react-card.is-empty.active { opacity: 1; }
  .mp-react-card-count {
    font-size: 28px; font-weight: 300; line-height: 1;
    color: var(--fg); font-variant-numeric: tabular-nums;
  }
  .mp-react-card-unit {
    font-size: 12px; color: var(--muted);
    margin-left: 4px; font-weight: 400; letter-spacing: 0.04em;
  }
  .mp-react-card-label {
    font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--fg);
  }
  .mp-react-card-desc {
    font-size: 11.5px; color: var(--muted); letter-spacing: 0.02em;
  }
  /* 하단: 선택된 반응의 글 리스트 */
  .mp-react-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line);
  }
  .rg-item {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    cursor: pointer;
    align-items: center;
    transition: padding-left .25s, background .2s;
  }
  .rg-item:hover { padding-left: 10px; background: var(--hover); }
  .rg-item-date {
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }
  .rg-item-title {
    font-size: 14px; font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--fg);
  }
  .rg-item-arrow {
    color: var(--muted);
    font-size: 14px;
    transition: transform .25s, color .2s;
  }
  .rg-item:hover .rg-item-arrow { transform: translateX(4px); color: var(--fg); }
  .rg-empty {
    padding: 18px 0;
    font-size: 12px; color: var(--muted);
    font-style: normal;
  }

  @media (max-width: 900px) {
    .mp-react-cards { gap: 8px; margin-bottom: 22px; }
    .mp-react-card { padding: 14px 12px; gap: 5px; border-radius: 11px; }
    .mp-react-card-count { font-size: 22px; }
    .mp-react-card-unit { font-size: 10px; margin-left: 2px; }
    .mp-react-card-label { font-size: 12.5px; letter-spacing: -0.03em; }
    .mp-react-card-desc { display: none; }
    .rg-item { grid-template-columns: 70px 1fr; gap: 12px; padding: 10px 0; }
    .rg-item:hover { padding-left: 6px; }
    .rg-item-arrow { display: none; }
    .rg-item-title { font-size: 13px; }
  }

  /* Collected sentence highlight (very subtle warm tint) */
  .collected-mark {
    background: rgba(232, 178, 60, 0.16);
    color: inherit;
    padding: 0.5px 2px;
    border-radius: 2px;
    transition: background .3s;
  }
  body.dark .collected-mark {
    background: rgba(255, 215, 130, 0.13);
  }
  .collected-mark:hover {
    background: rgba(232, 178, 60, 0.28);
  }
  body.dark .collected-mark:hover {
    background: rgba(255, 215, 130, 0.22);
  }
  body.no-highlights .collected-mark {
    background: transparent !important;
  }

  /* ========== Interview hybrid (video + article) ========== */
  .interview-badge {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 28px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
  }
  .interview-badge > span:first-child {
    color: var(--fg); font-weight: 500;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .interview-badge > span:first-child i {
    font-size: 11px;
  }
  .interview-badge .ib-sep { color: var(--line); }
  .interview-video-section {
    padding: 24px 0 40px;
  }
  .interview-video-frame {
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
  }
  .interview-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }
  .interview-excerpt {
    margin: 56px -40px;
    background: var(--hover);
    padding: 32px 40px;
  }
  .interview-excerpt-meta {
    margin-bottom: 22px;
    max-width: 640px;
  }
  .interview-excerpt-meta .meta-label {
    display: block; margin-bottom: 8px;
    color: var(--fg);
  }
  .interview-excerpt-meta p {
    font-size: 15px;
    color: var(--body);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
  }
  .interview-video-frame.small {
    max-width: 100%;
  }
  /* Article body inside interview retains paragraph styling */
  .interview-article .article-body h3 {
    font-size: 20px; font-weight: 600;
    letter-spacing: -0.02em;
    margin: 48px 0 16px;
    color: var(--fg);
  }

  @media (max-width: 900px) {
    .interview-badge { font-size: 10px; gap: 8px; margin-bottom: 20px; }
    .interview-video-section { padding: 16px 0 28px; }
    .interview-excerpt { margin: 36px -35px; padding: 24px 28px; }
    .interview-excerpt-meta p { font-size: 13.5px; }
    .interview-article .article-body h3 { font-size: 17px; margin: 36px 0 12px; }
  }

  /* Bottom BACK button (injected on article view) */
  .article-back-bottom {
    padding: 8px 0 80px;
  }
  .back-btn-bottom {
    margin-bottom: 0;
  }

  /* Selection popover (collect / cite) */
  .selection-popover {
    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -100%);
    background: var(--fg);
    color: var(--bg);
    padding: 0;
    border-radius: 999px;
    border: none;
    overflow: hidden;
    z-index: 800;
    display: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    margin-top: -10px;
  }
  .sp-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    color: var(--bg);
    border: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background .15s;
  }
  .sp-action:hover { background: rgba(255,255,255,0.12); }
  .sp-action i { font-size: 11px; opacity: 0.85; }
  .sp-action + .sp-action {
    border-left: 1px solid rgba(255,255,255,0.18);
  }
  body.dark .selection-popover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  }
  /* Mobile: floating action style — bottom center fixed */
  .selection-popover.mobile {
    position: fixed;
    left: 50% !important;
    top: auto !important;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    margin-top: 0;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
    z-index: 1050;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  body.dark .selection-popover.mobile {
    box-shadow: 0 10px 28px rgba(0,0,0,0.6);
  }
  .selection-popover.mobile i { font-size: 12px; }
  /* On mobile but not selecting → hidden */
  .selection-popover.show { display: inline-flex; }

  @media (max-width: 900px) {
    .mp-greeting { font-size: 16px; }
    .mp-tab { font-size: 12.5px; padding: 14px 0; }
    .mp-count { font-size: 10px; padding: 1px 6px; }
    .mypage-tabs { gap: 18px; }
    /* 가로 스크롤 페이드 + 화살표 힌트 (메인 메뉴 바와 동일) */
    .mypage-tabs-wrap::before,
    .mypage-tabs-wrap::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 32px;
      pointer-events: none;
      z-index: 2;
      transition: opacity .25s;
    }
    .mypage-tabs-wrap::before {
      left: 0;
      background: linear-gradient(to right, var(--bg) 30%, transparent);
      opacity: 0;
    }
    .mypage-tabs-wrap::after {
      right: 0;
      background: linear-gradient(to left, var(--bg) 30%, transparent);
      opacity: 1;
    }
    .mypage-tabs-wrap.scrolled::before { opacity: 1; }
    .mypage-tabs-wrap.at-end::after { opacity: 0; }
    .mp-tabs-hint {
      display: inline-flex !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      color: var(--muted);
      pointer-events: none;
      transition: opacity .25s;
    }
    .mp-tabs-hint-right {
      right: 2px;
      opacity: 1;
      animation: mpTabsNudgeRight 1.8s ease-in-out infinite;
    }
    .mp-tabs-hint-left {
      left: 2px;
      opacity: 0;
      animation: mpTabsNudgeLeft 1.8s ease-in-out infinite;
    }
    .mypage-tabs-wrap.at-end .mp-tabs-hint-right { opacity: 0; }
    .mypage-tabs-wrap.scrolled .mp-tabs-hint-left { opacity: 1; }
    .mypage-content { padding: 32px 0 80px; }
    .sentence-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
    .sentence-text { font-size: 15px; }
    .sentence-meta { text-align: left; }
    .history-item { grid-template-columns: 48px 1fr; padding: 14px 0; gap: 12px; }
    .history-item:hover { padding-left: 8px; }
    .history-arrow { display: none; }
    .history-thumb { width: 48px; height: 48px; }
    .history-title { font-size: 14px; margin-bottom: 8px; }
    .history-meta { gap: 6px; margin-bottom: 4px; }
  }

  /* ========== About view ========== */
  .about-hero { padding: 80px 0 64px; }
  .about-hero .meta-label { display: block; margin-bottom: 18px; }
  .about-title {
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-bottom: 28px;
  }
  .about-lead {
    font-size: 19px; line-height: 1.7;
    max-width: 960px;           /* 와이드 모니터에서 너무 좁아 보이지 않게 */
    color: var(--body);
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .about-steps {
    padding: 72px 0 96px;
    border-top: 1px solid var(--line);
  }
  .about-section-head { margin-bottom: 40px; }
  .about-section-head .meta-label { display: block; margin-bottom: 10px; }
  .about-section-head h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 500;
    letter-spacing: -0.03em;
  }
  /* Five steps — minimal list */
  .about-section-head .steps-intro {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 640px;
    margin-top: 18px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .step-timeline {
    border-top: 1px solid var(--line);
  }
  .step-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 28px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .step-no {
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
  }
  .step-body { max-width: 640px; }
  .step-kr {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .step-en {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 400;
  }
  .step-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
  }
  .about-quote-block {
    background: var(--fg); color: var(--bg);
    padding: 100px 0;
  }
  .about-quote-block .aq-quote {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 32px;
    max-width: 920px;
  }
  .about-quote-block .aq-quote strong { font-weight: 600; }
  .about-quote-block .aq-attr {
    font-size: 12px; letter-spacing: 0.18em;
    color: rgba(245,244,240,0.55);
  }
  .about-editor {
    padding: 72px 0 120px;
    border-top: 1px solid var(--line);
  }
  .about-editor .meta-label { display: block; margin-bottom: 24px; }
  .editor-note {
    font-size: 18px; line-height: 1.7;
    max-width: 680px;
    margin-bottom: 28px;
    color: var(--body);
  }
  .editor-meta {
    font-size: 13px; line-height: 1.7;
    color: var(--muted);
  }
  /* about CONTACT 블록 — 좌측 정렬 블록(에디터 프로필의 flex .editor-meta와 분리) */
  .editor-contact {
    font-size: 13px; line-height: 1.9;
    color: var(--muted);
  }
  .editor-contact a { color: var(--muted); }
  .editor-contact a:hover { color: var(--body); }

  /* ========== Search Modal ========== */
  .search-modal {
    position: fixed; inset: 0; z-index: 900;
    background: var(--bg);
    display: none;
    opacity: 0;
    transition: opacity .25s;
  }
  .search-modal.open { display: flex; flex-direction: column; opacity: 1; }
  .search-modal-inner {
    width: 100%; max-width: 880px;
    margin: 0 auto;
    padding: 0 35px;
    display: flex; flex-direction: column;
    flex: 1;
  }
  .search-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
  }
  .search-bar svg { color: var(--muted); flex-shrink: 0; }
  .search-bar input {
    flex: 1;
    background: transparent; border: none;
    color: var(--fg);
    font-family: inherit; font-size: 22px;
    letter-spacing: -0.02em;
    outline: none;
    padding: 8px 0;
  }
  .search-bar input::placeholder { color: var(--muted); }
  .search-close {
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, color .2s, border-color .2s;
  }
  .search-close:hover {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }
  .search-body {
    flex: 1; padding: 32px 0 60px;
    overflow-y: auto;
  }
  .search-empty {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  }
  .search-empty .meta-label { display: inline; margin: 0; }
  .search-empty .meta-label::after {
    content: '|'; color: var(--line);
    margin-left: 16px; font-weight: 300;
  }
  .search-suggestions {
    display: inline-flex; gap: 16px; flex-wrap: wrap; align-items: center;
  }
  .suggest {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--fg);
    cursor: pointer;
    transition: color .2s, opacity .2s;
  }
  .suggest:hover { color: var(--muted); }

  .search-result {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: padding-left .2s;
  }
  .search-result:hover { padding-left: 8px; }
  .search-result-thumb {
    aspect-ratio: 16/9; overflow: hidden; background: #ddd;
  }
  .search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .search-result-cat {
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 6px;
  }
  .search-result-title {
    font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .search-result-sub {
    font-size: 13px; color: var(--muted); line-height: 1.4;
  }
  /* 검색 결과 카드(앵커) · 본문 스니펫 · 키보드 선택 · 강조 */
  a.search-result { text-decoration: none; color: inherit; }
  .search-result-meta { min-width: 0; }
  .search-result.active,
  .search-result:focus-visible {
    padding-left: 8px; background: var(--hover, rgba(0,0,0,.035)); outline: none;
  }
  .search-result-snippet {
    font-size: 13px; color: var(--muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .search-result mark,
  .search-result-snippet mark {
    background: transparent; color: var(--fg); font-weight: 700;
    border-bottom: 2px solid var(--fg); padding-bottom: 1px;
  }
  .search-result-thumb-empty { background: var(--line, #E6E5E0); }
  /* 빈 상태: 최근/추천을 섹션으로 세로 배치 */
  .search-empty { align-items: flex-start; }
  .search-sec { width: 100%; margin-bottom: 22px; }
  .search-sec:last-child { margin-bottom: 0; }
  .search-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .search-sec .meta-label::after { content: none; }
  .search-sec .search-suggestions { display: flex; gap: 10px 18px; flex-wrap: wrap; }
  .search-sec .suggest {
    font-size: 14px; display: inline-flex; align-items: center; gap: 6px;
  }
  .search-sec .suggest i { font-size: 11px; color: var(--muted); }
  .search-recent-clear {
    border: none; background: transparent; cursor: pointer;
    font-size: 11px; letter-spacing: 0.04em; color: var(--muted);
    text-decoration: underline; padding: 0;
  }
  .search-recent-clear:hover { color: var(--fg); }
  .search-no-results {
    padding: 60px 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
  }

  /* About steps mobile */
  @media (max-width: 900px) {
    .step-row {
      grid-template-columns: 48px 1fr;
      gap: 18px;
      padding: 22px 0;
    }
    .step-no { font-size: 12px; padding-top: 2px; }
    .step-kr { font-size: 18px; gap: 8px; margin-bottom: 6px; }
    .step-en { font-size: 10px; }
    .step-desc { font-size: 13px; }
    .page-hero { padding: 48px 0 32px; }
    .about-hero { padding: 48px 0 40px; }
    .about-steps { padding: 48px 0 64px; }
    .about-quote-block { padding: 64px 0; }
    .about-editor { padding: 48px 0 80px; }
    .editor-note { font-size: 16px; }
    .series-stats { font-size: 10px; gap: 8px; margin-top: 20px; }
    /* 모바일: 글 수/페이지 표시 너비를 줄임 — 자간 축소 + 0.5pt 작게 */
    .list-meta { font-size: 10.5px; letter-spacing: 0.05em; gap: 7px; }
    .list-meta strong { margin-right: 3px; }
    .series-card-head {
      grid-template-columns: 1fr 36px;
      grid-template-areas: "meta toggle" "main main" "count count";
      column-gap: 14px;
      row-gap: 10px;
      padding: 22px 0;
    }
    .series-card-head:hover { padding-left: 8px; }
    .series-card-meta { gap: 8px; }
    .series-card-main h2 { font-size: 18px; }
    .series-card-main p { font-size: 12.5px; }
    .series-card-count { text-align: left; font-size: 10px; align-self: flex-start; padding-top: 0; }
    .series-toggle { width: 32px; height: 32px; align-self: start; }
    .series-card.open .series-card-body { max-height: 800px; }
    .part {
      grid-template-columns: 28px 72px 1fr auto;
      gap: 10px 12px;
      padding: 14px 0;
    }
    .part:hover { padding-left: 10px; }
    .part-num { font-size: 11px; padding-left: 0; }
    .part-thumb { width: 72px; }
    .part-title { font-size: 15px; }
    .part-sub { font-size: 12px; }
    .note { padding: 28px 0; }
    .note-text { font-size: 15px; }
    .search-modal-inner { padding: 0 20px; }
    .search-bar input { font-size: 18px; }
    .search-result { grid-template-columns: 72px 1fr; gap: 12px; }
    .search-result-title { font-size: 15px; }
    .quote-widget { padding: 56px 0; }
    .home-notes, .home-curation { padding: 56px 0; }
    .notes-preview { grid-template-columns: 1fr; }
    .notes-preview .note-item {
      border-left: none; border-top: 1px solid var(--line);
      padding: 20px 0;
    }
    .notes-preview .note-item:first-child { border-top: none; padding-top: 0; }
    .curation-list { grid-template-columns: 1fr; gap: 0; }
    .curation-item { padding-top: 20px; padding-bottom: 24px; }
    .curation-item:first-child { border-top: none; padding-top: 0; }
    .footer-top { flex-direction: column; align-items: stretch; gap: 18px; }
    .notice-ticker { width: 100%; }
    .ticker-track { width: 100%; }
    .footer-bottom { flex-direction: column; gap: 8px; }
    .footer-links { flex-wrap: wrap; gap: 16px; }
    .drawer-inner { padding: 0 35px; }
  }

  /* ========== About sections (extended) ========== */
  .about-quote-inline {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.35;
    color: var(--fg);
    margin: 32px 0;
    padding-left: 28px;
    border-left: 2px solid var(--fg);
  }
  .about-lead strong { color: var(--fg); font-weight: 600; }
  .about-lead + .about-lead { margin-top: 18px; }
  .about-section {
    padding: 80px 0;
    border-top: 1px solid var(--line);
  }
  .about-section .meta-label { display: block; margin-bottom: 18px; }
  .about-section.alt { background: var(--card); }
  .about-h {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 36px;
  }
  .about-text {
    max-width: 960px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .about-text p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--body);
    margin-bottom: 20px;
  }
  .about-text p:last-child { margin-bottom: 0; }
  .about-text strong { color: var(--fg); font-weight: 600; }

  /* Services blocks (explore / with) */
  .about-services {
    padding: 96px 0;
    border-top: 1px solid var(--line);
  }
  .services-block {
    display: grid; grid-template-columns: 280px 1fr;
    gap: 48px;
    padding: 48px 0;
    border-bottom: 1px solid var(--line);
  }
  .services-block:first-child { padding-top: 0; }
  .services-block:last-child { border-bottom: none; padding-bottom: 0; }
  .services-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 12px;
  }
  .services-head p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 220px;
  }
  .services-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  }
  .service-card {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 110px;
    padding: 22px 22px;
    background: var(--hover);
    border-radius: 4px;
    color: var(--fg);
    text-align: center;
    transition: background .2s, transform .2s;
    cursor: pointer;
  }
  .service-card:hover {
    background: var(--hover-strong);
    transform: translateY(-2px);
  }
  .service-name {
    font-size: 14px; font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  .service-sub {
    font-size: 12px; color: var(--muted);
    line-height: 1.5;
  }

  /* ========== Notice view ========== */
  .page-title-en {
    display: block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 14px;
  }
  .notice-body { padding: 16px 0 100px; }
  .notice-lead {
    max-width: 960px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--body);
    padding: 20px 0 4px;
    border-top: 1px solid var(--line);
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .notice-section {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    max-width: 960px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .notice-h {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 10px;
    color: var(--fg);
    word-break: keep-all;
  }
  .notice-section p {
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--body);
    margin-bottom: 8px;
    letter-spacing: -0.003em;
  }
  .notice-section p:last-child { margin-bottom: 0; }
  .notice-section em {
    font-style: normal;
    color: var(--muted);
    font-size: 11.5px;
    display: inline-block;
    margin-top: 2px;
  }
  .notice-list {
    list-style: none;
    margin: 6px 0 4px;
    padding-left: 0;
  }
  .notice-list li {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--body);
    padding: 2px 0 2px 14px;
    position: relative;
  }
  .notice-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--muted);
  }
  .notice-cite {
    background: var(--hover);
    padding: 14px 18px;
    margin: 12px 0;
    border-left: 2px solid var(--fg);
  }
  .notice-cite .meta-label { display: block; margin-bottom: 4px; font-size: 9px; }
  .notice-cite p {
    font-size: 12px;
    color: var(--fg);
    line-height: 1.6;
    margin: 0;
    font-variant-numeric: tabular-nums;
  }
  .notice-foot {
    padding: 40px 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .notice-date {
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  .cc-marks {
    display: flex; gap: 8px;
  }
  .cc-circle {
    width: 36px; height: 36px;
    border: 1px solid var(--fg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fg);
  }
  .notice-actions {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .notice-back {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--muted);
    transition: color .2s;
  }
  .notice-back:hover { color: var(--fg); }
  .notice-cta {
    display: inline-flex;
    padding: 12px 22px;
    background: var(--fg);
    color: var(--bg);
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: opacity .2s;
  }
  .notice-cta:hover { opacity: 0.85; }

  @media (max-width: 900px) {
    .about-quote-inline { font-size: 18px; padding-left: 18px; margin: 24px 0; }
    .about-section { padding: 48px 0; }
    .about-h { margin-bottom: 24px; }
    .about-text p { font-size: 15px; }
    .about-services { padding: 56px 0; }
    .services-block { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
    .services-grid { grid-template-columns: 1fr; gap: 8px; }
    .service-card { min-height: 80px; padding: 18px 20px; text-align: left; }
    .notice-body { padding: 0 0 80px; }
    .notice-lead { font-size: 14px; padding-top: 0; }
    .notice-section { padding: 22px 0; }
    .notice-h { font-size: 16px; }
    .notice-foot { padding: 32px 0; }
    .cc-circle { width: 32px; height: 32px; font-size: 9px; }
    .page-title-en { font-size: 13px; }
  }

/* ===========================================================
   Editorial templates (Quill 커스텀 블록 — 공개 사이트 렌더)
   에디터에서 삽입한 구분선/풀쿼트/콜아웃/이미지+캡션/2단 비교가
   퍼블리시된 글에서 동일하게 보이도록 정의.
   =========================================================== */

/* Divider */
hr.divider {
  border: none; height: 1px;
  background: rgba(10,10,10,0.12);
  margin: 32px auto; max-width: 80px;
}
body.dark hr.divider { background: rgba(250,250,247,0.18); }

/* Pull quote */
blockquote.pull-quote {
  border-left: 3px solid var(--fg);
  padding: 12px 22px;
  margin: 32px 0;
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
  background: transparent;
}
blockquote.pull-quote p { margin: 0; }
blockquote.pull-quote cite {
  display: block; margin-top: 12px;
  font-size: 13px; color: var(--muted);
  font-style: normal;
}
blockquote.pull-quote cite::before { content: '— '; }

/* Callout */
aside.callout {
  background: rgba(10,10,10,0.04);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 24px 0;
}
body.dark aside.callout { background: rgba(250,250,247,0.05); }
aside.callout strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
aside.callout p { margin: 0; }

/* Image + caption */
figure.img-caption { margin: 32px 0; }
figure.img-caption img { width: 100%; border-radius: 4px; display: block; }
figure.img-caption figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* Two-column */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}
@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ===========================================================
   에디터 단락 스타일 프리셋 + 이미지 정렬 + 자동 목차
   (admin 에디터와 공개 아티클 본문에 공통 적용)
   =========================================================== */

/* 리드 문단(도입부) */
.article-body p.lead {
  font-size: 1.18em;
  line-height: 1.75;
  color: var(--fg);
  font-weight: 500;
  margin: 0 0 26px;
}
/* 캡션 · 작은 글씨 */
.article-body p.caption {
  font-size: 0.82em;
  color: var(--muted);
  line-height: 1.6;
}
/* 형광 강조 */
.article-body mark {
  background: rgba(255, 224, 102, 0.5);
  color: inherit;
  padding: 0 .12em;
  border-radius: 2px;
}
body.dark .article-body mark { background: rgba(255, 224, 102, 0.28); }

/* 이미지 정렬 프리셋 (에디터 image_class_list와 매칭) */
.article-body img.img-float-left,
.article-body figure.img-caption.img-float-left {
  float: left;
  max-width: 48%;
  margin: 6px 24px 16px 0;
}
.article-body img.img-float-right,
.article-body figure.img-caption.img-float-right {
  float: right;
  max-width: 48%;
  margin: 6px 0 16px 24px;
}
.article-body img.img-center-sm,
.article-body figure.img-caption.img-center-sm {
  display: block;
  max-width: 60%;
  margin: 24px auto;
}
.article-body img.img-float-left,
.article-body img.img-float-right,
.article-body img.img-center-sm { height: auto; border-radius: 4px; }
@media (max-width: 640px) {
  .article-body img.img-float-left,
  .article-body img.img-float-right,
  .article-body figure.img-caption.img-float-left,
  .article-body figure.img-caption.img-float-right {
    float: none; max-width: 100%; margin: 18px 0;
  }
  .article-body img.img-center-sm { max-width: 100%; }
}

/* 임베드 영상(유튜브/비메오 등) 반응형 */
.article-body iframe[src*="youtube"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="vimeo"],
.article-body iframe[src*="player"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 6px;
  margin: 28px 0;
}

/* 자동 목차(TOC) */
.article-body .article-toc {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 28px 0;
  background: rgba(0,0,0,0.015);
}
body.dark .article-body .article-toc { background: rgba(255,255,255,0.03); }
.article-body .article-toc > h2,
.article-body .article-toc > h3 {
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.article-body .article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-body .article-toc li { margin: 6px 0; line-height: 1.5; }
.article-body .article-toc li a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-body .article-toc li a:hover { border-bottom-color: var(--fg); }
.article-body .article-toc ul ul { padding-left: 16px; }

/* ===========================================================
   OPINION — Home card + thread page
   =========================================================== */
/* 오피니언 카드 — 일반 .card 구조를 그대로 쓰되 회색 박스 + 다크 텍스트 */
.opinion-card {
  background: var(--hover-soft, rgba(0,0,0,0.04));
  transition: background 0.18s;
}
.opinion-card .card-bottom { transition: opacity 0.45s ease; }
.opinion-card.is-fading .card-bottom { opacity: 0; }
/* 여러 진행중 토픽이 있을 때 회전 인디케이터 — 카드 우측 하단 고정 */
.opinion-rotator-dots {
  display: flex; gap: 5px;
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  margin: 0;
}
.opinion-rotator-dots[hidden] { display: none; }
.opinion-rotator-dots .ord {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border, #d1d5db); transition: background 0.3s ease, width 0.3s ease;
}
.opinion-rotator-dots .ord.on { width: 14px; border-radius: 3px; background: var(--fg, #1f2937); }
@media (prefers-reduced-motion: reduce) {
  .opinion-card .card-bottom { transition: none; }
}
.opinion-card:hover { background: var(--hover, rgba(0,0,0,0.06)); }
/* 준비중(OFF·진행중 없음) 카드는 클릭 불가 표시 + hover 강조 제거 */
.opinion-card.is-disabled,
.poll-card.is-disabled { cursor: default; }
.opinion-card.is-disabled:hover,
.poll-card.is-disabled:hover { background: var(--hover-soft, rgba(0,0,0,0.04)); }
body.dark .opinion-card.is-disabled:hover,
body.dark .poll-card.is-disabled:hover { background: rgba(255,255,255,0.04); }
.opinion-card .card-thumb,
.opinion-card .card-overlay { display: none; }
.opinion-card .card-top { color: var(--muted); }
.opinion-card .card-cat { color: var(--muted); }
.opinion-card .card-bottom { color: var(--fg); }
.opinion-card .card-title { color: var(--fg); }
.opinion-card .card-sub {
  color: var(--muted);
  white-space: normal;        /* 일반 카드와 달리 줄바꿈 허용 */
  overflow: visible;
  text-overflow: clip;
  word-break: keep-all;
}
.opinion-card .card-meta { color: var(--muted); }
.opinion-card .opinion-lounge-link {
  display: inline-block; margin-top: 10px;
  font-size: 11px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.opinion-card .opinion-lounge-link:hover { color: var(--fg); }
body.dark .opinion-card { background: rgba(255,255,255,0.04); }
body.dark .opinion-card:hover { background: rgba(255,255,255,0.08); }

/* 에디터 모집 카드 — 오피니언/설문 카드와 동일한 회색 톤 */
.recruit-card {
  background: var(--hover-soft, rgba(0,0,0,0.04));
  transition: background 0.18s;
}
.recruit-card:hover { background: var(--hover, rgba(0,0,0,0.06)); }
.recruit-card .card-thumb,
.recruit-card .card-overlay { display: none; }
.recruit-card .card-top,
.recruit-card .card-cat,
.recruit-card .card-meta { color: var(--muted); }
.recruit-card .card-bottom,
.recruit-card .card-title { color: var(--fg); }
.recruit-card .card-sub {
  color: var(--muted);
  white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all;
}
body.dark .recruit-card { background: rgba(255,255,255,0.04); }
body.dark .recruit-card:hover { background: rgba(255,255,255,0.08); }

/* Mobile — place opinion card at the end of LATEST (just above UPCOMING section) */
@media (max-width: 900px) {
  .opinion-card { order: 98; }
  .upcoming-card { order: 100; }

  /* 모바일에서는 absolute 포지셔닝 해제해 본문이 잘리지 않게 */
  .opinion-card {
    aspect-ratio: auto;
    min-height: 220px;
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
  }
  .opinion-card .card-top,
  .opinion-card .card-bottom {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    color: inherit;
    display: block;
  }
  .opinion-card .card-top { margin-bottom: 2px; }
  /* 본문 블록을 박스 하단에 정렬 → PC(absolute bottom)와 동일한 레이아웃 */
  .opinion-card .card-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
  .opinion-card .card-title { font-size: 17px; color: var(--fg); margin-bottom: 4px; }
  .opinion-card .card-sub {
    font-size: 13px; line-height: 1.6; color: var(--muted);
    white-space: normal; overflow: visible; text-overflow: clip;
    word-break: keep-all;
  }
  .opinion-card .card-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
  .opinion-card .opinion-lounge-link { margin-top: 6px; }
}

/* ===========================================================
   POLL — Home card + vote modal
   =========================================================== */
/* 설문 카드 — 오피니언 카드와 동일한 회색 박스 레이아웃 재사용 */
.poll-card {
  background: var(--hover-soft, rgba(0,0,0,0.04));
  transition: background 0.18s;
  cursor: pointer;
}
.poll-card:hover { background: var(--hover, rgba(0,0,0,0.06)); }
.poll-card .card-thumb,
.poll-card .card-overlay { display: none; }
.poll-card .card-top,
.poll-card .card-cat,
.poll-card .card-meta { color: var(--muted); }
.poll-card .card-bottom,
.poll-card .card-title { color: var(--fg); }
.poll-card .card-sub {
  color: var(--muted);
  white-space: normal; overflow: visible; text-overflow: clip;
  word-break: keep-all;
}
body.dark .poll-card { background: rgba(255,255,255,0.04); }
body.dark .poll-card:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 900px) {
  .poll-card { order: 99; }
  .poll-card {
    aspect-ratio: auto; min-height: 200px;
    padding: 22px 20px 24px;
    display: flex; flex-direction: column; gap: 10px; overflow: visible;
  }
  .poll-card .card-top,
  .poll-card .card-bottom {
    position: static; top: auto; bottom: auto; left: auto; right: auto;
    color: inherit; display: block;
  }
  .poll-card .card-top { margin-bottom: 2px; }
  /* 본문 블록을 박스 하단에 정렬 → PC(absolute bottom)와 동일한 레이아웃 */
  .poll-card .card-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
  .poll-card .card-title { font-size: 17px; color: var(--fg); margin-bottom: 4px; }
  .poll-card .card-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
}

/* 투표 모달 */
.poll-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); padding: 24px;
  opacity: 0; transition: opacity 0.18s;
}
body.dark .poll-modal { background: rgba(0,0,0,0.7); }
.poll-modal.open { display: flex; opacity: 1; }
.poll-modal-inner {
  position: relative;
  background: var(--bg, #fff); color: var(--fg);
  border: 1px solid var(--line, #e5e7eb); border-radius: 18px;
  width: 100%; max-width: 480px; padding: 36px 34px 32px;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.35);
  transform: translateY(12px) scale(.99); transition: transform 0.2s ease;
}
.poll-modal.open .poll-modal-inner { transform: translateY(0) scale(1); }
.poll-modal-close {
  position: absolute; top: 18px; right: 18px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 18px; padding: 4px;
  transition: color .15s;
}
.poll-modal-close:hover { color: var(--fg); }
.poll-modal-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 13px;
}
.poll-modal-tag::before {
  content: ""; width: 18px; height: 1.5px; background: var(--fg); display: inline-block; opacity: .55;
}
.poll-modal-q {
  font-size: 21px; line-height: 1.4; font-weight: 800; letter-spacing: -.01em;
  color: var(--fg); margin: 0 0 22px; padding-bottom: 22px; word-break: keep-all;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.poll-notice { font-size: 14px; line-height: 1.8; color: var(--muted); margin: 8px 0 4px; }
.poll-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted); margin: 18px 0 0; line-height: 1.5;
}
.poll-hint i { font-size: 11px; opacity: .8; }

/* 선택지 버튼 — 마커(A·B·C) + 텍스트 + 선택 체크 */
.poll-opts { display: flex; flex-direction: column; gap: 9px; }
.poll-opt-btn {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  padding: 14px 15px; font-size: 14.5px; font-family: inherit;
  color: var(--fg); background: var(--card, #fff);
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  cursor: pointer; transition: background .16s, border-color .16s, transform .16s;
}
.poll-opt-btn:hover:not(:disabled) { border-color: var(--fg); transform: translateY(-1px); }
.poll-opt-btn:disabled { opacity: 0.45; cursor: default; }
.poll-opt-mark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--hover-soft, rgba(0,0,0,0.05)); color: var(--muted);
  font-size: 12.5px; font-weight: 800; line-height: 1;
  transition: background .16s, color .16s;
}
.poll-opt-btn:hover:not(:disabled) .poll-opt-mark { background: var(--fg); color: var(--bg); }
.poll-opt-text { flex: 1 1 auto; min-width: 0; line-height: 1.5; word-break: keep-all; }
.poll-opt-pick { flex: 0 0 auto; color: var(--fg); font-size: 15px; opacity: 0; transition: opacity .16s; }
.poll-opt-btn:hover:not(:disabled) .poll-opt-pick { opacity: 1; }
body.dark .poll-opt-btn { background: rgba(255,255,255,0.04); }
body.dark .poll-opt-mark { background: rgba(255,255,255,0.08); }

/* 결과 바 — 모노크롬, 내 선택/최다 득표 강조 */
.poll-res { margin-top: 4px; }
.poll-res-row { margin-bottom: 17px; }
.poll-res-row:last-child { margin-bottom: 0; }
.poll-res-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 14px; gap: 12px;
}
.poll-res-label { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); font-weight: 500; word-break: keep-all; min-width: 0; }
.poll-res-mark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--hover-soft, rgba(0,0,0,0.05)); color: var(--muted);
  font-size: 11px; font-weight: 800; line-height: 1;
}
.poll-res-name { min-width: 0; }
.poll-res-row.is-mine .poll-res-name { font-weight: 700; }
.poll-res-row.is-mine .poll-res-mark { background: var(--fg); color: var(--bg); }
.poll-res-mine {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--bg);
  background: var(--fg); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.poll-res-pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; white-space: nowrap; }
.poll-res-row.is-mine .poll-res-pct, .poll-res-row.is-lead .poll-res-pct { color: var(--fg); }
.poll-res-unit { font-size: 11px; font-weight: 600; margin-left: 1px; }
.poll-res-bar {
  height: 8px; border-radius: 999px;
  background: var(--hover-soft, rgba(0,0,0,0.06)); overflow: hidden;
}
.poll-res-fill {
  height: 100%; border-radius: 999px;
  background: var(--line, #d1d5db); transition: width 0.5s cubic-bezier(.16,1,.3,1);
}
.poll-res-row.is-lead .poll-res-fill { background: var(--muted, #9ca3af); }
.poll-res-row.is-mine .poll-res-fill { background: var(--fg); }
.poll-res-total {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 12px; color: var(--muted); margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line, #e5e7eb);
}
.poll-res-total i { font-size: 11px; opacity: .8; }

/* 공용 안내 모달(오피니언/설문 준비중) — 중앙 정렬 */
#siteNoticeModal .poll-modal-inner { text-align: center; max-width: 400px; padding: 38px 30px 32px; }
#siteNoticeModal .poll-modal-q { margin: 0 0 14px; font-size: 20px; }
#siteNoticeModal .poll-notice { margin: 0; }

/* Opinion thread page */
.opinion-view { padding: 80px 0 120px; }
.opinion-hero {
  max-width: 960px; margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
}
.opinion-hero .meta-label {
  display: block; margin-bottom: 16px;
  color: var(--muted); font-size: 12px; letter-spacing: 0.18em;
}
.opinion-title {
  font-size: 36px; font-weight: 700; line-height: 1.25;
  margin: 0 0 14px; word-break: keep-all;
}
.opinion-desc {
  font-size: 16px; line-height: 1.7;
  color: var(--body, var(--fg));
  word-break: keep-all; max-width: 800px;
}
.opinion-meta {
  margin-top: 18px; font-size: 13px; color: var(--muted);
}
.opinion-thread { max-width: 960px; margin: 40px auto 0; }

/* Sticky composer: comments scroll above, input floats at the bottom */
.opinion-composer {
  position: sticky; bottom: 0; z-index: 30;
  margin-top: 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.opinion-composer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -28px;
  height: 28px; pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent);
}
.opinion-input-card {
  background: var(--hover-soft, rgba(0,0,0,0.03));
  border-radius: 10px; padding: 18px; margin-bottom: 0;
}
.opinion-input-card textarea {
  width: 100%; box-sizing: border-box;
  background: transparent; border: none; outline: none;
  font-size: 14px; line-height: 1.7; color: var(--fg);
  font-family: inherit; resize: vertical; min-height: 80px;
}
.opinion-input-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.opinion-input-count { font-size: 11px; color: var(--muted); }
.opinion-submit-btn {
  padding: 8px 18px; font-size: 13px;
  background: var(--fg); color: var(--bg);
  border: none; border-radius: 6px; cursor: pointer;
  font-family: inherit;
}
.opinion-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
body.dark .opinion-input-card { background: rgba(255,255,255,0.04); }
body.dark .opinion-input-foot { border-top-color: rgba(255,255,255,0.08); }
.opinion-login-prompt {
  padding: 22px;
  background: var(--hover-soft, rgba(0,0,0,0.03));
  border-radius: 10px; margin-bottom: 0;
  font-size: 13px; color: var(--muted); text-align: center;
}
body.dark .opinion-login-prompt { background: rgba(255,255,255,0.04); }
.opinion-login-prompt a { color: var(--fg); text-decoration: underline; }
.opinion-comments {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.opinion-comments li.opinion-comment {
  padding: 18px 0;
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.06));
}
.opinion-comments li.opinion-comment:last-child { border-bottom: none; }
.opinion-comment-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 12px; color: var(--muted);
}
.opinion-comment-author { font-weight: 600; color: var(--fg); font-size: 13px; }
.opinion-comment-time { font-variant-numeric: tabular-nums; }
.opinion-comment-text {
  font-size: 14px; line-height: 1.75;
  color: var(--body, var(--fg));
  word-break: keep-all; white-space: pre-wrap;
}
.opinion-comment-delete {
  background: none; border: none; font-size: 11px; color: var(--muted);
  cursor: pointer; padding: 0; margin-left: 8px; font-family: inherit;
}
.opinion-comment-delete:hover { color: #dc2626; }
.opinion-comment-foot {
  display: flex; align-items: center; justify-content: flex-end; margin-top: 14px;
}
/* 메시지 텍스트와 공감 버튼을 같은 행에 정렬 */
.opinion-comment-body {
  display: flex; align-items: flex-end; gap: 16px;
}
.opinion-comment-body .opinion-comment-text { flex: 1; min-width: 0; }
.opinion-comment-body .opinion-comment-foot { margin-top: 0; flex: none; }
.opinion-comment-like {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; color: var(--muted);
  font-size: 12.5px; font-family: inherit; line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}
.opinion-comment-like:hover { color: var(--fg); border-color: var(--fg); }
.opinion-comment-like i { font-size: 12.5px; }
.opinion-comment-like.liked { color: #2563eb; border-color: #2563eb; }
.opinion-comment-like.liked:hover { color: #2563eb; }
.opinion-comment-like .oc-like-count { font-variant-numeric: tabular-nums; }
.opinion-comment-like .oc-like-count:empty { display: none; }
.opinion-empty {
  padding: 60px 0; text-align: center;
  color: var(--muted); font-size: 13px;
  border-bottom: none !important;
}

@media (max-width: 700px) {
  .opinion-view { padding: 40px 0 80px; }
  .opinion-title { font-size: 26px; }
  .opinion-desc { font-size: 14px; }
}

/* ===== 문의(컨택) 폼 모달 + About:Another Movement ===== */
.inq-modal {
  position: fixed; inset: 0; z-index: 960;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 48px 24px; overflow-y: auto;
  opacity: 0; transition: opacity .25s;
}
body.dark .inq-modal { background: rgba(0,0,0,0.7); }
.inq-modal.open { display: flex; opacity: 1; }
.inq-modal-inner {
  width: 100%; max-width: 560px;
  background: var(--bg); border: 1px solid var(--line);
  padding: 48px 44px 40px; position: relative;
  transform: translateY(8px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.inq-modal.open .inq-modal-inner { transform: translateY(0); }
.inq-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .2s, background .2s; z-index: 2;
}
.inq-close:hover { background: var(--hover); color: var(--fg); }
.inq-title {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--fg); margin: 0 0 14px; padding-right: 28px;
}
.inq-intro {
  font-size: 13px; color: var(--muted); line-height: 1.7;
  margin: 0 0 26px;
}
/* 기능 OFF 안내 모달 */
.inq-modal-inner.inq-notice { text-align: center; max-width: 420px; }
.inq-notice-msg {
  font-size: 14px; color: var(--fg); line-height: 1.8;
  margin: 4px 0 28px; white-space: normal;
}
.inq-modal-inner.inq-notice .inq-submit { width: 100%; }
.inq-fields { display: flex; flex-direction: column; gap: 16px; }
.inq-field { display: flex; flex-direction: column; gap: 6px; }
.inq-label { font-size: 12.5px; color: var(--fg); font-weight: 500; }
.inq-req { color: #dc2626; font-style: normal; }
.inq-opt { color: var(--muted); font-style: normal; font-size: 11px; font-weight: 400; }
.inq-field input,
.inq-field select,
.inq-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; font-size: 13.5px;
  border: 1px solid var(--line); background: transparent;
  color: var(--fg); font-family: inherit; outline: none;
  border-radius: 8px; transition: border-color .2s;
}
.inq-field textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.inq-field input:focus,
.inq-field select:focus,
.inq-field textarea:focus { border-color: var(--fg); }
/* 로그인 정보로 자동 채워진 이름·이메일(수정 불가) */
.inq-field input.inq-locked {
  background: var(--bg-soft, rgba(138,138,133,0.10));
  color: var(--fg-soft, #8A8A85);
  cursor: not-allowed;
}
.inq-field input.inq-locked:focus { border-color: var(--line); }
/* 체크박스 그룹(에디터 지원 포맷 등) */
.inq-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.inq-check {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; color: var(--fg); cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.inq-check input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--fg); }
.inq-check:has(input:checked) { border-color: var(--fg); background: var(--hover-soft, rgba(138,138,133,0.10)); }
.inq-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A85' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }

/* 첨부 */
.inq-file { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; cursor: pointer; }
.inq-file-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 10px 18px; border: 1px dashed var(--line); border-radius: 999px;
  font-size: 12.5px; color: var(--muted); transition: border-color .2s, color .2s;
}
.inq-file:hover .inq-file-btn { border-color: var(--fg); color: var(--fg); }
.inq-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.inq-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px;
}
.inq-file-item i { color: var(--muted); }
.inq-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inq-file-size { color: var(--muted); font-size: 11px; }
.inq-file-del { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; }
.inq-file-del:hover { color: #dc2626; }

/* 동의 */
.inq-consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 22px 0 6px; font-size: 12.5px; color: var(--fg); cursor: pointer; line-height: 1.5;
}
.inq-consent input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--fg); cursor: pointer; flex-shrink: 0; }
.inq-consent a { color: var(--muted); text-decoration: underline; }
.inq-err { color: #dc2626; font-size: 12px; min-height: 16px; margin-top: 8px; }
.inq-submit {
  width: 100%; height: 48px; margin-top: 8px;
  border: none; border-radius: 999px;
  background: var(--fg); color: var(--bg);
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: opacity .2s;
}
.inq-submit:hover { opacity: 0.85; }
.inq-submit:disabled { opacity: 0.5; cursor: default; }

/* About:Another Movement 모달 */
.inq-modal-inner.about-mv .meta-label { display: block; margin-bottom: 10px; }
.amv-body { margin-top: 4px; }
.amv-body p { font-size: 14px; line-height: 1.8; color: var(--fg); margin: 0 0 16px; }
.amv-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
  margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line);
}
.amv-meta > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg); }
.amv-meta .meta-label { margin: 0; }
.amv-meta a { color: var(--fg); text-decoration: underline; }
.footer-anomvt-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .inq-modal { padding: 24px 14px; }
  .inq-modal-inner { padding: 44px 22px 32px; }
  .inq-title { font-size: 19px; }
  .amv-meta { grid-template-columns: 1fr; }
}

/* =====================================================================
 * 팟캐스트 플레이어 (podcast.html 프로토타입 → 공개 아티클 공용)
 * pod-player.js + article.html renderPodcast()에서 사용
 * ===================================================================== */
:root { --pc-accent: var(--fg); }

/* 기존 아티클(.container)과 동일한 양옆 마진·패딩 */
.pod-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width:900px){ .pod-wrap { padding: 0 35px; } }
@media (max-width:600px){ .pod-wrap { padding: 0 20px; } }
/* 읽기 섹션(챕터·스크립트·다운로드·참고자료)은 본문(.article-body)과 동일한 720px 칼럼으로 가운데 정렬 */
.pod-section > * { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 헤로 */
.pod-hero { padding: 40px 0 28px; }
.pod-eyebrow { display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.pod-eyebrow .dot { width:5px; height:5px; border-radius:50%; background:var(--pc-accent); }
.pod-title { font-size: clamp(30px, 5.2vw, 50px); line-height:1.14; font-weight:800; letter-spacing:-.02em; margin:18px 0 0; word-break:keep-all; }
.pod-sub { font-size:16px; line-height:1.6; color:var(--muted); margin:16px 0 0; max-width:620px; word-break:keep-all; }
.pod-hero .article-meta { margin-top: 28px; }

/* 플레이어 — 가운데 감각적 스테이지 */
.pod-player { margin-top: 36px; display:flex; flex-direction:column; align-items:center; }
.pod-stage { position:relative; width:240px; height:240px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.pod-logo-bg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64%; opacity:.12; pointer-events:none; z-index:0; }
.pod-logo-bg img { width:100%; height:auto; display:block; }
.pod-logo-bg .logo-white { display:none; }
html.dark .pod-logo-bg .logo-black, body.dark .pod-logo-bg .logo-black { display:none; }
html.dark .pod-logo-bg .logo-white, body.dark .pod-logo-bg .logo-white { display:block; }
.pod-ring { position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; border:1.5px solid var(--fg); opacity:0; transform:scale(1); pointer-events:none; z-index:1; }
body.pod-playing .pod-ring { animation: podRipple 2.8s cubic-bezier(.22,1,.36,1) infinite; }
body.pod-playing .pod-ring:nth-child(3){ animation-delay:.93s; }
body.pod-playing .pod-ring:nth-child(4){ animation-delay:1.86s; }
@keyframes podRipple { 0%{ transform:scale(1); opacity:.26; } 100%{ transform:scale(2.5); opacity:0; } }
.pod-speak { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:13px; opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:2; }
body.pod-playing .pod-speak { opacity:1; }
.pod-speak span { width:13px; height:13px; border-radius:50%; background:var(--fg); display:block; }
body.pod-playing .pod-speak span { animation: podSpeak 1.1s ease-in-out infinite; }
body.pod-playing .pod-speak span:nth-child(2){ animation-delay:.16s; }
body.pod-playing .pod-speak span:nth-child(3){ animation-delay:.32s; }
@keyframes podSpeak { 0%,100%{ transform:translateY(0) scale(.7); opacity:.4; } 30%{ transform:translateY(-13px) scale(1.25); opacity:1; } 55%{ transform:translateY(3px) scale(.85); opacity:.65; } }
body.pod-playing .pod-stage:hover .pod-speak { opacity:.12; }
.pod-playbtn { position:relative; z-index:3; flex:0 0 auto; width:84px; height:84px; border-radius:50%; border:none; cursor:pointer; background:var(--fg); color:var(--bg); font-size:26px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.16); transition:opacity .3s ease, transform .15s ease, box-shadow .3s ease; }
.pod-playbtn:hover { transform:scale(1.05); }
.pod-playbtn:active { transform:scale(.96); }
.pod-playbtn .fa-stop { display:none; }
body.pod-playing .pod-playbtn { opacity:0; pointer-events:none; box-shadow:none; }
body.pod-playing .pod-playbtn .fa-play { display:none; }
body.pod-playing .pod-playbtn .fa-stop { display:inline; }
body.pod-playing .pod-stage:hover .pod-playbtn { opacity:1; pointer-events:auto; box-shadow:0 10px 30px rgba(0,0,0,.16); }

/* 독자 전용 팟캐스트 잠금 카드 (비회원) */
.pod-stage--locked { flex-direction:column; }
.pod-lock-inner {
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:0 12px;
}
.pod-lock-inner svg { width:30px; height:30px; color:var(--muted); margin-bottom:2px; }
.pod-lock-title { font-size:15px; font-weight:600; color:var(--fg); }
.pod-lock-sub { font-size:12.5px; color:var(--muted); }
.pod-lock-btn {
  margin-top:10px; padding:9px 20px; border-radius:999px;
  border:none; cursor:pointer; background:var(--fg); color:var(--bg);
  font-size:13px; font-weight:600; font-family:inherit;
  transition:transform .15s ease, opacity .15s ease;
}
.pod-lock-btn:hover { transform:scale(1.04); }
.pod-lock-btn:active { transform:scale(.97); }

/* 섹션/챕터/본문 */
.pod-section { padding: 40px 0; border-top:1px solid var(--line); }
.pod-h2 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 18px; }
.pod-chapters { display:flex; flex-direction:column; gap:2px; }
.pod-chap { display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:12px 12px; border-radius:10px; color:var(--fg); transition:background .15s ease; }
.pod-chap:hover { background:var(--card); }
.pod-chap .t { font-variant-numeric:tabular-nums; font-size:13px; color:var(--pc-accent); font-weight:700; width:48px; flex:0 0 auto; }
.pod-chap .l { font-size:15px; font-weight:600; }
.pod-chap.active { background:var(--card); }
.pod-chap.active .l { color:var(--pc-accent); }
.pod-end { padding:48px 0 120px; text-align:center; color:var(--muted); font-size:13px; }

/* 다운로드 탭 */
.pod-download { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:20px 24px; border:1px solid var(--line); border-radius:8px; background:var(--hover-soft); }
.pod-dl-info { display:flex; align-items:center; gap:16px; min-width:0; }
.pod-dl-ic { flex:none; width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--fg); color:var(--bg); font-size:18px; }
.pod-dl-txt { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pod-dl-name { font-size:15px; font-weight:700; color:var(--fg); letter-spacing:-.01em; word-break:keep-all; }
.pod-dl-meta { font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.pod-dl-btn { flex:none; display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px; background:var(--fg); color:var(--bg); font-size:13.5px; font-weight:700; text-decoration:none; transition:opacity .2s, transform .2s; }
.pod-dl-btn:hover { opacity:.82; transform:translateY(-1px); }
.pod-dl-btn i { font-size:13px; }
@media (max-width:600px){ .pod-download { padding:18px; } .pod-dl-btn { width:100%; justify-content:center; } }

/* 플로팅 재생 바 */
.pod-dock { position:fixed; left:0; right:0; bottom:0; z-index:200; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.pod-dock.show { transform:translateY(0); }
.pod-dock-inner { max-width:1280px; margin:0 auto; padding:12px 32px; display:flex; align-items:center; gap:18px; }
@media (max-width:600px){ .pod-dock-inner { padding:10px 18px; gap:12px; } }
.pod-dock-btn { width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer; background:var(--pc-accent); color:var(--bg); font-size:16px; display:flex; align-items:center; justify-content:center; }
.pod-dock-btn .fa-pause { display:none; }
body.pod-playing .pod-dock-btn .fa-play { display:none; }
body.pod-playing .pod-dock-btn .fa-pause { display:inline; }
.pod-skip { width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; position:relative; }
.pod-skip:hover { border-color:var(--fg); }
.pod-dock-meta { flex:0 0 auto; max-width:230px; min-width:0; }
.pod-dock-meta .nm { font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod-dock-track { flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
.pod-dock-time { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.pod-prog { flex:1; min-width:0; height:18px; display:flex; align-items:center; cursor:pointer; }
.pod-prog-track { position:relative; width:100%; height:4px; border-radius:999px; background:var(--line); }
.pod-prog-fill { position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:999px; background:var(--pc-accent); }
.pod-prog-thumb { position:absolute; top:50%; left:0%; width:12px; height:12px; border-radius:50%; background:var(--pc-accent); transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.25); }
.pod-rate { flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; border-radius:999px; font-size:12px; font-weight:700; padding:7px 12px; }
.pod-rate:hover { border-color:var(--fg); }
.pod-chapbtn { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.pod-chapbtn:hover { border-color:var(--fg); }
.pod-chapbtn.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
@media (max-width:760px){ .pod-dock-meta, .pod-skip, .pod-rate { display:none; } }
.pod-chap-panel { max-height:0; overflow:hidden; transition:max-height .38s cubic-bezier(.22,1,.36,1); border-bottom:1px solid transparent; }
.pod-chap-panel.open { max-height:min(52vh, 380px); overflow-y:auto; border-bottom-color:var(--line); }
.pod-chap-panel-inner { max-width:1280px; margin:0 auto; padding:14px 32px 10px; }
@media (max-width:600px){ .pod-chap-panel-inner { padding:12px 18px 8px; } }
.pod-chap-panel-h { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 8px; padding:0 12px; }
.pod-chap-panel .pod-chap { padding:10px 12px; }

/* 카드 오디오 픽토 (영상 픽토와 동일 룩) */
.card-audio-badge { position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.4); backdrop-filter:blur(6px); color:#fff; font-size:12px; pointer-events:none; }
.card-audio-badge i { font-size:13px; }

/* =====================================================================
 * 오프라인 주소 박스 (본문 템플릿) — 클릭 시 구글맵 (app.js에서 처리)
 * ===================================================================== */
.map-box { display:flex; align-items:center; gap:16px; width:100%; box-sizing:border-box; margin:28px 0; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--hover-soft); text-decoration:none; color:var(--fg); cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.map-box:hover { border-color:var(--fg); transform:translateY(-1px); }
.map-box-pin { flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--fg); color:var(--bg); font-size:17px; }
.map-box-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.map-box-name { font-size:16px; font-weight:700; letter-spacing:-.01em; word-break:keep-all; }
.map-box-addr { font-size:13.5px; color:var(--muted); line-height:1.5; word-break:keep-all; }
.map-box-cta { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--pc-accent); white-space:nowrap; }
.map-box-cta i { font-size:11px; }
@media (max-width:600px){ .map-box { flex-wrap:wrap; } .map-box-cta { width:100%; justify-content:flex-end; } }

/* =====================================================================
 * #27 글로벌 이어듣기 — 하단 지속 재생바 + "계속 들으시겠습니까?" 모달
 * ===================================================================== */
body.has-ga { padding-bottom: 72px; }
.ga-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--bg); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.10);
  animation: gaSlideUp .28s ease;
}
@keyframes gaSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ga-inner { max-width: 1080px; margin: 0 auto; padding: 9px 18px; display: flex; align-items: center; gap: 10px; }
.ga-thumb {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px;
  background: var(--hover-soft) center/cover no-repeat; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px; overflow: hidden;
}
.ga-play, .ga-skip, .ga-rate, .ga-close, .ga-resume {
  flex: 0 0 auto; border: none; background: transparent; color: var(--fg);
  cursor: pointer; border-radius: 50%; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background .15s ease;
}
.ga-play { background: var(--fg); color: var(--bg); }
.ga-skip:hover, .ga-rate:hover, .ga-close:hover { background: var(--hover-soft); }
.ga-play .fa-pause, .ga-bar.ga-playing .ga-play .fa-play { display: none; }
.ga-bar.ga-playing .ga-play .fa-pause { display: inline-block; }
.ga-skip { font-size: 13px; color: var(--muted); }
.ga-rate { width: auto; padding: 0 10px; border-radius: 16px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); }
.ga-resume { width: auto; padding: 0 14px; border-radius: 18px; background: var(--pc-accent, var(--fg)); color: #fff; font-size: 12.5px; font-weight: 700; }
.ga-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ga-title {
  font-size: 13px; font-weight: 700; color: var(--fg); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em;
}
.ga-title:hover { text-decoration: underline; }
.ga-track { display: flex; align-items: center; gap: 8px; }
.ga-time { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; }
.ga-time:last-child { text-align: right; }
.ga-prog { position: relative; flex: 1; min-width: 0; height: 14px; display: flex; align-items: center; cursor: pointer; }
.ga-prog::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 2px; background: var(--line); z-index: 0; }
.ga-prog-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 2px; background: var(--fg); width: 0; z-index: 1; pointer-events: none; }
.ga-close { color: var(--muted); }
@media (max-width: 600px) {
  .ga-inner { gap: 6px; padding: 8px 12px; }
  .ga-skip, .ga-thumb, .ga-rate { display: none; }
}

/* "계속 들으시겠습니까?" 모달 */
.ga-modal-ov {
  position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: gaFade .18s ease;
}
@keyframes gaFade { from { opacity: 0; } to { opacity: 1; } }
.ga-modal {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  max-width: 360px; width: 100%; padding: 26px 24px 20px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.ga-modal-h { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; color: var(--fg); }
.ga-modal-p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; word-break: keep-all; }
.ga-modal-btns { display: flex; gap: 10px; }
.ga-modal-no, .ga-modal-yes {
  flex: 1; padding: 11px 0; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.ga-modal-no { background: transparent; color: var(--muted); }
.ga-modal-no:hover { background: var(--hover-soft); color: var(--fg); }
.ga-modal-yes { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.ga-modal-yes:hover { opacity: .88; }

/* =====================================================================
 * #22 맥락 추천 — 주 추천 카드 아래 점수 기반 추가 추천 3종
 * ===================================================================== */
.rec-more { margin-top: 22px; }
.rec-more--solo { margin-top: 0; }
.rec-more-h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 12px; }
.rec-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* 추천 카드 — 메인 썸네일 카드(.card)와 동일한 오버레이 스타일 (조회/게시일 미표시) */
.rec-card { display: block; text-decoration: none; border-radius: 12px; }
.rec-card .card-thumb-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1f1f1f, #3a3a3a); }
.rec-card .card-thumb-empty span { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; font-style: italic; letter-spacing: .02em; color: rgba(255,255,255,.5); }
@media (max-width: 720px) {
  .rec-more-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ===== 응원 보상 (마이페이지 독자 등급/뱃지) #18 ===== */
.reward-wrap { max-width: 620px; margin: 0 auto; }
.reward-hero { display: flex; align-items: center; gap: 18px; padding: 22px; border: 1px solid var(--border, #e7e3da); border-radius: 18px; background: linear-gradient(135deg, #fbf9f4 0%, #f4efe4 100%); }
.reward-crest { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1a1a1a; color: #f4e3b0; font-size: 28px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.reward-hero-body { flex: 1; min-width: 0; }
.reward-tier-name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.reward-tier-desc { font-size: 13px; color: var(--muted, #8a8378); margin-top: 2px; }
.reward-progress { margin-top: 12px; }
.reward-progress-track { height: 8px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.reward-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #c9a24b, #1a1a1a); transition: width .5s ease; }
.reward-progress-label { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--muted, #8a8378); }
.reward-progress-label b { color: var(--text, #1a1a1a); font-weight: 700; }
.reward-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.reward-stat { text-align: center; padding: 14px 6px; border: 1px solid var(--border, #e7e3da); border-radius: 14px; background: #fff; }
.reward-stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.reward-stat span { font-size: 11.5px; color: var(--muted, #8a8378); }
.reward-stat--cheer b { color: #c9893b; }
.reward-badges-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.reward-h { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.reward-badge-count { font-size: 13px; color: var(--muted, #8a8378); font-weight: 700; }
/* PC: 4열 × 3행(12개), 모바일: 3열 × 4행 */
.reward-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.reward-badge { font: inherit; width: 100%; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 8px; border: 1px solid var(--border, #e7e3da); border-radius: 14px; background: #fff; opacity: .5; filter: grayscale(1); transition: transform .15s ease, box-shadow .15s ease; }
.reward-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.reward-badge:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.reward-badge.got { opacity: 1; filter: none; border-color: var(--fg); background: var(--card, #fff); }
.reward-badge.got:hover { transform: translateY(-2px); }
.reward-badge-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hover-soft, rgba(0,0,0,.06)); font-size: 18px; color: var(--muted, #6b6357); }
.reward-badge.got .reward-badge-ic { background: var(--fg); color: var(--bg); }
.reward-badge-label { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.reward-badge-hint { font-size: 10.5px; color: var(--muted, #8a8378); }
.reward-badge.got .reward-badge-hint { color: var(--fg); font-weight: 700; }
.reward-foot { margin-top: 20px; font-size: 12px; color: var(--muted, #8a8378); text-align: center; line-height: 1.6; }
@media (max-width: 560px) {
  .reward-hero { padding: 18px; gap: 14px; }
  .reward-crest { width: 54px; height: 54px; font-size: 23px; }
  .reward-stats { grid-template-columns: repeat(2, 1fr); }
  .reward-badges { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ===== 뱃지 상세 모달 (달성 조건 + 내 진행도) ===== */
.badge-detail-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.42); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.badge-detail-backdrop.open { opacity: 1; visibility: visible; }
.badge-detail-card { position: relative; width: 100%; max-width: 360px; background: var(--card, #fff); border: 1px solid var(--line, #e6e5e0); border-radius: 18px; padding: 30px 24px 26px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.18); transform: translateY(8px) scale(.98); transition: transform .2s ease; }
.badge-detail-backdrop.open .badge-detail-card { transform: none; }
.badge-detail-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted, #8a8378); cursor: pointer; border-radius: 8px; }
.badge-detail-close:hover { background: var(--hover, rgba(0,0,0,.05)); color: var(--fg); }
.badge-detail-ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; background: var(--hover-soft, rgba(0,0,0,.06)); color: var(--muted, #8a8378); filter: grayscale(1); opacity: .7; }
.badge-detail-ic.got { background: var(--fg); color: var(--bg); filter: none; opacity: 1; }
.badge-detail-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; }
.badge-detail-status { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: var(--hover, rgba(0,0,0,.06)); color: var(--muted, #8a8378); }
.badge-detail-status.got { background: var(--fg); color: var(--bg); }
.badge-detail-desc { font-size: 13px; color: var(--muted, #6b6357); line-height: 1.6; margin: 14px 0 0; }
.badge-detail-cond { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 13px; }
.badge-detail-cond-label { font-size: 11px; font-weight: 700; color: var(--muted, #8a8378); padding: 2px 8px; border: 1px solid var(--line, #e6e5e0); border-radius: 999px; }
.badge-detail-progress { margin: 16px 0 0; }
.badge-detail-bar { height: 8px; border-radius: 999px; background: var(--hover, rgba(0,0,0,.07)); overflow: hidden; }
.badge-detail-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--fg); transition: width .4s ease; }
.badge-detail-progress-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted, #8a8378); }
.badge-detail-foot { margin: 18px 0 0; font-size: 13px; font-weight: 700; color: var(--fg); line-height: 1.5; }
body.dark .badge-detail-card, html.dark .badge-detail-card { background: #1c1c1a; border-color: #33322e; }

/* ===== 의견 → 인사이트 (오피니언 댓글 큐레이션) #16 ===== */
.opinion-comments li.opinion-comment.is-insight { position: relative; border: 1px solid #e3cf94; background: linear-gradient(135deg, #fffdf6, #f9f3e1); border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(180,144,47,.08); }
.oc-insight-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #1a1a1a; background: linear-gradient(90deg, #f4e3b0, #e3cf94); padding: 3px 9px; border-radius: 99px; margin-bottom: 8px; }
.oc-insight-badge i { font-size: 10px; color: #b8902f; }
.oc-insight-note { margin: 8px 0 2px; padding: 10px 12px; border-left: 3px solid #c9a24b; background: rgba(201,162,75,.08); border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.6; color: #4a4337; font-style: italic; }
.oc-insight-note i { color: #c9a24b; margin-right: 6px; font-size: 11px; }
.oc-insight-toggle { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted, #8a8378); background: transparent; border: 1px solid var(--border, #e7e3da); border-radius: 99px; padding: 4px 10px; cursor: pointer; transition: all .15s ease; }
.oc-insight-toggle:hover { border-color: #c9a24b; color: #b8902f; }
.oc-insight-toggle.on { color: #b8902f; border-color: #e3cf94; background: rgba(201,162,75,.1); }
.oc-insight-toggle i { font-size: 11px; }
.oc-admin-row { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ===== 공개 서재 프로필 #12 — 마이페이지 공유 컨트롤 ===== */
.libshare { border: 1px solid var(--border, #e7e3da); border-radius: 16px; padding: 18px; margin-bottom: 18px; background: #fff; }
.libshare--off { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.libshare-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.libshare-txt b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.libshare-txt span { font-size: 12.5px; color: var(--muted, #8a8378); line-height: 1.55; }
.libshare-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.libshare-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ea043; box-shadow: 0 0 0 4px rgba(46,160,67,.16); }
.libshare-link { display: flex; gap: 8px; margin-bottom: 12px; }
.libshare-link input { flex: 1; min-width: 0; font-size: 12.5px; padding: 9px 12px; border: 1px solid var(--border, #e7e3da); border-radius: 9px; background: var(--bg-soft, #faf8f3); color: var(--text, #1a1a1a); }
.libshare-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 9px 13px; border: 1px solid var(--border, #e7e3da); border-radius: 9px; background: #fff; cursor: pointer; }
.libshare-copy:hover { border-color: var(--text, #1a1a1a); }
.libshare-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.libshare-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--border, #e7e3da); background: #fff; color: var(--text, #1a1a1a); cursor: pointer; text-decoration: none; transition: all .15s ease; }
.libshare-btn:hover { border-color: var(--text, #1a1a1a); }
.libshare-btn.primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.libshare-btn.primary:hover { opacity: .9; }
.libshare-btn.danger { color: #c0392b; border-color: #e9c8c2; }
.libshare-btn.danger:hover { background: #fdf1ef; border-color: #c0392b; }

/* ===== 공개 서재 페이지 (library.html) ===== */
.library-view { min-height: 60vh; padding: 40px 0 60px; }
.library-loading { text-align: center; color: var(--muted, #8a8378); padding: 80px 0; }
.library-loading i { font-size: 34px; opacity: .4; }
.library-loading p { margin-top: 14px; font-size: 14px; }
.library-card { max-width: 680px; margin: 0 auto; }
/* 헤더 — 박스/그라데이션 제거, 타이포 중심 에디토리얼 */
.library-head { text-align: center; padding: 18px 0 30px; border-bottom: 1px solid var(--line); }
.library-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.library-name { font-family: inherit; font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--fg); word-break: keep-all; }
.library-bio { font-size: 14.5px; color: var(--muted); margin-top: 14px; line-height: 1.7; max-width: 440px; margin-left: auto; margin-right: auto; word-break: keep-all; }
.library-stats { display: flex; justify-content: center; align-items: stretch; gap: 0; margin-top: 26px; }
.library-stat { position: relative; padding: 0 30px; text-align: center; }
.library-stat + .library-stat::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background: var(--line); }
.library-stat b { display: block; font-size: 27px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
.library-stat span { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.library-block { margin-top: 44px; }
.library-h { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.library-h-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.library-h-row .library-h { margin-bottom: 0; }
.library-h-count { font-size: 12px; color: var(--muted); font-weight: 600; }
/* 즐겨 읽는 주제 — 텍스트형 */
.library-cats-text { margin: 0; font-size: 16px; line-height: 1.7; color: var(--fg); word-break: keep-all; }
.library-cat-text { font-weight: 600; }
.library-cat-dot { color: var(--muted); margin: 0 9px; font-weight: 400; }
/* 저장한 콘텐츠 — 랜덤 3개 썸네일 */
.library-saved { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.library-saved-item { display: block; text-decoration: none; color: var(--fg); }
.library-saved-thumb { display: block; position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: #1d1d1d; }
.library-saved-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.library-saved-item:hover .library-saved-thumb img { transform: scale(1.04); }
.library-saved-thumb--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1f1f1f, #3a3a3a); }
.library-saved-thumb--empty span { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 13px; color: rgba(255,255,255,.5); }
.library-saved-title { display: block; margin-top: 9px; font-size: 13px; line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: var(--fg); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.library-sentences { display: flex; flex-direction: column; }
.library-sentence { position: relative; margin: 0; padding: 26px 0 26px 26px; border-top: 1px solid var(--line); }
.library-sentence:first-child { border-top: none; padding-top: 6px; }
.library-sentence::before { content: '\201C'; position: absolute; left: -2px; top: 18px; font-family: 'Playfair Display', Georgia, serif; font-size: 34px; line-height: 1; color: #c9a24b; }
.library-sentence:first-child::before { top: -2px; }
.library-sentence blockquote { margin: 0; font-size: 17px; line-height: 1.8; letter-spacing: -.01em; word-break: keep-all; color: var(--fg); }
.library-sentence figcaption { margin-top: 12px; }
.library-sentence-src { font-size: 12.5px; color: var(--muted); text-decoration: none; }
a.library-sentence-src:hover { color: var(--fg); text-decoration: underline; }
.library-empty-line { font-size: 13.5px; color: var(--muted); }
.library-owner-note { margin-top: 40px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft, var(--hover-soft)); font-size: 13px; color: var(--muted); line-height: 1.6; }
.library-owner-note i { color: #c9a24b; margin-right: 6px; }
.library-owner-note a { color: var(--fg); font-weight: 600; }
.library-foot { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; }
.library-cta { font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; border-bottom: 1.5px solid #c9a24b; padding-bottom: 3px; transition: opacity .2s; }
.library-cta:hover { opacity: .65; }
@media (max-width: 560px) {
  .library-name { font-size: 30px; }
  .library-stat { padding: 0 20px; }
  .library-stat b { font-size: 23px; }
  .libshare--off { flex-direction: column; align-items: stretch; }
  .libshare-btn.primary { justify-content: center; }
}

/* ===== #29 Editor profile + follow ===== */
.author-view { padding: 48px 0 80px; }
.editor-profile-root { max-width: 920px; margin: 0 auto; }
.editor-profile-root .library-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 0; color: var(--muted, #8a8378); }
.editor-profile-root .library-loading i { font-size: 28px; color: #c9a24b; }
.editor-card { display: flex; flex-direction: column; gap: 40px; }
/* 헤더 — 타이포 중심 에디토리얼 */
.editor-head { text-align: center; max-width: 620px; margin: 0 auto; padding: 14px 0 30px; }
.editor-divider { height: 1px; background: var(--line, #e7e3da); margin: 0 0 34px; width: 100%; }
.editor-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted, #8a8378); font-weight: 600; margin: 0 0 14px; }
.editor-name-row { display: inline-flex; align-items: center; gap: 10px; justify-content: center; }
.editor-name { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--text, #1a1a1a); word-break: keep-all; }
.editor-settings-btn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line, #e6e5e0); background: var(--card, #fff); color: var(--muted, #8a8378); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; }
.editor-settings-btn:hover { color: var(--fg, #1a1a1a); border-color: var(--fg, #1a1a1a); }
.editor-bio { margin: 14px auto 0; max-width: 600px; font-size: 14.5px; line-height: 1.75; color: var(--muted, #6b6357); word-break: break-word; overflow-wrap: anywhere; white-space: pre-line; }
.editor-bio--ph, .editor-interests--ph { cursor: pointer; opacity: .6; }
.editor-bio--ph:hover, .editor-interests--ph:hover { opacity: 1; }
/* 이미 설정된 경우 — 호버 시 연필 아이콘 노출 */
.editor-bio--editable, .editor-interests--editable { cursor: pointer; position: relative; }
.editor-edit-icon { margin-left: 7px; font-size: 11px; color: var(--muted, #b3aca0); opacity: 0; transition: opacity .15s; }
.editor-bio--editable:hover .editor-edit-icon,
.editor-interests--editable:hover .editor-edit-icon { opacity: 1; }
.editor-interests { margin: 22px auto 0; max-width: 480px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted, #8a8378); }
.editor-interest { font-weight: 600; color: var(--fg, #1a1a1a); }
.editor-interest-dot { display: inline-block; width: 1px; height: 12px; background: var(--muted, #b3ada6); margin: 0 10px; vertical-align: middle; font-size: 0; overflow: hidden; }
.editor-interests--ph { margin-top: 12px; font-size: 13px; color: var(--muted, #8a8378); }
.ep-edit-field { text-align: left; margin-bottom: 16px; }
.ep-edit-field:last-child { margin-bottom: 4px; }
.ep-edit-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--fg, #1a1a1a); margin-bottom: 7px; }
.ep-edit-hint { font-weight: 500; color: var(--muted, #8a8378); font-size: 11.5px; }
.ep-edit-input { width: 100%; }
.ep-edit-textarea { resize: none; line-height: 1.5; font-family: inherit; overflow: hidden; }
.editor-meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted, #6b6357); }
.editor-meta b { color: var(--text, #1a1a1a); font-weight: 800; }
.editor-meta-sep { color: var(--line, #d8d3c8); }
.editor-follower-count { font-size: 13.5px; color: var(--muted, #6b6357); }
.editor-follower-count strong { color: var(--text, #1a1a1a); font-weight: 800; }
.editor-follow-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; padding: 10px 24px; border-radius: 999px; border: 1.5px solid #1a1a1a; background: #1a1a1a; color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .18s; }
.editor-follow-btn:hover { opacity: .85; }
.editor-follow-btn.following { background: transparent; color: var(--text, #1a1a1a); border-color: var(--border, #d8d3c8); }
.editor-follow-btn[disabled] { opacity: .5; cursor: default; }
.editor-block-title { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8a8378); font-weight: 800; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #e7e3da); }
.editor-empty { padding: 40px 0; text-align: center; font-size: 13.5px; color: var(--muted, #8a8378); }

/* editor profile: 발행한 시리즈 / 발행한 아티클 섹션 */
.editor-block { margin-bottom: 46px; }
.editor-block:last-child { margin-bottom: 0; }
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* 시리즈 박스 — 썸네일 대신 에디토리얼 박스 형태 */
.ep-series-box {
  display: flex; flex-direction: column; cursor: pointer;
  min-height: 168px; padding: 22px 22px 18px;
  background: var(--card, #fff); border: 1px solid var(--line, #e6e5e0);
  border-radius: 14px; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.ep-series-box:hover { border-color: var(--fg, #0a0a0a); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.ep-series-box-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ep-series-eyebrow {
  font-family: inherit;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg, #0a0a0a);
}
.ep-series-box-cat {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted, #8a8378);
  padding-left: 10px; border-left: 1px solid var(--line, #e6e5e0);
}
.ep-series-box-title {
  flex: 1; font-size: 19px; font-weight: 800; line-height: 1.35;
  color: var(--fg, #0a0a0a); margin: 0; word-break: keep-all;
}
.ep-series-box-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line, #e6e5e0);
}
.ep-series-box-count { font-size: 13px; color: var(--muted, #8a8378); }
.ep-series-box-count b { color: var(--fg, #0a0a0a); font-weight: 800; }
.ep-series-box-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--fg, #0a0a0a);
}
.ep-series-box-go i { font-size: 11px; transition: transform .18s; }
.ep-series-box:hover .ep-series-box-go i { transform: translateX(3px); }

/* 페이지네이션 */
.ep-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.ep-pg-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line, #e6e5e0); background: var(--card, #fff); color: var(--fg, #0a0a0a); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: border-color .15s, background .15s, color .15s; }
.ep-pg-btn:hover:not([disabled]) { border-color: var(--fg, #0a0a0a); }
.ep-pg-btn[disabled] { opacity: .35; cursor: default; }
.ep-pg-info { font-size: 13px; font-weight: 700; color: var(--fg, #1a1a1a); letter-spacing: .04em; min-width: 56px; text-align: center; }

/* 시리즈 모달 */
.ep-series-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,10,10,.5); opacity: 0; transition: opacity .2s; }
.ep-series-modal.show { opacity: 1; }
.ep-sm-inner { position: relative; width: 100%; max-width: 540px; max-height: 84vh; overflow-y: auto; background: var(--card, #fff); border-radius: 18px; padding: 32px 30px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.22); transform: translateY(12px); transition: transform .2s; }
.ep-series-modal.show .ep-sm-inner { transform: translateY(0); }
.ep-sm-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg-soft, #f3f2ee); color: var(--fg, #0a0a0a); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.ep-sm-close:hover { background: var(--line, #e6e5e0); }
.ep-sm-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8a8378); margin-bottom: 10px; }
.ep-sm-h { font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--fg, #0a0a0a); margin: 0 0 6px; word-break: keep-all; }
.ep-sm-sub { font-size: 13px; color: var(--muted, #8a8378); margin: 0 0 22px; }
.ep-sm-sub b { color: var(--fg, #1a1a1a); font-weight: 800; }
.ep-sm-list { display: flex; flex-direction: column; gap: 10px; }
.ep-sm-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line, #e6e5e0); border-radius: 12px; text-decoration: none; transition: border-color .15s, background .15s; }
.ep-sm-item:hover { border-color: var(--fg, #0a0a0a); background: var(--hover-soft, #faf9f6); }
.ep-sm-no { flex: 0 0 auto; min-width: 32px; font-size: 13px; font-weight: 800; color: var(--muted, #8a8378); text-align: center; }
.ep-sm-thumb { flex: 0 0 auto; width: 60px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--bg-soft, #f0ece3); }
.ep-sm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-sm-body { flex: 1; min-width: 0; }
.ep-sm-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--fg, #1a1a1a); line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ep-sm-date { display: block; font-size: 12px; color: var(--muted, #8a8378); margin-top: 3px; }
.ep-sm-go { flex: 0 0 auto; color: var(--muted, #b3aca0); font-size: 13px; transition: transform .15s, color .15s; }
.ep-sm-item:hover .ep-sm-go { color: var(--fg, #0a0a0a); transform: translateX(3px); }
@media (max-width: 760px) {
  .ep-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 460px) {
  .ep-grid { grid-template-columns: 1fr; }
  .ep-sm-inner { padding: 26px 20px 22px; }
}

.article-author-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.article-author-link:hover { border-bottom-color: currentColor; }

/* mypage 팔로잉 — 3열 그리드 카드 */
.mp-follow-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mp-follow-card {
  display: flex; flex-direction: column; cursor: pointer;
  min-height: 160px; padding: 22px 22px 18px;
  background: var(--card, #fff); border: 1px solid var(--line, #e6e5e0);
  border-radius: 14px; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.mp-follow-card:hover { border-color: var(--fg, #0a0a0a); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.mp-fc-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mp-fc-name { font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--fg, #0a0a0a); word-break: keep-all; flex: 1; }
.mp-fc-badge {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-soft, #f0ede8); border: none; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--muted, #8a8378);
  transition: background .15s, color .15s; white-space: nowrap;
}
.mp-fc-badge:hover { background: #e8e3dc; color: var(--fg, #1a1a1a); }
.mp-fc-followers { font-size: 12px; color: var(--muted, #b3aca0); margin-bottom: 8px; }
.mp-fc-bio { flex: 1; font-size: 13px; color: var(--muted, #8a8378); line-height: 1.55; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-fc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line, #e6e5e0);
}
.mp-fc-count { font-size: 13px; color: var(--muted, #8a8378); }
.mp-fc-count b { color: var(--fg, #0a0a0a); font-weight: 800; }
.mp-fc-go { flex: 0 0 auto; font-size: 11px; color: var(--fg, #0a0a0a); transition: transform .18s; }
.mp-follow-card:hover .mp-fc-go { transform: translateX(3px); }
/* 언팔로우 확인 모달 */
.mp-unfollow-ov {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(10,10,10,.4); display: flex; align-items: center; justify-content: center;
}
.mp-unfollow-box {
  background: var(--card, #fff); border-radius: 16px;
  padding: 28px 28px 22px; width: 100%; max-width: 340px;
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
}
.mp-unfollow-msg { font-size: 15px; font-weight: 700; color: var(--fg, #1a1a1a); margin: 0 0 20px; text-align: center; }
.mp-unfollow-btns { display: flex; gap: 10px; }
.mp-unfollow-cancel { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line, #e6e5e0); background: transparent; font-size: 14px; font-weight: 600; color: var(--muted, #8a8378); cursor: pointer; }
.mp-unfollow-ok { flex: 1; padding: 10px; border-radius: 10px; border: none; background: var(--fg, #1a1a1a); font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; }
.mp-unfollow-ok:hover { opacity: .85; }
@media (max-width: 860px) { .mp-follow-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mp-follow-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .author-view { padding: 32px 0 60px; }
  .editor-head { padding: 8px 0 26px; }
  .editor-name { font-size: 26px; }
}

/* ===== 게이밍 제거 개편: 공개서재 모달 / 심플 헤더 / MY NOTE ===== */
.mp-library-btn i { font-size: 14px; }
.mp-lib-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,18,14,.5); backdrop-filter: blur(3px); }
.mp-lib-modal[hidden] { display: none; }
.mp-lib-modal-inner { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--bg, #fff); border: 1px solid var(--border, #e7e3da); border-radius: 18px; padding: 30px 26px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.22); }
body.dark .mp-lib-modal-inner { background: #1b1a18; }
.mp-lib-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: var(--muted, #8a8378); font-size: 17px; cursor: pointer; transition: background .15s; }
.mp-lib-close:hover { background: rgba(0,0,0,.06); }
body.dark .mp-lib-close:hover { background: rgba(255,255,255,.08); }
.mp-lib-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text, #1a1a1a); }
.mp-lib-sub { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--muted, #6b6357); }

/* MY NOTE 목록 */
.mynote-list { display: flex; flex-direction: column; gap: 14px; }
.mynote-item { padding: 20px 22px; border: 1px solid var(--border, #e7e3da); border-radius: 14px; background: var(--bg, #fff); }
body.dark .mynote-item { background: #1c1b19; }
.mynote-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mynote-title { font-size: 14px; font-weight: 700; color: var(--text, #1a1a1a); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mynote-title:hover { color: var(--muted, #6b6357); border-bottom-color: currentColor; }
.mynote-date { flex: none; font-size: 12px; color: var(--muted, #8a8378); font-variant-numeric: tabular-nums; }
.mynote-text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text, #1a1a1a); word-break: keep-all; white-space: pre-wrap; }
@media (max-width: 560px) {
  .mp-lib-modal-inner { padding: 26px 18px 20px; }
}
.after-reading .ar-suggest { margin: 10px 0 4px; font-size: 13.5px; line-height: 1.7; color: var(--muted, #6b6357); word-break: keep-all; }

/* ===== 홈 고정 카드(오피니언/설문/에디터) 우측 상단 픽토그램 ===== */
.card.opinion-card, .card.poll-card, .card.recruit-card { position: relative; }
.card-corner-ic {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--fg, #111);
  background: rgba(0,0,0,.05); border: 1px solid var(--line, rgba(0,0,0,.08));
  transition: background .18s ease, transform .18s ease;
}
body.dark .card-corner-ic { color: #f2efe8; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.card.opinion-card:hover .card-corner-ic,
.card.poll-card:hover .card-corner-ic,
.card.recruit-card:hover .card-corner-ic { transform: translateY(-2px); background: rgba(0,0,0,.09); }
body.dark .card.opinion-card:hover .card-corner-ic,
body.dark .card.poll-card:hover .card-corner-ic,
body.dark .card.recruit-card:hover .card-corner-ic { background: rgba(255,255,255,.14); }
@media (max-width: 560px) {
  .card-corner-ic { width: 32px; height: 32px; font-size: 14px; top: 13px; right: 13px; }
}

/* ===== 보낸 응원 박스 (홈 대시보드) + 알림 모달 ===== */
.insight-block.cheer-box {
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.insight-block.cheer-box:hover { border-color: var(--muted); }
.insight-block.cheer-box:focus-visible { outline: 2px solid var(--pc-accent, var(--muted)); outline-offset: 2px; }
.cheer-box-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.cheer-box-head .insight-h { margin: 0; display: inline-flex; align-items: center; }
.cheer-box-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: #e5484d;
  vertical-align: middle;
}
.cheer-box-count {
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.cheer-box-sub {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.6;
  color: var(--muted);
  word-break: keep-all;
}
/* 보낸 응원 — 인라인 카드 리스트(모달 제거) */
.insight-block.cheer-section { }
.cheer-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cheer-sec-head .insight-h { margin: 0; }
.cheer-sec-count { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cheer-sec-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.cheer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cheer-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 11px;
  text-align: left; text-decoration: none;
  background: var(--card, #fff);
  transition: border-color .18s, background .18s, transform .18s;
}
/* 발행 예정 — 얇고 차분한 박스(연한 톤) */
.cheer-item.is-wait { background: var(--bg-soft, transparent); border-style: dashed; }
.cheer-item.is-wait .cheer-item-title { color: var(--muted); font-weight: 500; }
.cheer-item-status {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); padding: 4px 9px; border: 1px solid var(--line);
  border-radius: 999px; white-space: nowrap;
}
/* 발행됨 — 검정 강조 + N뱃지 + 발행일 */
a.cheer-item.is-pub { color: var(--fg); cursor: pointer; }
a.cheer-item.is-pub:hover { border-color: var(--fg); transform: translateY(-1px); }
.cheer-item-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--fg); color: var(--bg);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.cheer-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cheer-item-title {
  font-size: 14px; font-weight: 700; color: var(--fg);
  line-height: 1.45; word-break: keep-all;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cheer-item-date { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cheer-item-go { flex: 0 0 auto; font-size: 12px; color: var(--muted); transition: transform .18s; }
a.cheer-item.is-pub:hover .cheer-item-go { transform: translateX(3px); color: var(--fg); }
/* 시리즈 알림 항목 — 본문(링크/박스) + 삭제(X) 버튼 한 줄 */
.cheer-item-row { display: flex; align-items: stretch; gap: 8px; }
.cheer-item-row > .cheer-item { flex: 1 1 auto; width: auto; min-width: 0; }
.cheer-item-del {
  flex: 0 0 auto; width: 38px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card, #fff); color: var(--muted);
  font-size: 13px; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.cheer-item-del:hover { border-color: #d9534f; color: #d9534f; background: rgba(217,83,79,0.06); }
.cheer-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.cheer-pg-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card, #fff);
  color: var(--fg); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, opacity .15s;
}
.cheer-pg-btn:hover:not(:disabled) { border-color: var(--fg); }
.cheer-pg-btn:disabled { opacity: .35; cursor: default; }
.cheer-pg-info { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }

.cheer-notice-list { display: block; margin-top: 4px; }
.cheer-notice-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg-soft, transparent);
  transition: border-color .2s, background .2s;
}
.cheer-notice-item:last-child { margin-bottom: 0; }
a.cheer-notice-item.is-pub:hover { border-color: var(--muted); }
.cheer-notice-item .cheer-notice-badge {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46, 160, 67, .12);
  color: #2ea043;
  letter-spacing: .02em;
}
.cheer-notice-item .cheer-notice-badge.wait {
  background: var(--hover-soft, rgba(0,0,0,.05));
  color: var(--muted);
}
.cheer-notice-item .cheer-notice-title {
  flex: 1; min-width: 0;
  font-size: 13.5px; line-height: 1.5;
  color: var(--fg);
  word-break: keep-all;
}
.cheer-notice-item .fa-arrow-right {
  flex-shrink: 0; font-size: 12px; color: var(--muted);
}

/* ===== 응원 글 발행 알림 — 중앙 팝업 모달 ===== */
.cheer-pop-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10,10,10,.55);
  opacity: 0; transition: opacity .25s ease;
}
.cheer-pop-overlay.show { opacity: 1; }
.cheer-pop {
  position: relative;
  width: 100%; max-width: 380px;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 26px 26px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.cheer-pop-overlay.show .cheer-pop { transform: translateY(0) scale(1); }
.cheer-pop-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--muted); font-size: 15px;
  transition: background .2s, color .2s;
}
.cheer-pop-close:hover { background: var(--hover); color: var(--fg); }
.cheer-pop-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .01em;
  color: #b8902f;
  margin-bottom: 16px;
}
.cheer-pop-thumb {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  margin-bottom: 18px;
  background: var(--hover-soft);
}
.cheer-pop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cheer-pop-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.4;
  color: var(--fg);
  word-break: keep-all;
}
.cheer-pop-sub {
  margin-top: 10px;
  font-size: 13.5px; line-height: 1.65;
  color: var(--muted);
  word-break: keep-all;
}
.cheer-pop-actions { margin-top: 22px; }
.cheer-pop-go {
  display: block; width: 100%;
  padding: 13px;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  color: var(--bg);
  background: var(--fg);
  border-radius: 10px;
  transition: opacity .2s;
}
.cheer-pop-go:hover { opacity: .85; }
@media (max-width: 560px) {
  .cheer-pop { max-width: 340px; padding: 28px 22px 22px; }
}
body.dark .cheer-notice-item .cheer-notice-badge { background: rgba(46, 160, 67, .2); }

/* ── 독자 아이디 설정 모달 ────────────────────────────────── */
.slug-modal-overlay {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(10,10,10,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.slug-modal {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 36px 32px 30px;
  width: 100%; max-width: 420px;
  box-shadow: 0 8px 40px rgba(10,10,10,.12);
}
.slug-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted);
  line-height: 1; padding: 4px 6px;
  transition: color .15s;
}
.slug-modal-close:hover { color: var(--fg); }
.slug-modal-title {
  font-size: 17px; font-weight: 700; margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.slug-modal-title i { font-size: 15px; color: var(--muted); }
.slug-modal-desc {
  font-size: 13px; line-height: 1.7; color: var(--muted);
  margin: 0 0 16px;
}
.slug-modal-current {
  font-size: 13px; color: var(--muted);
  margin: 0 0 14px;
  padding: 8px 12px;
  background: var(--line);
  border-radius: 8px;
}
.slug-modal-current b { color: var(--fg); }
.slug-modal-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.slug-at {
  font-size: 17px; font-weight: 600; color: var(--muted);
  flex-shrink: 0; padding-bottom: 2px;
}
.slug-input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  font-size: 15px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: border-color .15s;
}
.slug-input:focus { border-color: var(--fg); }
.slug-check-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--fg);
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  background: none; color: var(--fg);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.slug-check-btn:disabled {
  border-color: var(--line); color: var(--muted); cursor: default;
}
.slug-check-btn:not(:disabled):hover { background: var(--fg); color: var(--bg); }
.slug-hint {
  font-size: 12.5px; min-height: 18px;
  margin: 0 0 16px;
  transition: color .15s;
}
.slug-hint--ok  { color: #2e7d32; }
.slug-hint--err { color: #c62828; }
.slug-hint--warn { color: var(--muted); }
.slug-locked {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--line);
  border-radius: 10px;
  margin-top: 4px;
}
.slug-locked-id {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  flex: 1;
}
.slug-locked-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.slug-save-btn {
  display: block; width: 100%;
  padding: 13px;
  background: var(--fg); color: var(--bg);
  border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.slug-save-btn:disabled { opacity: .35; cursor: default; }
.slug-save-btn:not(:disabled):hover { opacity: .82; }
@media (max-width: 480px) {
  .slug-modal { padding: 28px 20px 24px; }
  .slug-modal-row { gap: 6px; }
  .slug-check-btn { padding: 10px 10px; }
}