/*
 * Study2Play 회사 공개 사이트(index.html·help.html) 공통 스타일 (docs/45 §3.5 C-01·C-02).
 * fonts.css → tokens.css → components.css 다음에 읽는다. 색은 --s2p-* 토큰만 쓰고 색 코드를 직접 쓰지 않는다.
 * 버튼·카드·배지·콜아웃·입력은 components.css 의 .s2p-* 를 그대로 쓰고, 이 파일에는 공개 사이트 고유의
 * 머리글·히어로·섹션 틀·요금 카드·FAQ·푸터만 둔다(접두어 .site-).
 * 인라인 <style>·style="" 는 쓰지 않는다. 스크립트는 같은 폴더 site.js(메뉴), app.js(홈), help.js(도움말).
 */

:root {
  --site-header-height: calc(var(--s2p-topbar-height) + var(--s2p-space-2)); /* 64px */
  --site-section-gap: calc(var(--s2p-space-8) * 2);                          /* 64px */
}

/* ===== 바탕 ===== */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height) + var(--s2p-space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-wrap: break-word; word-break: keep-all; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
/* components.css 의 포커스 링은 s2p- 요소에만 건다. 공개 사이트의 일반 링크·버튼·요약도 같은 모양으로 맞춘다. */
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: var(--s2p-focus-ring-width) solid var(--s2p-focus-ring-color);
  outline-offset: var(--s2p-focus-ring-offset);
}
main:focus, main:focus-visible { outline: none; }
/* 본문 안의 클래스 없는 링크(문장 속 링크): 색만으로 구분하지 않도록 밑줄을 둔다. */
.site-main a:not([class]) { color: var(--s2p-color-link); text-decoration: underline; text-underline-offset: 3px; }
.site-main a:not([class]):hover { color: var(--s2p-color-primary-hover); }

.site-container { width: 100%; max-width: var(--s2p-content-max); margin: 0 auto; padding: 0 var(--s2p-space-6); }
.site-container--narrow { max-width: 860px; }
@media (max-width: 600px) { .site-container { padding: 0 var(--s2p-space-4); } }

