/* design.thenoun.ai 사이트 크롬 (문서 사이트 전용 — 시스템 토큰 위에서 동작) */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); }
.nav-in{ max-width:1060px; margin:0 auto; display:flex; align-items:center; gap:1.5rem; padding:0.8rem 1.5rem; }
.brand{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:var(--foreground); margin-right:auto; }
.brand img{ height:22px; display:block; }
.brand b{ font-size:0.98rem; font-weight:500; letter-spacing:-0.02em; }
.brand .wm{ font-weight:750; }
.nav a.lnk{ font-size:0.84rem; font-weight:500; color:var(--muted-foreground); text-decoration:none; transition:var(--ts); }
.nav a.lnk:hover{ color:var(--primary); }
.nav a.lnk.on{ color:var(--foreground); font-weight:600; }

.page{ max-width:1060px; margin:0 auto; padding:0 1.5rem 4rem; }
.hero{ text-align:center; padding:4.5rem 0 3rem; }
.section{ margin-top:3rem; }
.section > h2{ font-size:1.25rem; font-weight:600; letter-spacing:-0.02em; margin-bottom:0.4rem; }
.section > .desc{ font-size:0.88rem; color:var(--muted-foreground); margin-bottom:1.2rem; line-height:1.6; }

.demo{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.demo-stage{ background:var(--card); padding:2rem 1.5rem; display:flex; flex-wrap:wrap; gap:0.8rem;
  align-items:center; justify-content:center; }
.demo details{ border-top:1px solid var(--border); }
.demo summary{ cursor:pointer; list-style:none; font-size:0.76rem; font-weight:600;
  color:var(--muted-foreground); padding:0.55rem 1rem; user-select:none; background:var(--muted); }
.demo summary::-webkit-details-marker{ display:none; }
.demo summary:hover{ color:var(--primary); }
.demo pre{ background:oklch(0.16 0 0); color:oklch(0.9 0 0); font-size:0.76rem; line-height:1.65;
  padding:1rem 1.2rem; overflow-x:auto; }
.demo code{ font-family:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:760px){ .grid2,.grid3{ grid-template-columns:1fr; } }

table.tokens{ width:100%; border-collapse:collapse; font-size:0.82rem; }
table.tokens th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--muted-foreground); padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); }
table.tokens td{ padding:0.55rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
table.tokens code{ font-size:0.76rem; background:var(--muted); padding:2px 6px; border-radius:5px; }
.swatch{ width:38px; height:22px; border-radius:6px; border:1px solid var(--border); display:inline-block; }

.foot{ border-top:1px solid var(--border); margin-top:4rem; }
.foot-in{ max-width:1060px; margin:0 auto; padding:1.4rem 1.5rem; display:flex; align-items:center; gap:0.4rem;
  font-size:0.75rem; color:var(--muted-foreground); }
.foot-in img{ height:15px; }
.foot-in b{ color:var(--foreground); font-weight:500; }
.foot-in .wm{ font-weight:750; }

/* ---- v2: theme toggle · docs layout · cards · footer ---- */
.theme-btn{ margin-left:0.4rem; width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:var(--card); color:var(--muted-foreground); cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:var(--ts); font-size:0.85rem; }
.theme-btn:hover{ color:var(--primary); border-color:var(--primary); background:var(--primary-muted); }
.nav{ background:color-mix(in oklab, var(--card) 85%, transparent); }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1rem; }
@media(max-width:820px){ .cards{ grid-template-columns:1fr 1fr; } }
.ccard{ text-decoration:none; color:var(--foreground); display:flex; flex-direction:column; gap:0.6rem; }
.ccard .cv{ aspect-ratio:16/9; border:1px solid var(--border); border-radius:10px; background:var(--muted);
  display:flex; align-items:center; justify-content:center; overflow:hidden; transition:var(--ts); padding:1rem; }
.ccard:hover .cv{ border-color:var(--primary); background:var(--primary-muted); transform:translateY(-2px); }
.ccard b{ font-size:0.95rem; font-weight:600; letter-spacing:-0.01em; }
.ccard .cv *{ pointer-events:none; }

.docs{ display:flex; gap:2.5rem; align-items:flex-start; }
.side{ width:200px; flex-shrink:0; position:sticky; top:76px; display:flex; flex-direction:column; gap:2px;
  padding:1.5rem 0; }
.side .grp{ font-size:0.68rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted-foreground); padding:0.6rem 0.6rem 0.35rem; }
.side a{ font-size:0.84rem; color:var(--muted-foreground); text-decoration:none; padding:0.42rem 0.6rem;
  border-radius:7px; transition:var(--ts); }
.side a:hover{ color:var(--primary); background:var(--primary-muted); }
.side a.on{ color:var(--foreground); font-weight:600; background:var(--muted); }
.docs-main{ flex:1; min-width:0; padding-bottom:3rem; }
@media(max-width:860px){ .side{ display:none; } }

.dodont{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:700px){ .dodont{ grid-template-columns:1fr; } }
.dd{ border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.dd .t{ font-size:0.74rem; font-weight:700; display:inline-flex; align-items:center; gap:0.35rem; margin-bottom:0.6rem; }
.dd.do .t{ color:var(--ok); } .dd.dont .t{ color:var(--err); }
.dd ul{ margin:0; padding-left:1.05rem; display:flex; flex-direction:column; gap:0.4rem; }
.dd li{ font-size:0.82rem; color:var(--muted-foreground); line-height:1.6; }

.foot2{ border-top:1px solid var(--border); margin-top:4rem; background:var(--card); }
.foot2-in{ max-width:1060px; margin:0 auto; padding:2.5rem 1.5rem; display:flex; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; }
.f2-brand img{ height:26px; display:block; margin-bottom:0.9rem; }
.f2-line{ font-size:1.35rem; font-weight:700; letter-spacing:-0.02em; }
.f2-copy{ font-size:0.72rem; color:var(--muted-foreground); margin-top:0.4rem; }
.f2-cols{ display:flex; gap:3.5rem; }
.f2-cols p{ font-size:0.8rem; font-weight:600; margin-bottom:0.7rem; }
.f2-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
.f2-cols a{ font-size:0.8rem; color:var(--muted-foreground); text-decoration:none; transition:var(--ts); }
.f2-cols a:hover{ color:var(--primary); }