/* ── renew.css · 2026 리뉴얼 레이어 ─────────────────────────────────────────
   ambleworks.css(디자인 시스템) → site.css(사이트) 위에 얹는 신규 패턴만 담는다.
   토큰은 전부 --aw-* 를 그대로 쓴다. 새 색을 정의하지 않는다.
   유일한 예외: .sp (Snap Translate 사이드패널 목업)은 확장 실제 UI 색을
   src/sidepanel/sidepanel.css 에서 그대로 가져온다 — 제품 화면을 왜곡하지 않기 위해.
   ------------------------------------------------------------------------ */
@layer aw.site {

/* 오버라인 + 헤어라인 구분선 */
.rule-head { display:flex; align-items:center; gap:1rem; }
.rule-head::after { content:""; flex:1; height:1px; background:var(--aw-border-subtle); }

/* ── 스티키 CTA 바 (모바일/스크롤) ─────────────────────────────────────── */
.cta-bar { position:fixed; left:0; right:0; bottom:0; z-index:var(--aw-z-sticky);
  padding:.75rem var(--aw-gutter); background:color-mix(in srgb, var(--aw-canvas) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px); border-top:1px solid var(--aw-border-subtle);
  translate:0 110%; transition:translate var(--aw-duration-slow) var(--aw-ease); }
.cta-bar[data-show] { translate:0 0; }
.cta-bar__inner { max-width:var(--aw-container); margin-inline:auto; display:flex;
  align-items:center; justify-content:space-between; gap:1rem; }
.cta-bar__t { font-weight:700; letter-spacing:-.02em; }
@media (max-width:560px){ .cta-bar__t { display:none; } .cta-bar .aw-btn { flex:1; } }

/* ── 히어로 ───────────────────────────────────────────────────────────── */
.h-wrap { position:relative; overflow:hidden; padding-block:6rem 4.5rem; }
@media (max-width:780px){ .h-wrap { padding-block:3.5rem 3rem; } }
.h-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:4rem; align-items:center; position:relative; z-index:1; }
@media (max-width:980px){ .h-grid { grid-template-columns:1fr; gap:2.75rem; } }
.h-title { font-size:clamp(2.25rem,1.1rem + 4.4vw,4.25rem); line-height:1.02;
  letter-spacing:-.045em; font-weight:800; text-wrap:balance; }
.h-title em { font-style:normal; color:var(--aw-brand-text); }
.h-sub { max-width:46ch; }

/* 지원 브라우저·요구사항 등 작은 메타 줄 */
.meta-row { display:flex; flex-wrap:wrap; gap:.5rem .875rem; align-items:center;
  font-family:var(--aw-font-mono); font-size:var(--aw-text-xs); color:var(--aw-fg-subtle); }
.meta-row span { display:inline-flex; align-items:center; gap:.4rem; }
.meta-row span::before { content:""; width:.35rem; height:.35rem; border-radius:50%;
  background:var(--aw-brand); opacity:.75; }

