/* ── site.css · AmbleWorks 사이트 전용 레이어 (디자인 시스템 위에 얹는 것만) ── */
@layer aw.site {

/* 헤더 스크롤 상태 */
.aw-header { transition: box-shadow var(--aw-transition), background-color var(--aw-transition); }
.aw-header[data-scrolled] { box-shadow: 0 1px 0 var(--aw-border-subtle), var(--aw-shadow-sm); }
.aw-header__inner { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .aw-header__inner { gap: .5rem; }
  .aw-logo { height: 1.1rem; }
  .aw-header__inner .aw-btn--sm { --_px: .625rem; }
}

/* 아치 배경 — 브랜드 모티프를 아주 옅게 */
.arch-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.arch-bg svg { position: absolute; opacity: .055; color: var(--aw-brand); }
.arch-bg--ink svg { opacity: .06; color: #fff; }
.arch-bg--ink svg:last-child { display: none; }

/* 히어로 */
.hero { position: relative; padding-block: 5rem 6rem; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,1fr);
  gap: 4rem; align-items: center; position: relative; z-index: 1; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero { padding-block: 3rem 4rem; } }
/* 히어로 메인 메시지: .aw-display-1 전체 스케일(최대 104px)은 다른 곳엔 없고 여기 하나뿐이라
   너무 크게 느껴져 별도로 낮춘다. EN 카피 기준 2줄 정도로 떨어지는 크기(최대 56px)로 조정. */
.hero h1.aw-display-1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); }

/* 제품 목업 창 */
.mock { border-radius: var(--aw-radius-xl); background: var(--aw-surface);
  border: 1px solid var(--aw-border); box-shadow: var(--aw-shadow-lg); overflow: hidden;
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transform-origin: left center; }
@media (max-width: 940px) { .mock { transform: none; } }
.mock__bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--aw-border-subtle); background: var(--aw-surface-2); }
.mock__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--aw-border-strong); }
.mock__body { padding: 1.75rem; display: grid; gap: 1.5rem; }
.mock__task { border: 1px solid var(--aw-border); border-radius: var(--aw-radius-lg);
  padding: 1.25rem; display: grid; gap: .75rem; background: var(--aw-canvas); }
.mock__task--active { border-color: var(--aw-brand); background: var(--aw-brand-subtle); }

/* 주간 아치 — 연속기록 대신 */
.week { display: flex; gap: .5rem; align-items: flex-end; }
.feat__media .week { transform: scale(1.3); transform-origin: center; }
.week i { display: block; width: 1.5rem; height: 1.15rem; box-sizing: border-box;
  border: .3rem solid var(--aw-border); border-bottom: 0;
  border-radius: .75rem .75rem 0 0; }
.week i[data-on] { border-color: var(--aw-brand); }

/* 통계 스트립 */
.proof-wrap { border-block: 1px solid var(--aw-border-subtle); background: var(--aw-border-subtle); }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.proof > div { background: var(--aw-canvas); padding: 2rem 1.25rem; text-align: center; }
.proof span { display: block; margin-top: .375rem; }
.proof b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
@media (max-width: 720px) { .proof { grid-template-columns: repeat(2,1fr); } }

/* 기능 행 */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.feat:nth-child(even) .feat__media { order: -1; }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; gap: 2rem; }
  .feat:nth-child(even) .feat__media { order: 0; } }
.feat__media { background: var(--aw-surface-2); border: 1px solid var(--aw-border-subtle);
  border-radius: var(--aw-radius-xl); padding: 2rem; min-height: 260px;
  display: grid; place-items: center; }

/* 단계 */
.steps { counter-reset: s; display: grid; gap: 1px; background: var(--aw-border-subtle);
  border: 1px solid var(--aw-border-subtle); border-radius: var(--aw-radius-xl); overflow: hidden;
  grid-template-columns: repeat(3, 1fr); }
.steps > div { background: var(--aw-surface); padding: 2rem; counter-increment: s; }
.steps > div::before { content: counter(s, decimal-leading-zero);
  font-family: var(--aw-font-mono); font-size: .6875rem; letter-spacing: .2em;
  color: var(--aw-brand); font-weight: 600; display: block; margin-bottom: 1rem; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

/* FAQ */
.faq details { border-bottom: 1px solid var(--aw-border-subtle); }
.faq summary { list-style: none; cursor: pointer; padding: 1.375rem 2.5rem 1.375rem 0;
  font-weight: 600; position: relative; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%;
  width: .6rem; height: .6rem; border-right: 2px solid var(--aw-fg-subtle);
  border-bottom: 2px solid var(--aw-fg-subtle); translate: 0 -60%;
  rotate: 45deg; transition: rotate var(--aw-transition); }
.faq details[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq details > div { padding-bottom: 1.5rem; color: var(--aw-fg-muted); max-width: 68ch; }

/* 요금 토글 */
.toggle { display: inline-flex; padding: .25rem; background: var(--aw-surface-3);
  border-radius: var(--aw-radius-pill); }
.toggle button { padding: .5rem 1.125rem; border-radius: var(--aw-radius-pill);
  font-size: var(--aw-text-sm); font-weight: 600; color: var(--aw-fg-subtle); cursor: pointer;
  transition: background-color var(--aw-transition), color var(--aw-transition); }
.toggle button[aria-pressed="true"] { background: var(--aw-surface); color: var(--aw-fg);
  box-shadow: var(--aw-shadow-xs); }

/* 스크롤 등장 */
.js .reveal { opacity: 0; translate: 0 14px;
  transition: opacity .55s var(--aw-ease), translate .55s var(--aw-ease); }
.js .reveal[data-in] { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; translate: 0; } }

/* 모바일 내비 */
.mnav { display: none; }
.drawer { display: none; }
@media (max-width: 800px) {
  .mnav { display: inline-flex; }
  .drawer { position: fixed; inset: 4rem 0 auto; z-index: var(--aw-z-dropdown);
    background: var(--aw-canvas); border-bottom: 1px solid var(--aw-border);
    padding: 1rem var(--aw-gutter) 1.5rem; display: none; }
  .drawer[data-open] { display: grid; gap: .25rem; }
  .drawer a { padding: .875rem .5rem; font-weight: 600; border-radius: var(--aw-radius-sm); text-decoration: none; }
  .drawer a:hover { background: var(--aw-surface-3); }
}

/* 인용 */
.quote { font-size: 1.375rem; line-height: 1.55; letter-spacing: -.015em; font-weight: 500; }
.quote--big { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.3; }

/* 언어 전환 */
[data-lang="en"] [data-ko], [data-lang="ko"] [data-en] { display: none; }
[data-lang="ko"] .aw-card--featured::after { content: attr(data-flag-ko); }
[data-lang="en"] .aw-card--featured::after { content: attr(data-flag-en); }

/* 푸터 */
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.foot-grid h4 { font-size: .75rem; font-family: var(--aw-font-mono); letter-spacing: .16em;
  text-transform: uppercase; opacity: .55; margin-bottom: 1rem; font-weight: 600; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: .55rem; }
}