@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
  :root{
    --primary:#464196; --primary-d:#383478; --ink:#221F40;
    --muted:#6E6A85; --field:#ECEAF6; --surface:#FFFFFF; --hair:rgba(34,31,64,.08);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
  body{
    font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;color:var(--ink);line-height:1.6;
    background:radial-gradient(130% 60% at 50% -5%,#F3F2FA 0%,#E9E7F4 45%,#F7F6FB 100%);
    padding:calc(env(safe-area-inset-top,0px) + 20px) 16px calc(env(safe-area-inset-bottom,0px) + 40px);
  }
  .wrap{max-width:760px;margin:0 auto;}
  nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;font-size:14px;}
  nav .home{display:flex;align-items:center;gap:10px;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;}
  nav .home img{width:32px;height:32px;border-radius:8px;}
  nav .lang{color:var(--muted);text-decoration:none;font-weight:600;}
  header{text-align:center;margin-bottom:34px;}
  h1{font-size:clamp(28px,6vw,40px);line-height:1.2;letter-spacing:-.02em;margin-bottom:14px;}
  h1 span{color:var(--primary);}
  .lead{font-size:17px;color:var(--muted);max-width:560px;margin:0 auto 26px;}
  .badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:12px;}
  .badge{display:inline-flex;align-items:center;gap:9px;background:var(--surface);color:var(--ink);
    text-decoration:none;border:1px solid var(--hair);border-radius:14px;padding:11px 18px;
    font-weight:700;box-shadow:0 1px 2px rgba(34,31,64,.05),0 10px 24px -16px rgba(34,31,64,.3);}
  .badge svg{width:24px;height:24px;flex:0 0 auto;}
  .badge .l{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
  .badge .l small{font-size:10px;font-weight:600;color:var(--muted);}
  .badge .l span{font-size:15px;}
  .webapp{display:inline-block;font-size:14px;font-weight:600;color:var(--primary);text-decoration:none;}
  .note{font-size:13px;color:var(--muted);margin-top:8px;}
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:34px 0 8px;}
  .gallery figure{margin:0;}
  .gallery img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#e8e5f2;display:block;
    box-shadow:0 12px 26px -16px rgba(34,31,64,.4);}
  .gallery figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:6px;font-weight:600;}
  section{background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:26px 22px;margin-top:18px;}
  h2{font-size:22px;letter-spacing:-.01em;margin-bottom:14px;}
  h3{font-size:16.5px;margin:18px 0 4px;color:var(--primary-d);}
  h3:first-of-type{margin-top:0;}
  p{font-size:15.5px;}
  p + p{margin-top:10px;}
  ul,ol{padding-left:20px;font-size:15.5px;}
  li{margin:4px 0;}
  details{border-top:1px solid var(--hair);padding:14px 0;}
  details:first-of-type{border-top:0;padding-top:0;}
  summary{font-weight:700;cursor:pointer;font-size:15.5px;}
  details p{margin-top:8px;color:#3b3857;}
  footer{text-align:center;margin-top:34px;font-size:12.5px;color:var(--muted);line-height:1.9;}
  footer a{color:var(--muted);}
  @media (max-width:560px){ .gallery{grid-template-columns:repeat(2,1fr);} section{padding:22px 18px;} }

  article h2{margin-top:6px;}
  .crumb{font-size:13px;color:var(--muted);margin-bottom:10px;}
  .crumb a{color:var(--muted);}
  .updated{font-size:13px;color:var(--muted);margin-bottom:18px;}
  table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px;}
  th,td{border-top:1px solid var(--hair);padding:9px 6px;text-align:left;vertical-align:top;}
  th{font-size:13px;color:var(--muted);font-weight:700;}
  .tbl{overflow-x:auto;}
  .no{color:#b3261e;font-weight:700;}
  .ok{color:#1b7a3d;font-weight:700;}
  blockquote{border-left:3px solid var(--primary);padding:6px 12px;margin:10px 0;background:var(--field);border-radius:6px;font-size:14.5px;}
  .src{font-size:13px;color:var(--muted);}
  .src a{color:var(--muted);word-break:break-all;}
  .cta{text-align:center;}
  .cta a.btn{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;border-radius:12px;padding:12px 20px;margin-top:10px;}