/* ── 벤토 그리드 (2026: 정보 밀도를 카드 크기로 표현) ─────────────────── */
.bento { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.bento > * { grid-column:span 2; }
.bento .b-wide { grid-column:span 4; }
.bento .b-full { grid-column:span 6; }
@media (max-width:940px){ .bento { grid-template-columns:repeat(4,1fr); }
  .bento > * , .bento .b-wide { grid-column:span 2; } .bento .b-full { grid-column:span 4; } }
@media (max-width:620px){ .bento { grid-template-columns:1fr; }
  .bento > *, .bento .b-wide, .bento .b-full { grid-column:span 1; } }
.b-card { background:var(--aw-surface); border:1.5px solid var(--aw-border-subtle);
  border-radius:var(--aw-radius-card); padding:1.75rem; display:flex; flex-direction:column;
  gap:.625rem; transition:border-color var(--aw-transition), background-color var(--aw-transition); }
.b-card:hover { border-color:var(--aw-brand-border); background:var(--aw-surface-2); }
.b-card__n { font-family:var(--aw-font-mono); font-size:var(--aw-text-overline);
  letter-spacing:.2em; text-transform:uppercase; color:var(--aw-brand-text); }
.b-card h3 { font-size:1.1875rem; letter-spacing:-.02em; }
.b-card p { color:var(--aw-fg-muted); font-size:var(--aw-text-sm); line-height:1.65; }
.b-card--ink { background:var(--aw-surface-inverse); color:var(--aw-fg-inverse); border-color:transparent; }
.b-card--ink p { color:color-mix(in srgb, var(--aw-fg-inverse) 70%, transparent); }
.b-card--ink:hover { background:var(--aw-surface-inverse); border-color:transparent; }
.b-card--brand { background:var(--aw-brand-subtle); border-color:var(--aw-brand-border); }

/* 큰 수치 */
.stat { font-size:clamp(2rem,1.2rem + 2.4vw,3rem); font-weight:800; letter-spacing:-.04em;
  line-height:1; font-variant-numeric:tabular-nums; }

/* ── 마퀴 (지원 언어 흐름) ───────────────────────────────────────────── */
.mq { overflow:hidden; border-block:1px solid var(--aw-border-subtle);
  background:var(--aw-surface-2); padding-block:1rem;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mq__t { display:flex; gap:2.5rem; width:max-content; animation:mq 38s linear infinite; }
.mq__t > span { font-family:var(--aw-font-mono); font-size:var(--aw-text-sm);
  color:var(--aw-fg-subtle); white-space:nowrap; display:flex; align-items:center; gap:2.5rem; }
.mq__t > span:not(:last-child)::after { content:"/"; color:var(--aw-brand); opacity:.6; }
.mq:hover .mq__t { animation-play-state:paused; }
@keyframes mq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .mq__t { animation:none; } }

/* ── 영상 ─────────────────────────────────────────────────────────────── */
.vid { position:relative; border-radius:var(--aw-radius-2xl); overflow:hidden;
  border:1.5px solid var(--aw-border); background:var(--aw-surface-2); aspect-ratio:16/9; }
.vid iframe { width:100%; height:100%; border:0; display:block; }
.vid__poster { position:absolute; inset:0; display:grid; place-items:center; gap:1rem;
  cursor:pointer; text-align:center; padding:2rem;
  background:
    radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--aw-brand) 14%, transparent), transparent 70%),
    var(--aw-surface-2); }
.vid__play { width:5rem; height:5rem; border-radius:50%; background:var(--aw-brand);
  color:var(--aw-brand-fg); display:grid; place-items:center; font-size:1.5rem;
  transition:transform var(--aw-transition); }
.vid__poster:hover .vid__play { transform:scale(1.07); }
.vid__cap { font-family:var(--aw-font-mono); font-size:var(--aw-text-xs); color:var(--aw-fg-subtle); }

/* ── 사이드패널 목업 — 색은 확장 실제 UI(sidepanel.css)에서 그대로 ───── */
.sp { --sp-bg:#ffffff; --sp-soft:#f4f5f7; --sp-source:#eef2ff; --sp-target:#ecfdf5;
  --sp-border:#e3e5e9; --sp-text:#1f2328; --sp-dim:#656d76; --sp-accent:#4f46e5; --sp-accent-t:#059669;
  width:100%; max-width:22.5rem; margin-inline:auto; background:var(--sp-bg); color:var(--sp-text);
  border:1px solid var(--sp-border); border-radius:14px; overflow:hidden;
  font-size:.8125rem; line-height:1.55; box-shadow:var(--aw-shadow-lg); }
