/* 클로드 코드 용어 가이드 — IBM Carbon 기반 토큰 + 사이트 스타일 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans+KR:wght@300;400;600&family=IBM+Plex+Sans:wght@300;400;600&display=swap');

:root{
  --blue:#0f62fe; --blue-hover:#0050e6; --blue-active:#002d9c; --blue-60:#0043ce; --blue-tint:#edf5ff;
  --canvas:#ffffff; --surface-1:#f4f4f4; --ink:#161616; --ink-2:#525252;
  --hairline:#e0e0e0; --inverse-bg:#161616; --inverse-ink:#f4f4f4; --inverse-ink-2:#c6c6c6;
  --tag-blue-bg:#d0e2ff; --tag-blue-ink:#0043ce; --tag-gray-bg:#e0e0e0; --tag-gray-ink:#393939;
  --font:"IBM Plex Sans","IBM Plex Sans KR","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,0,.38,.9);
}

*{box-sizing:border-box}
html{scroll-padding-top:128px}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.5;letter-spacing:.16px}
a{color:var(--blue-60);text-decoration:none}
a:hover{text-decoration:underline;color:var(--blue-hover)}
:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.wrap{max-width:1056px;margin:0 auto;padding:0 24px}

/* 좌측 내비게이션 (Carbon UI Shell side nav) */
.side{position:fixed;top:0;left:0;bottom:0;width:256px;background:var(--canvas);
  border-right:1px solid var(--hairline);display:flex;flex-direction:column;z-index:11;
  transition:transform .24s var(--ease)}
.side .brand{display:block;padding:15px 16px;font-size:14px;color:var(--ink);
  border-bottom:1px solid var(--hairline);line-height:1.3}
.side .brand .b{font-weight:600}
.side .brand:hover{text-decoration:none}
.side-nav{flex:1;overflow-y:auto;padding:16px 0}
.side-group{margin-bottom:24px}
.side-group>span{display:block;padding:0 16px 6px;font-size:12px;color:var(--ink-2);letter-spacing:.32px}
.side-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 16px 7px 13px;font-size:14px;color:var(--ink);border-left:3px solid transparent;
  transition:background .11s var(--ease)}
.side-nav a:hover{background:var(--surface-1);text-decoration:none}
.side-nav a.on{background:var(--surface-1);border-left-color:var(--blue);font-weight:600}
.side-nav a .n{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;font-weight:400}
.side-foot{padding:16px;border-top:1px solid var(--hairline);font-size:12px;color:var(--ink-2);line-height:1.5}
.content{margin-left:256px}

/* 모바일 헤더 + 드로어 */
.mob-head{display:none;position:sticky;top:0;z-index:9;height:48px;align-items:center;
  background:var(--canvas);border-bottom:1px solid var(--hairline)}
.mob-head .brand{font-size:14px;color:var(--ink)}
.mob-head .brand .b{font-weight:600}
.mob-head .brand:hover{text-decoration:none}
.menu-btn{width:48px;height:48px;flex:0 0 48px;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);border-radius:0}
.menu-btn:hover{background:var(--surface-1)}
.menu-btn svg{display:block;fill:currentColor}
.menu-btn .ico-close{display:none}
.menu-btn[aria-expanded="true"] .ico-menu{display:none}
.menu-btn[aria-expanded="true"] .ico-close{display:block}
.scrim{position:fixed;inset:0;background:rgba(22,22,22,.5);z-index:10;border:0;padding:0;
  cursor:default;width:100%}
@media(max-width:671px){
  .side{transform:translateX(-100%)}
  .side.open{transform:none}
  .content{margin-left:0}
  .mob-head{display:flex}
}

/* 히어로 */
.hero{background:linear-gradient(180deg,var(--blue-tint) 0%,var(--canvas) 100%);
  border-bottom:1px solid var(--hairline)}
.hero .wrap{padding-top:64px;padding-bottom:48px}
.hero h1{font-size:clamp(34px,5vw,54px);font-weight:300;line-height:1.17;margin:0 0 16px;
  letter-spacing:0;text-wrap:balance}
.hero p{max-width:34em;color:var(--ink-2);margin:0 0 32px}
.hero.slim .wrap{padding-top:48px;padding-bottom:40px}
.hero.slim h1{font-size:clamp(28px,4vw,42px)}
.hero.slim p{margin-bottom:0}
.stats{display:flex;flex-wrap:wrap;border:1px solid var(--hairline);background:var(--canvas)}
.stat{flex:1 1 140px;padding:16px 24px;border-right:1px solid var(--hairline);color:var(--ink);
  transition:background .11s var(--ease)}
.stat:last-child{border-right:0}
a.stat:hover{background:var(--surface-1);text-decoration:none}
.stat b{display:block;font-size:28px;font-weight:300;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--ink-2)}
@media(max-width:720px){.stat{flex-basis:100%;border-right:0;border-bottom:1px solid var(--hairline)}.stat:last-child{border-bottom:0}}

/* 읽는 법 */
.howto{padding:48px 0 12px}
h2.sec{font-size:14px;font-weight:400;color:var(--ink-2);margin:0 0 16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:1px solid var(--hairline)}
.tile{padding:24px;border-right:1px solid var(--hairline)}
.tile:last-child{border-right:0}
.tile h3{font-size:16px;font-weight:600;margin:0 0 8px}
.tile p{font-size:14px;color:var(--ink-2);margin:0}
@media(max-width:720px){.tile{border-right:0;border-bottom:1px solid var(--hairline)}.tile:last-child{border-bottom:0}}