/* ===== 머리글: 메뉴 6개 + 오른쪽 로그인·시작 버튼. 1080px 이하는 햄버거(site.js, 스크립트가 없으면 그대로 펼쳐 보인다) ===== */
.site-header {
  position: sticky; top: 0;
  z-index: var(--s2p-z-topbar);
  background: var(--s2p-color-surface);
  border-bottom: 1px solid var(--s2p-color-border-subtle);
}
.site-header__bar { display: flex; align-items: center; gap: var(--s2p-space-6); min-height: var(--site-header-height); }
.site-brand {
  display: inline-flex; align-items: center; gap: var(--s2p-space-3);
  flex-shrink: 0;
  color: var(--s2p-color-text);
  font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-brand__logo { display: block; width: 36px; height: 36px; }
.site-brand .s2p-badge { display: none; }
@media (min-width: 1241px) { .site-brand .s2p-badge { display: inline-flex; } }
.site-panel { display: flex; align-items: center; flex: 1 1 auto; gap: var(--s2p-space-4); min-width: 0; }
.site-nav { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: flex; align-items: center;
  min-height: var(--s2p-control-height);
  padding: 0 var(--s2p-space-3);
  border-radius: var(--s2p-radius-sm);
  color: var(--s2p-color-text-muted);
  font-size: var(--s2p-text-body); font-weight: var(--s2p-weight-medium);
  white-space: nowrap;
  text-decoration: none;
}
.site-nav a:hover { background: var(--s2p-color-surface-muted); color: var(--s2p-color-text); }
/* 현재 위치: 색 + 굵기 + 밑줄(색만으로 전달하지 않는다) */
.site-nav a[aria-current] {
  background: var(--s2p-color-info-light);
  color: var(--s2p-color-link);
  font-weight: var(--s2p-weight-bold);
  box-shadow: inset 0 -3px 0 var(--s2p-color-primary);
}
.site-actions { display: flex; align-items: center; gap: var(--s2p-space-2); margin-left: auto; }
.s2p-btn.site-menu-toggle { display: none; margin-left: auto; }

@media (max-width: 1080px) {
  .site-header__bar { flex-wrap: wrap; gap: 0 var(--s2p-space-4); }
  .site-header.is-ready .s2p-btn.site-menu-toggle { display: inline-flex; }
  .site-panel { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: var(--s2p-space-4); padding-bottom: var(--s2p-space-4); }
  .site-header.is-ready .site-panel { display: none; }
  .site-header.is-ready.is-open .site-panel { display: flex; }
  .site-header.is-open { max-height: 100vh; overflow-y: auto; }
  .site-nav { flex-direction: column; align-items: stretch; }
  .site-nav a { min-height: 44px; }
  .site-actions { flex-direction: column-reverse; align-items: stretch; margin-left: 0; }
  .site-actions .s2p-btn { width: 100%; min-height: 44px; }
}

/* ===== 히어로 ===== */
.site-hero {
  padding: var(--site-section-gap) 0 var(--s2p-space-8);
  text-align: center;
  background: linear-gradient(180deg, var(--s2p-primary-50) 0%, var(--s2p-color-bg) 100%);
}
.site-hero__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2p-space-2); margin-bottom: var(--s2p-space-6); }
.site-hero__title {
  margin: 0 0 var(--s2p-space-5);
  font-size: clamp(30px, 6vw, 46px); font-weight: var(--s2p-weight-bold);
  line-height: var(--s2p-leading-tight); letter-spacing: -0.02em;
}
.site-hero__title span { color: var(--s2p-color-primary); }
.site-hero__desc { max-width: 700px; margin: 0 auto var(--s2p-space-8); font-size: var(--s2p-text-body-lg); color: var(--s2p-color-text-muted); }
.site-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2p-space-3); }
.site-hero__actions .s2p-btn { min-height: 48px; padding: 0 var(--s2p-space-6); font-size: var(--s2p-text-body-lg); }
@media (max-width: 480px) {
  .site-hero__actions { flex-direction: column; align-items: stretch; }
}

/* 이용 흐름 4단계 카드: 제목만 여기, 카드 격자는 공통 .s2p-flow */
.site-flow-title { margin: var(--s2p-space-8) 0 var(--s2p-space-4); font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); }

/* ===== 섹션 틀 ===== */
.site-section { padding: var(--site-section-gap) 0; border-top: 1px solid var(--s2p-color-border-subtle); }
.site-section__head { max-width: 680px; margin: 0 auto var(--s2p-space-8); text-align: center; }
.site-eyebrow { margin: 0 0 var(--s2p-space-2); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-bold); letter-spacing: 0.04em; color: var(--s2p-color-link); }
.site-section__title { margin: 0 0 var(--s2p-space-3); font-size: clamp(24px, 3.6vw, 32px); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); letter-spacing: -0.01em; }
.site-section__desc { margin: 0; font-size: var(--s2p-text-body-lg); color: var(--s2p-color-text-muted); }
.site-section__foot { margin: var(--s2p-space-6) 0 0; text-align: center; }
.site-section__foot p { margin: 0 0 var(--s2p-space-3); color: var(--s2p-color-text-muted); }