[data-theme="dark"] .sp { --sp-bg:#1b1d21; --sp-soft:#24262b; --sp-source:#1e2340;
  --sp-target:#14291f; --sp-border:#34373d; --sp-text:#e6e8eb; --sp-dim:#9aa0a6;
  --sp-accent:#8b87ff; --sp-accent-t:#34d399; }
.sp__head { padding:.75rem; background:var(--sp-soft); border-bottom:1px solid var(--sp-border);
  display:grid; gap:.5rem; }
.sp__row { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.sp__lbl { font-size:.625rem; color:var(--sp-dim); display:block; margin-bottom:.2rem; }
.sp__sel { border:1px solid var(--sp-border); border-radius:6px; background:var(--sp-bg);
  padding:.35rem .5rem; font-size:.75rem; display:flex; justify-content:space-between; gap:.5rem; }
.sp__sel::after { content:"▾"; color:var(--sp-dim); font-size:.625rem; }
.sp__btns { display:flex; gap:.375rem; flex-wrap:wrap; }
.sp__btn { border:1px solid var(--sp-border); border-radius:999px; background:var(--sp-bg);
  padding:.3rem .625rem; font-size:.6875rem; color:var(--sp-dim); }
.sp__btn[data-on] { border-color:var(--sp-accent); color:var(--sp-accent); font-weight:600; }
.sp__body { padding:.75rem; display:grid; gap:.5rem; }
.sp__blk { border-radius:10px; padding:.625rem .75rem; }
.sp__blk--s { background:var(--sp-source); }
.sp__blk--t { background:var(--sp-target); }
.sp__bh { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.375rem; }
.sp__badge { font-size:.625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--sp-accent); }
.sp__blk--t .sp__badge { color:var(--sp-accent-t); }
.sp__mini { font-size:.625rem; color:var(--sp-dim); }
.sp__txt { white-space:pre-wrap; }
.sp__pro { display:flex; align-items:center; gap:.5rem; font-size:.6875rem; color:var(--sp-dim);
  border:1px dashed var(--sp-border); border-radius:10px; padding:.5rem .625rem; }
.sp__pro b { background:var(--sp-soft); border-radius:999px; padding:.1rem .45rem;
  font-size:.625rem; color:var(--sp-text); }
.sp__foot { border-top:1px solid var(--sp-border); padding:.5rem .75rem; font-size:.625rem;
  color:var(--sp-dim); background:var(--sp-soft); }
.sp--tilt { transform:perspective(1600px) rotateY(-7deg) rotateX(2.5deg); transform-origin:center; }
@media (max-width:980px){ .sp--tilt { transform:none; } }
/* 선택 하이라이트 — "드래그해서 번역" 은유 */
.sel-mark { background:color-mix(in srgb, var(--aw-brand) 22%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--aw-brand) 45%, transparent); border-radius:3px;
  padding:0 .1em; }

/* ── 스텝 (세로 타임라인) ─────────────────────────────────────────────── */
.tl { display:grid; gap:0; counter-reset:tl; border-top:1px solid var(--aw-border-subtle); }
.tl > div { counter-increment:tl; display:grid; grid-template-columns:4rem 1fr;
  gap:1.5rem; padding-block:2rem; border-bottom:1px solid var(--aw-border-subtle);
  align-items:start; }
.tl > div::before { content:counter(tl,decimal-leading-zero); font-family:var(--aw-font-mono);
  font-size:var(--aw-text-sm); color:var(--aw-brand-text); font-weight:600; letter-spacing:.1em; }
@media (max-width:620px){ .tl > div { grid-template-columns:2.75rem 1fr; gap:1rem; } }

/* ── 스토어 배지 버튼 ─────────────────────────────────────────────────── */
.store { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem;
  border:1.5px solid var(--aw-border); border-radius:var(--aw-radius-pill);
  background:var(--aw-surface); text-decoration:none; color:inherit;
  transition:border-color var(--aw-transition), background-color var(--aw-transition); }
