/* Atorni 새 사이트 공용 크롬 — 헤더/네비/모바일 시트/푸터/버튼.
 * 정본 = _design/outbox/20260802_new_site_migration/site/about.html <style>
 * 격리: 전 선택자 `.site` 하위. 기존 화면(로그인·결제·사건·스태프)에 새지 않는다.
 * 데스크톱 메뉴는 1060px 이상에서만. 그 아래는 햄버거 → 전체화면 시트.
 */

.site img { max-width: 100%; display: block; }
.site a { color: inherit; }

.site .s-hd {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--s-line);
}
.site .s-nav { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.site .s-nav-links { display: none; gap: 2px; font-size: 15px; font-weight: 500; align-items: center; }
/* 같은 성질의 요소는 폭도 맞춘다 — 글자 길이와 무관하게 간격 균일(min-width) */
.site .s-nav-links a {
  min-width: 112px; text-align: center; text-decoration: none;
  color: var(--s-ink-70); padding: 20px 8px;
}
.site .s-nav-links a:hover, .site .s-nav-links a.on { color: var(--s-ink); }
.site .s-nav-right { display: flex; align-items: center; gap: 12px; }
.site .s-lang {
  display: none; text-decoration: none; font-size: 13px; font-weight: 600;
  color: var(--s-ink-70); border: 1px solid var(--s-line); border-radius: 100px;
  padding: 5px 12px; background: none; font-family: var(--s-sans); cursor: pointer;
}
@media (min-width: 1060px) {
  .site .s-nav-links { display: flex; }
  .site .s-lang { display: inline-block; }
}

.site .s-btn-sm { min-height: 0; padding: 9px 17px; font-size: 14px; border-radius: 6px; }

.site .s-eyebrow {
  display: inline-block; color: var(--s-forest);
  border: 1px solid var(--s-sage-line); border-radius: 100px; padding: 6px 13px;
}

/* ── 모바일 네비 ─────────────────────────────────────── */

.site .s-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 38px; background: none; border: none; cursor: pointer; padding: 0 8px;
}
.site .s-burger i { display: block; height: 1.8px; background: var(--s-ink); border-radius: 2px; }
@media (min-width: 1060px) { .site .s-burger { display: none; } }

.site .s-sheet {
  position: fixed; inset: 0; z-index: 200; background: var(--s-paper);
  display: flex; flex-direction: column;
  transform: translateY(-100%); transition: transform .26s ease; visibility: hidden;
}
.site .s-sheet.open { transform: translateY(0); visibility: visible; }
.site .s-sheet-top {
  display: flex; align-items: center; justify-content: space-between; height: 62px;
  padding: 0 20px; border-bottom: 1px solid var(--s-line); flex-shrink: 0;
}
.site .s-sheet-close {
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--s-ink); cursor: pointer; padding: 0 6px;
}
.site .s-sheet-list { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.site .s-acc { border-bottom: 1px solid var(--s-line); }
.site .s-acc > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; font-family: var(--s-sans); font-size: 19px; font-weight: 500;
  color: var(--s-ink); padding: 18px 2px; cursor: pointer; text-align: left;
}
.site .s-acc > button svg { transition: transform .2s; color: var(--s-ink-45); flex-shrink: 0; }
.site .s-acc.open > button svg { transform: rotate(180deg); }
.site .s-acc .s-sub { display: none; padding: 0 2px 16px; }
.site .s-acc.open .s-sub { display: block; }
.site .s-acc .s-sub a, .site .s-acc .s-sub .off {
  display: block; font-size: 16px; text-decoration: none;
  padding: 9px 0 9px 14px; border-left: 1px solid var(--s-line);
}
.site .s-acc .s-sub a { color: var(--s-ink-70); }
.site .s-acc .s-sub a:hover { color: var(--s-forest); }
.site .s-acc .s-sub .off { color: #BFC5C0; }
.site .s-sheet-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-top: 1px solid var(--s-line); flex-shrink: 0;
}
.site .s-sheet-foot .s-btn { flex: 1; }
.site .s-sheet-foot .s-lang { display: inline-block; }

/* ── 푸터 ────────────────────────────────────────────── */

.site .s-ft {
  background: var(--s-ink); color: #8C959C; font-size: 13px;
  padding: 34px 0; border-top: 1px solid #262C31;
}
.site .s-ft a { color: #C4CBD1; }
.site .s-ft-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.site .s-ft-links { display: flex; gap: 18px; margin-left: auto; }