/* ===================== Design Tokens ===================== */
    :root{
      --header-h: 36px;
      --bg:#fafafa; --surface:#fff; --text:#0b1020; --muted:#5c667a;
      --link:#0a84ff; --accent:#7c3aed; --accent-2:#0ea5e9;
      --card:#fff; --border:#e8eaf1; --code-bg:#0f111708;
      --shadow:0 10px 25px rgba(2,6,23,.08);
    }
    .dark{
      --bg:#0b0c0f; --surface:#12141a; --text:#e6e9ef; --muted:#a0a7b4;
      --link:#7cc5ff; --accent:#8b5cf6; --accent-2:#22c55e;
      --card:#0f1117; --border:#1f2430; --code-bg:#0b0d12;
      --shadow:0 10px 25px rgba(0,0,0,.35);
    }

    /* ===================== Base ===================== */
    *{box-sizing:border-box}
    html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
      font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;}
    @media (max-width:768px){ html,body{ font-size:17px; line-height:1.75; } }
    @media (max-width:480px){ html,body{ font-size:18px; line-height:1.78; } }
    img,svg,video{max-width:100%;height:auto;display:block}
    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    html{scroll-padding-top:calc(var(--header-h) + 16px)}
    .container{max-width:980px; margin:0 auto; padding-inline:clamp(12px, 4vw, 16px);}

    /* ===================== Header ===================== */
    header{position:sticky; top:0; z-index:9999; isolation:isolate; backdrop-filter:saturate(180%) blur(10px);
      background:color-mix(in oklab,var(--bg) 88%, transparent); border-bottom:1px solid var(--border);}
    .navbar{display:flex; align-items:center; justify-content:space-between; padding:16px 0; min-height:clamp(56px, 7vh, 72px);}
    .brand{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.2px; margin-left:5%;}
    .nav{display:flex; gap:16px; align-items:center}
    .nav a{padding:8px 12px; border-radius:10px}
    .nav a:hover{background:var(--surface); text-decoration:none}
    .actions{display:flex; gap:10px; align-items:center}
    .btn{border:1px solid var(--border); background:var(--surface); color:var(--text); padding:8px 12px;
      border-radius:12px; box-shadow:var(--shadow); display:inline-flex; gap:8px; cursor:pointer; min-height:40px;}
    .btn:hover{transform:translateY(-1px)}
    @media (max-width:640px){ .btn{min-height:44px;} .nav{display:none} }

    /* ===================== Article ===================== */
    .article{display:grid; gap:18px; padding:28px 0 56px;}
    .breadcrumb{font-size:.95rem; color:var(--muted); margin-left:1%;}
    .breadcrumb a{color:inherit}
    .post-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
      padding:clamp(16px,2.6vw,24px); max-width: 100%;}

    .titles{display:flex; flex-direction:column; gap:6px; }
    .title-en{font-size:clamp(24px,3.2vw,34px); line-height:1.2; font-weight:800; margin:0}

    .lang-row{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; margin-top:8px; font-size:1rem;
    }
    .lang-links{display:flex; gap:10px; flex-wrap:wrap}
    .lang-links a{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
    .published{white-space:nowrap; color:var(--muted);}

    .content{color:var(--text); font-size:1.04rem}
    .content h2,.content h3{margin-top:1.2em}
    .content p, .content li{overflow-wrap:anywhere}
    .content pre{background:var(--code-bg); color:inherit; padding:14px; border-radius:12px; overflow:auto; border:1px solid var(--border);
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; line-height:1.5}
    .content code{background:color-mix(in oklab,var(--accent) 8%, transparent); padding:.15em .35em; border-radius:.4em}

    .post-actions{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-top:18px}
    .pager a{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border);
      border-radius:12px; background:var(--surface);}

    .related{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px}
    .related .item{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px}
    .related .thumb{width:100%; border-radius:10px; border:1px solid var(--border); overflow:hidden}
    .related .thumb img{width:100%; aspect-ratio:1/1; object-fit:cover}
    .related .title{font-weight:600}
    @media (max-width:900px){ .related{grid-template-columns:1fr} }

    /* Print */
    @media print{
      header,.post-actions{display:none!important}
      a{color:black; text-decoration:underline}
      .article{padding:0}
    }

    /* ===================== Footer mobile centering ===================== */
    @media (max-width:640px){
      footer.container{
        justify-content:center !important;
        text-align:center !important;
        gap:10px;
      }
      footer.container > div{
        width:100%;
      }
    }
    .article {
      padding-top: calc(var(--header-h) + 24px); 
    }
    header { z-index: 1000; }
    .article, .titles, .title-en { position: relative; z-index: 1; }