/* 카드 격자: 위 두 장은 반, 나머지는 1/3 폭. 900px 이하는 한 줄에 한 장 */
.site-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2p-space-4); }
.site-bento > * { grid-column: span 2; }
.site-bento > .site-span-3 { grid-column: span 3; }
@media (max-width: 900px) { .site-bento > *, .site-bento > .site-span-3 { grid-column: 1 / -1; } }
.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--s2p-space-4); }
.site-card .s2p-card__body { display: flex; flex-direction: column; height: 100%; padding: var(--s2p-space-6); }
.site-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: var(--s2p-space-4);
  border-radius: var(--s2p-radius-sm);
  background: var(--s2p-primary-100); color: var(--s2p-primary-800);
}
.site-card .s2p-card__title { margin: 0; }
.site-card__sub { margin: var(--s2p-space-1) 0 0; font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }
.site-card__text { margin: var(--s2p-space-3) 0 var(--s2p-space-4); font-size: var(--s2p-text-body-lg); color: var(--s2p-color-text-muted); }
.site-card__text:last-child { margin-bottom: 0; }
.site-card__actions { display: flex; flex-wrap: wrap; gap: var(--s2p-space-2); margin-top: auto; padding-top: var(--s2p-space-4); }
.site-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2p-space-2); }
.site-checks li { position: relative; padding-left: var(--s2p-space-6); font-size: var(--s2p-text-body); color: var(--s2p-color-neutral-text); }
.site-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--s2p-color-success-text); font-weight: var(--s2p-weight-bold); }
.site-note { margin-top: var(--s2p-space-4); }
.site-card .site-note { margin-top: var(--s2p-space-4); }

/* ===== 다운로드 ===== */
.site-download { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: var(--s2p-space-4); align-items: stretch; }
@media (max-width: 900px) { .site-download { grid-template-columns: minmax(0, 1fr); } }
.site-download__intro { align-self: center; padding-right: var(--s2p-space-4); }
.site-download__intro h3 { margin: 0 0 var(--s2p-space-3); font-size: var(--s2p-text-title); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); }
.site-download__intro p { margin: 0 0 var(--s2p-space-4); color: var(--s2p-color-text-muted); }
.site-download .s2p-card__body { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; }
.site-download .s2p-card__body .s2p-btn { margin-top: auto; }
.site-download__text { margin: var(--s2p-space-2) 0 var(--s2p-space-4); font-size: var(--s2p-text-caption); color: var(--s2p-color-text-muted); }
.site-download .site-icon { margin-bottom: var(--s2p-space-3); }

/* ===== 요금 카드: 공통 .s2p-plans / .s2p-plan(components.css). 안내문만 여기 ===== */
.site-pricing-note { margin: var(--s2p-space-5) 0 0; font-size: var(--s2p-text-body); color: var(--s2p-color-text-muted); }

/* 환불 조항·약관 본문 */
.site-card--wide { margin-top: var(--s2p-space-6); }
.site-card--wide .s2p-card__body { padding: var(--s2p-space-6); }
.site-refund { font-size: var(--s2p-text-body); line-height: 1.75; color: var(--s2p-color-neutral-text); }
.site-refund h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2p-space-2); margin: 0 0 var(--s2p-space-2); font-size: var(--s2p-text-title-sm); color: var(--s2p-color-text); }
.site-refund h4 { margin: var(--s2p-space-5) 0 var(--s2p-space-2); font-size: var(--s2p-text-body-lg); color: var(--s2p-color-text); }
.site-refund p { margin: 0 0 var(--s2p-space-2); }
.site-refund ul { margin: var(--s2p-space-2) 0 var(--s2p-space-3); padding-left: var(--s2p-space-5); }
.site-refund li { margin-bottom: var(--s2p-space-1); }
.site-formula { display: block; margin: var(--s2p-space-2) 0; padding: var(--s2p-space-2) var(--s2p-space-3); background: var(--s2p-color-surface-muted); border: 1px solid var(--s2p-color-border-subtle); border-radius: var(--s2p-radius-sm); font-weight: var(--s2p-weight-semibold); color: var(--s2p-color-text); }
.site-example { color: var(--s2p-color-text-muted); }
.site-legal__item { margin: 0 0 var(--s2p-space-5); }
.site-legal__item:last-child { margin-bottom: 0; }
.site-legal__item h3 { display: flex; align-items: center; gap: var(--s2p-space-2); margin: 0 0 var(--s2p-space-2); font-size: var(--s2p-text-body-lg); font-weight: var(--s2p-weight-bold); }
.site-legal__item p { margin: 0; color: var(--s2p-color-neutral-text); }
.site-legal__version { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2p-space-2); margin-bottom: var(--s2p-space-5); font-weight: var(--s2p-weight-semibold); }

