/* ============================================================
   Onsoon Labs 공통 컴포넌트 — 네 페이지가 함께 쓰는 것만 둔다.
   tokens.css 다음에 읽는다. 여기의 모든 수치는 var() 참조다.
   ============================================================ */

/* ===== 컨테이너 — 폭 2종 (L1) =====
   본문은 --maxw-text, 미디어·그리드 섹션은 --maxw-wide로 한 번 넓어진다. */
.wrap      {max-width:var(--maxw-text);margin:0 auto;padding:0 var(--s3)}
.wrap-wide {max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--s3)}

/* ===== 헤더 ===== */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:var(--s6)}
.logo{
  display:flex;align-items:center;gap:var(--s1);
  font-size:var(--t-sm);font-weight:var(--w-title);letter-spacing:-.01em;
  transition:color var(--dur) var(--ease);
}
.logo-mark{width:24px;height:24px;flex:none}
.nav-right{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-sm)}
.nav-right a{color:var(--ink-soft);font-weight:var(--w-label);transition:color var(--dur) var(--ease)}
.nav-right a:hover{color:var(--ink)}
.lang-toggle{
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  font:inherit;font-size:var(--t-xs);font-weight:var(--w-label);line-height:var(--lh-tight);
  color:var(--ink-soft);padding:var(--s1) var(--s2);cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink-soft)}

/* ===== 시그니처 — 붓 밑줄 =====
   사이트에서 유일하게 연출되는 모션. 손그림 SVG가 화면에 들어올 때 한 번 그어진다.
   기본 상태는 '이미 그어진' 모습이라 JS가 없거나 실패해도 밑줄은 보인다.
   .armed는 site.js가 붙이며, 모션을 끈 사용자에게는 붙이지 않는다. */
.underline{position:relative}
.underline svg{
  position:absolute;left:-2%;bottom:-.08em;width:104%;height:.42em;z-index:-1;
  clip-path:inset(0 0 0 0);
}
.underline.armed svg{clip-path:inset(0 100% 0 0)}
.underline.armed.drawn svg{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--dur-slow) var(--ease);
}

/* ===== 버튼 ===== */
.btn{
  display:inline-flex;align-items:center;gap:var(--s1);
  border-radius:var(--r-sm);padding:var(--s2) var(--s3);
  font-size:var(--t-sm);font-weight:var(--w-title);line-height:var(--lh-tight);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary{background:var(--acc-clay);color:var(--bg)}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* ===== 앱 아이콘 (제품 페이지 히어로) =====
   배경에 제품 색을 깔지 않는다 — 아이콘 이미지가 이미 제품의 색을 갖고 있다. */
.app-mark{
  width:88px;height:88px;border-radius:var(--r-lg);overflow:hidden;
  display:grid;place-items:center;background:var(--card);border:1px solid var(--line);
}
.app-mark img{width:100%;height:100%;object-fit:cover}

/* ===== 기능 목록 (제품 페이지 공통) ===== */
.features{border-top:1px solid var(--line);padding:var(--s6) 0}
.features h2{font-size:var(--t-xl);font-weight:var(--w-title);line-height:var(--lh-title);letter-spacing:-.02em}
.flist{margin-top:var(--s4)}
.frow{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
.frow h3{font-size:var(--t-lg);font-weight:var(--w-title);line-height:var(--lh-title)}
.frow p{margin-top:var(--s1);color:var(--ink-soft);font-size:var(--t-sm);max-width:44em}

/* ===== 요구 사양 (제품 페이지 공통) ===== */
.spec{border-top:1px solid var(--line);padding:var(--s5) 0}
.spec h2{font-size:var(--t-lg);font-weight:var(--w-title);line-height:var(--lh-title);margin-bottom:var(--s2)}
.spec ul{list-style:none;color:var(--ink-soft);font-size:var(--t-sm)}
.spec li{padding:var(--s1) 0;border-bottom:1px dashed var(--line)}
.spec li:last-child{border-bottom:none}

/* ===== 푸터 ===== */
footer{border-top:1px solid var(--line);padding:var(--s4) 0 var(--s5);color:var(--ink-soft);font-size:var(--t-sm)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.foot a{font-weight:var(--w-label);transition:color var(--dur) var(--ease)}
.foot a:hover{color:var(--ink)}

/* ===== 메일 복사 토스트 ===== */
.copy-mail{cursor:pointer}
.toast{
  position:fixed;left:50%;bottom:var(--s4);transform:translate(-50%, var(--s1));
  background:var(--ink);color:var(--bg);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:var(--w-label);line-height:var(--lh-tight);
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index:100;width:max-content;max-width:calc(100vw - var(--s4));text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}