.store:hover { border-color:var(--aw-brand); background:var(--aw-surface-2); }
.store img { width:1.5rem; height:1.5rem; }
.store b { display:block; font-size:var(--aw-text-sm); letter-spacing:-.01em; font-weight:700; }
.store [data-soon-label] { display:block; font-family:var(--aw-font-mono); font-size:.625rem;
  color:var(--aw-fg-subtle); letter-spacing:.08em; text-transform:uppercase; }
.store[data-soon] { opacity:.6; pointer-events:none; }

/* ── 비교표 ───────────────────────────────────────────────────────────── */
.cmp { width:100%; border-collapse:collapse; font-size:var(--aw-text-sm); }
.cmp th, .cmp td { padding:1rem; border-bottom:1px solid var(--aw-border-subtle); text-align:left; }
.cmp thead th { font-family:var(--aw-font-mono); font-size:var(--aw-text-overline);
  letter-spacing:.14em; text-transform:uppercase; color:var(--aw-fg-subtle); }
.cmp td + td, .cmp th + th { text-align:center; width:9rem; }
.cmp .yes { color:var(--aw-success-text); font-weight:700; }
.cmp .no { color:var(--aw-fg-disabled); }
@media (max-width:620px){ .cmp th, .cmp td { padding:.75rem .5rem; } .cmp td + td, .cmp th + th { width:5rem; } }

/* ── 로고 (테마별 SVG 교체) ──────────────────────────────────────────── */
.logo-d { display:none; }
[data-theme="dark"] .logo-l { display:none; }
[data-theme="dark"] .logo-d { display:block; }

/* ── 제품 마크 — 확장 실물 아이콘(icons/icon128.png)을 그대로 쓴다. 재작도 금지 ── */
.mk-img { display:block; flex:none; width:var(--mk,3rem); height:var(--mk,3rem); }

/* ── 스토어 이미지 갤러리 ────────────────────────────────────────────── */
.gal { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:1.25rem; }
.gal figure { margin:0; display:grid; gap:.75rem; }
.gal img { width:100%; border-radius:var(--aw-radius-lg); border:1.5px solid var(--aw-border-subtle); }
.gal figcaption { font-family:var(--aw-font-mono); font-size:var(--aw-text-xs);
  color:var(--aw-fg-subtle); }
.asset-row { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:flex-end; }
.asset-row figure { margin:0; display:grid; gap:.5rem; justify-items:center; }
.asset-row img { border-radius:12px; background:var(--aw-surface-2); }

/* ── 리스팅 텍스트 블록 ─────────────────────────────────────────────── */
.listing { display:grid; gap:1px; background:var(--aw-border-subtle);
  border:1px solid var(--aw-border-subtle); border-radius:var(--aw-radius-xl); overflow:hidden; }
.listing > div { background:var(--aw-surface); padding:1.5rem 1.75rem; display:grid;
  grid-template-columns:12rem 1fr; gap:1.5rem; align-items:start; }
.listing dt, .listing .k { font-family:var(--aw-font-mono); font-size:var(--aw-text-overline);
  letter-spacing:.14em; text-transform:uppercase; color:var(--aw-fg-subtle); font-weight:600;
  padding-top:.2rem; }
.listing .v { font-size:var(--aw-text-sm); line-height:1.7; color:var(--aw-fg-muted); }
.listing .v strong { color:var(--aw-fg); }
.listing .v ul { display:grid; gap:.35rem; padding-left:1.1em; }
@media (max-width:720px){ .listing > div { grid-template-columns:1fr; gap:.625rem; } }

/* ── 언어 토글 뱃지 ──────────────────────────────────────────────────── */
.pillbar { display:inline-flex; gap:.25rem; padding:.25rem; border-radius:var(--aw-radius-pill);
  background:var(--aw-surface-3); }
.pillbar button { padding:.4rem .875rem; border-radius:var(--aw-radius-pill); cursor:pointer;
  font-size:var(--aw-text-xs); font-weight:600; color:var(--aw-fg-subtle); }
.pillbar button[aria-pressed="true"] { background:var(--aw-surface); color:var(--aw-fg); }
}