/* ===== 정정 공지·회사 정보 ===== */
.site-status { padding: var(--s2p-space-6); border: 1px dashed var(--s2p-color-border-input); border-radius: var(--s2p-radius-sm); background: var(--s2p-color-bg); color: var(--s2p-color-text-muted); text-align: center; }
.site-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2p-space-4); }
@media (max-width: 768px) { .site-support-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== 도움말 ===== */
.site-page-hero { padding: calc(var(--s2p-space-8) + var(--s2p-space-4)) 0 var(--s2p-space-6); text-align: center; background: linear-gradient(180deg, var(--s2p-primary-50) 0%, var(--s2p-color-bg) 100%); }
.site-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2p-space-2); margin-top: var(--s2p-space-5); }
.site-chips .s2p-btn { border-radius: var(--s2p-radius-pill); }
.faq-section { padding: var(--s2p-space-8) 0 var(--s2p-space-2); }
.faq-group-title { margin: var(--s2p-space-8) 0 var(--s2p-space-3); font-size: var(--s2p-text-title); font-weight: var(--s2p-weight-bold); line-height: var(--s2p-leading-tight); }
.faq-group-title:first-child { margin-top: 0; }

.site-contact { max-width: 720px; margin: 0 auto; }
.site-contact .s2p-card__body { padding: var(--s2p-space-6); }
.site-counter { text-align: right; }
.site-form-status:not(:empty) { margin-top: var(--s2p-space-4); }
.site-ticket { display: block; margin: var(--s2p-space-1) 0; font-family: var(--s2p-font-mono); font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); letter-spacing: 0.06em; user-select: all; }
@media (max-width: 480px) { .site-contact .s2p-card__body { padding: var(--s2p-space-4); } }

/* ===== 푸터: 어두운 면 토큰(사이드바 색)을 그대로 쓴다. 대비는 tokens.css 주석 참고 ===== */
.site-footer { padding: calc(var(--s2p-space-8) + var(--s2p-space-4)) 0 var(--s2p-space-8); background: var(--s2p-sidebar-bg); color: var(--s2p-sidebar-text); font-size: var(--s2p-text-body); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s2p-space-8); margin-bottom: var(--s2p-space-8); }
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s2p-space-6); } }
.site-footer__brand { margin: 0 0 var(--s2p-space-3); color: var(--s2p-sidebar-active); font-size: var(--s2p-text-title-sm); font-weight: var(--s2p-weight-bold); }
.site-footer__about { max-width: 440px; margin: 0; line-height: var(--s2p-leading-body); }
.site-footer__title { margin: 0 0 var(--s2p-space-3); color: var(--s2p-sidebar-group); font-size: var(--s2p-text-caption); font-weight: var(--s2p-weight-semibold); letter-spacing: 0.04em; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2p-space-2); }
.site-footer a { color: var(--s2p-sidebar-text); text-decoration: none; }
.site-footer a:hover { color: var(--s2p-sidebar-active); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline-color: var(--s2p-focus-ring-color-inverse); }
.site-footer__bottom { display: flex; flex-direction: column; gap: var(--s2p-space-2); padding-top: var(--s2p-space-6); border-top: 1px solid var(--s2p-sidebar-hover); font-size: var(--s2p-text-caption); }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* design-system 으로 올린 것(2026-11-06 A4): 아코디언(.s2p-accordion, 옛 .faq-item), 요금 카드(.s2p-plans/.s2p-plan), 단계 카드(.s2p-flow),
 * 이름-값 목록(.s2p-dl). 남은 후보: 상단 가로 메뉴(.site-nav·.site-menu-toggle)는 shell(사이드바)과 다른 공개 사이트용 패턴이라 이 파일에 둔다. */