/* 검색 + 필터 */
.finder{position:sticky;top:0;z-index:8;background:var(--canvas);
  border-bottom:1px solid var(--hairline);padding-top:24px}
@media(max-width:671px){.finder{top:48px}}
.finder-row{display:flex;gap:16px;align-items:center}
.search{flex:1;display:block;width:100%;background:var(--surface-1);border:0;
  border-bottom:1px solid var(--hairline);padding:14px 16px;font:inherit;color:var(--ink);
  letter-spacing:.16px;border-radius:0;appearance:none;-webkit-appearance:none}
.search:focus{outline:none;border-bottom:2px solid var(--blue);padding-bottom:13px}
.must-only{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;user-select:none}
.must-only input{width:16px;height:16px;accent-color:var(--blue);border-radius:0;margin:0}
.tabs{display:flex;overflow-x:auto;margin-top:8px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  padding:10px 16px;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer;border-radius:0;
  letter-spacing:.16px;transition:background .11s var(--ease),color .11s var(--ease)}
.tabs button:hover{background:var(--surface-1);color:var(--ink)}
.tabs button.on{border-bottom-color:var(--blue);color:var(--ink);font-weight:600}
.result-count{font-size:13px;color:var(--ink-2);padding:8px 0}

/* 용어 사전 */
.cat{padding:32px 0 8px}
.cat-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.cat-head h2{font-size:24px;font-weight:300;margin:0;letter-spacing:0}
.cat-head span{font-size:13px;color:var(--ink-2)}
.entry{border:1px solid var(--hairline);margin-bottom:-1px;padding:24px;background:var(--canvas)}
.entry:target{outline:2px solid var(--blue);outline-offset:-2px}
.entry-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.entry-top h3{font-size:24px;font-weight:600;margin:0;letter-spacing:0}
.entry-top .en{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.entry-top .tag{margin-left:auto}
.tag{font-size:12px;padding:2px 10px;border-radius:9999px;align-self:center;white-space:nowrap}
.tag.must{background:var(--tag-blue-bg);color:var(--tag-blue-ink)}
.tag.rec{background:var(--tag-gray-bg);color:var(--tag-gray-ink)}
.oneline{font-size:18px;line-height:1.4;margin:0 0 12px;max-width:32em}
.expl{font-size:14px;color:var(--ink-2);max-width:46em;margin:0 0 20px}
.analogy{margin:-8px 0 20px;font-size:13px;max-width:46em}
.analogy summary{color:var(--ink-2);cursor:pointer;user-select:none;width:fit-content}
.analogy summary:hover{color:var(--ink)}
.analogy p{margin:6px 0 0;color:var(--ink-2);padding-left:14px;border-left:2px solid var(--hairline)}
.quote{border-top:1px solid var(--hairline);padding-top:12px;font-size:13px;color:var(--ink-2)}
.quote .q-label{font-size:12px;display:block;margin-bottom:4px}
.rel{margin-top:12px;font-size:13px}
.rel b{font-weight:400;color:var(--ink-2)}
.empty{border:1px solid var(--hairline);padding:48px 24px;text-align:center;color:var(--ink-2);
  font-size:14px;margin-top:24px}
.empty p{margin:0}
.empty .elsewhere{margin:12px 0 0;font-size:14px}
.empty .elsewhere span{color:var(--ink-2);font-size:13px}
tr:target td{background:var(--blue-tint)}

/* 부록 테이블 */
.apx{padding:32px 0}
.apx-cat{font-size:18px;font-weight:600;margin:32px 0 12px}
.apx-table{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;font-size:13px;color:var(--ink-2);
  border-bottom:1px solid var(--ink);padding:8px 16px 8px 0}
td{border-bottom:1px solid var(--hairline);padding:10px 16px 10px 0;vertical-align:top}
td.t-term{font-weight:600;white-space:nowrap}
td.t-alias{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
td.t-def{color:var(--ink-2)}
@media(max-width:720px){td.t-alias{display:none}th.t-alias{display:none}}

/* CTA 배너 */
.cta{background:var(--blue);color:#fff;margin-top:48px}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:40px;padding-bottom:40px;flex-wrap:wrap}
.cta h2{font-size:28px;font-weight:300;margin:0;letter-spacing:0}
.cta a{background:#fff;color:var(--blue);padding:12px 24px;font-size:14px;display:inline-block;
  transition:background .11s var(--ease)}
.cta a:hover{text-decoration:none;background:#d0e2ff}

/* 개정이력 */
.log{padding:40px 0 64px}
.log-entry{border-top:1px solid var(--hairline);padding:28px 0 8px}
.log-entry:first-child{border-top:0;padding-top:8px}
.log-date{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-bottom:6px}
.log-entry h2{font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:0}
.log-entry p{margin:0 0 10px;color:var(--ink-2);font-size:14px}
.log-entry ul{margin:0 0 20px;padding-left:18px}
.log-entry li{margin:0 0 8px;font-size:14px;color:var(--ink-2);line-height:1.6}
.log-entry li b{color:var(--ink);font-weight:600}

/* 푸터 */
footer{background:var(--inverse-bg);color:var(--inverse-ink)}
footer .wrap{padding-top:40px;padding-bottom:40px;font-size:13px}
footer p{margin:0 0 4px;color:var(--inverse-ink-2)}
footer a{color:#78a9ff}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}