/* Temporary mobile font trial; keep the 64rem desktop breakpoint in sync with font preload media. */
:root{--site-font:-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif}
@media (min-width:64rem){:root{--site-font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif}}
/* Shared navigation: the original claude20 header on every page. */
:root{--hh:60px;--header-gut:20px;--header-wrap:1240px}
@media (min-width:48rem){:root{--header-gut:40px}}
@media (min-width:64rem){:root{--header-gut:max(88px, calc((100vw - var(--header-wrap)) / 2));--hh:72px}}
.hdr,.mnav{
  --ink:#13201E;--ink-2:#3B4B48;--ink-3:#5C6C68;--green:#9AC243;--teal:#4BAE98;--cyan:#00A3BF;
  --on-plate-3:#88A29C;--plate-line:#2C3F3B;--ease:cubic-bezier(.2,.7,.2,1);
  font-family:var(--site-font);
  font-weight:450;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.hdr{color:var(--ink)}
.hdr *,.hdr *::before,.hdr *::after,.mnav *,.mnav *::before,.mnav *::after{box-sizing:border-box}
.hdr .wrap{width:100%;max-width:calc(var(--header-wrap) + 2 * var(--header-gut));margin-inline:auto;padding-inline:var(--header-gut)}
.hdr svg{display:block;max-width:100%}
.hdr a,.hdr button,.mnav a{color:inherit}
.hdr button{font:inherit}
.nav ul,.mnav ul{list-style:none;margin:0;padding:0}
.mnav p{margin:0}
.mnav .mono{font-family:'Sono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}
.hdr :focus-visible{outline:3px solid #00758A;outline-offset:3px;border-radius:8px}
.hdr.menu-open :focus-visible,.mnav :focus-visible{outline-color:#7FDDEB}
/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hh)}
.hdr::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--hdr-bg,#F1F8F4) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(19,32,30,0);transition:box-shadow .3s,background-color .3s}
.hdr.is-scrolled::before{box-shadow:0 1px 0 rgba(19,32,30,.09)}
.hdr .wrap{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;border-radius:12px;flex:none}
.chip{flex:none;width:38px;height:38px;border-radius:11px;background:var(--ink);display:grid;place-items:center}
.chip svg{width:23px;height:auto}
.brand b{display:block;font-weight:820;font-size:1.0625rem;letter-spacing:-.02em;line-height:1.1}
.brand small{display:block;font-size:.75rem;color:var(--ink-3);line-height:1.3;margin-top:2px;font-weight:500;letter-spacing:-.01em}
.nav{display:none}
.nav ul{display:flex;align-items:center;gap:2px}
.nav a{display:block;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:620;font-size:.9375rem;color:var(--ink-2);transition:background .2s,color .2s}
.nav a:hover{background:rgba(19,32,30,.06);color:var(--ink)}
.nav a[aria-current="page"]{background:rgba(19,32,30,.07);color:var(--ink)}
.nav a.cta{margin-left:10px;background:var(--ink);color:#fff;padding:10px 18px;display:flex;align-items:center;gap:9px}
.nav a.cta::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.nav a.cta:hover{background:#24403B}
.menu-btn{width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);display:grid;place-content:center;gap:5px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.hdr.menu-open::before{background:var(--ink);box-shadow:none}
.hdr.menu-open .brand{color:#fff}
.hdr.menu-open .brand small{color:var(--on-plate-3)}
.hdr.menu-open .chip{background:#223531}
.hdr.menu-open .menu-btn{background:#223531}
.mnav{position:fixed;inset:0;z-index:49;background:var(--ink);color:#fff;padding:calc(var(--hh) + 28px) var(--header-gut) 36px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;overflow-y:auto}
.mnav.open{opacity:1;visibility:visible}
.mnav a{display:flex;align-items:center;gap:16px;font-size:1.875rem;font-weight:800;letter-spacing:-.035em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--plate-line)}
.mnav a i{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
.mnav-foot{font-size:12px;color:var(--on-plate-3);letter-spacing:.08em}
@media (min-width:64rem){.nav{display:block}.menu-btn,.mnav{display:none}}