/* 와그작 서비스 한눈에 (services.html · en/services.html) — 2026-10-08 고도화 3차 3절
 * 머리 · 띠 · 큰 단추 · 화면 낭독기 글은 help-center.css 의 hc-* 를 그대로 쓰고, 이 쪽에만 있는 것(svc-*)만 여기 둔다.
 * 색은 와그작 토큰(tokens.css)만 — 흰 · 연보라 · 보라 · 민트 · 산호 · 노랑. 서비스 색 = data-hc-color(help-center.css 의 --hc-c*).
 * 움직임은 '처음엔 최종 상태'가 기본이다. 움직임 줄이기 · 저사양(html.lite) · JS 없음이면 아무것도 숨기지 않고 움직이지 않는다. */

/* 서비스마다 글자 색 — 연한 바탕 위 작은 글도 4.5:1 을 넘는 진한 쪽으로(산호는 dark 가 4.3:1 이라 darker) */
.svc-main [data-hc-color="mint"]   { --svc-ink: var(--wz-mint-darker); }
.svc-main [data-hc-color="purple"] { --svc-ink: var(--wz-purple-dark); }
.svc-main [data-hc-color="yellow"] { --svc-ink: var(--wz-yellow-darker); }
.svc-main [data-hc-color="coral"]  { --svc-ink: var(--wz-coral-darker); }
.svc-main [data-hc-color="sky"]    { --svc-ink: var(--wz-sky-darker); }
.svc-main [data-hc-color="pink"]   { --svc-ink: var(--wz-pink-darker); }

/* 본문은 화면 언어와 상관없이 이 쪽 글의 언어다(main lang). 한국어 원본을 다른 화면 언어로 열어도 한국어 줄바꿈 · 글꼴을 지킨다 */
/* 사이트 공통 규칙이 영어 등에 자동 하이픈(hyphens: auto)을 건다 — 짧은 카드 글이 'pa-per' 처럼 끊겨 이 쪽에서는 끈다 */
.svc-main { hyphens: manual; -webkit-hyphens: manual; }
.svc-main:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
html:not([lang="ko"]) .svc-main:lang(ko) { font-family: 'Pretendard', var(--font-body); }

/* ── 머리 + 한눈에 보기 ───────────────────────────────────────────── */
.svc-hero { padding-block-end: var(--space-12); }
.svc-hero__text { position: relative; max-width: 46rem; }
.svc-hero .hc-hero__lead { margin-bottom: var(--space-8); }

.svc-glance {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-glance > li { min-width: 0; }

.svc-glance__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  border: 2px solid var(--hc-c-soft);
  border-radius: var(--radius-xl);
  background: var(--wz-bg-light);
  box-shadow: 0 4px 0 var(--hc-c-soft);
  color: var(--wz-text-primary);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-playful), box-shadow var(--transition-normal), border-color var(--transition-fast);
}

.svc-glance__card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--hc-c);
}

@media (hover: hover) and (pointer: fine) {
  .svc-glance__card:hover {
    transform: translateY(-4px);
    border-color: var(--hc-c);
    box-shadow: 0 10px 22px var(--hc-c-glow);
  }
  .svc-glance__card:hover .svc-down { transform: translateY(2px); }
}

.svc-glance__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.svc-glance__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.svc-glance__name {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-headline-sm);
  line-height: var(--leading-snug);
}

.svc-glance__line {
  color: var(--wz-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* 글꼴이 늦게 바뀌어(기기 글꼴 → Pretendard · 화면 언어 글꼴) 한 줄이 늘어도 카드 높이가 그대로이게 세 줄 자리를 잡아 둔다.
   잡지 않으면 PC 첫 화면에서 카드 줄이 2→3 줄로 늘며 아래 띠가 23px 밀렸다(2026-10-08 실측 CLS 0.0076). 휴대폰(한 줄씩)은 아래에서 푼다 */
.svc-glance__line { min-height: calc(var(--text-sm) * 1.625 * 3); }

.svc-glance__go {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--svc-ink);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

/* 화살표 칸 폭을 고정 — 글꼴이 바뀌어도 화살표 자리가 움직이지 않게 */
.svc-down { display: inline-block; width: 1em; text-align: center; transition: transform var(--transition-fast); }

/* 값 표시(무료 · 7일 무료 체험 뒤 이용권) — 연한 서비스 색 바탕 + 본문 글자색(작은 글이라 진하게) */
.svc-badge {
  display: inline-block;
  max-width: 100%;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--hc-c-soft);
  color: var(--wz-text-primary);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

@media (max-width: 960px) {
  .svc-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 휴대폰 — 넷을 한 줄씩(그림 옆에 이름 · 값 · 한 줄). 첫 화면에 넷의 이름과 값이 다 들게 짧게 */
@media (max-width: 640px) {
  .svc-hero { padding-block-end: var(--space-10); }
  .svc-hero .hc-hero__lead { margin-bottom: var(--space-5); }
  .svc-glance { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .svc-glance__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-4);
  }
  .svc-glance__icon { width: 44px; height: 44px; align-self: start; }
  .svc-glance__body { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1); }
  .svc-glance__name { font-size: var(--text-lg); }
  .svc-glance__line { flex-basis: 100%; min-height: 0; }
  /* 휴대폰은 '펼쳐 보기' 글 없이 오른쪽 화살표만(카드 전체가 누르는 자리 · 화면 낭독기는 카드 글을 읽는다) — 첫 화면에 카드가 더 든다 */
  .svc-glance__go { display: grid; place-items: center; place-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--hc-c-soft); }
  .svc-glance__go-text { display: none; }
}

/* ── 서비스마다 펼치기 ───────────────────────────────────────────── */
.svc-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
}

.svc-band__head .hc-band__title { margin: 0; }
/* 설명은 제목 아래 줄에 따로 — 제목 글꼴이 늦게 바뀌어도 옆으로 밀리지 않게 */
.svc-band__desc { flex-basis: 100%; margin: 0; color: var(--wz-text-secondary); }

.svc-list {
  display: grid;
  gap: var(--space-4);
}

.svc-item {
  border: 2px solid var(--hc-c-soft);
  border-radius: var(--radius-xl);
  background: var(--wz-bg-light);
  scroll-margin-top: calc(var(--wz-header-height) + var(--space-4));
  transition: border-color var(--transition-fast), box-shadow var(--transition-normal);
}

.svc-item[open] {
  border-color: var(--hc-c);
  box-shadow: 0 10px 24px var(--hc-c-glow);
}

.svc-item__sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: calc(var(--radius-xl) - 2px);
  list-style: none;
  cursor: pointer;
}

.svc-item__sum::-webkit-details-marker { display: none; }
.svc-item__sum::marker { content: ""; }

.svc-item__sum:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) and (pointer: fine) {
  .svc-item__sum:hover { background: var(--hc-c-soft); }
  .svc-item[open] > .svc-item__sum:hover { background: transparent; }
}

.svc-item__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.svc-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.svc-item__kind {
  flex-basis: 100%;
  color: var(--svc-ink);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.svc-item__name {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-headline-sm);
  line-height: var(--leading-snug);
}

.svc-item__line {
  flex-basis: 100%;
  color: var(--wz-text-secondary);
  line-height: var(--leading-relaxed);
}

/* 열림 표시 — 더하기가 빼기로(도움말 센터 질문과 같은 말) */
.svc-item__chev {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--hc-c-soft);
  transition: transform var(--duration-normal) var(--ease-playful), background-color var(--transition-fast);
}

.svc-item__chev::before,
.svc-item__chev::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--svc-ink);
  transform: translate(-50%, -50%);
}

.svc-item__chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc-item[open] .svc-item__chev { transform: rotate(135deg); background: var(--hc-c); }
.svc-item[open] .svc-item__chev::before,
.svc-item[open] .svc-item__chev::after { background: var(--wz-bg-light); }

.svc-item__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-10);
  padding: 0 var(--space-6) var(--space-6);
  border-top: 2px dashed var(--hc-c-soft);
  padding-top: var(--space-5);
  margin-inline: var(--space-2);
}

.svc-item__col,
.svc-item__wide { min-width: 0; }
.svc-item__wide { grid-column: 1 / -1; }

.svc-h {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--svc-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-base);
}

.svc-item__col > .svc-h:first-child,
.svc-item__wide > .svc-h:first-child { margin-top: 0; }

.svc-item__body p {
  margin: 0;
  color: var(--wz-text-secondary);
  line-height: var(--leading-relaxed);
}

/* 시작하는 법 세 걸음 — 번호 동그라미를 세로 선이 잇는다. 선은 열릴 때 위에서 아래로 한 번 그려진다(움직임 허용 + 저사양 아님일 때만) */
.svc-steps {
  position: relative;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: svc-step;
}

.svc-steps::before {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 2px;
  background: var(--hc-c-soft);
  transform-origin: top;
}

.svc-steps > li {
  position: relative;
  min-height: 32px;
  padding-inline-start: calc(32px + var(--space-3));
  color: var(--wz-text-primary);
  line-height: var(--leading-relaxed);
  counter-increment: svc-step;
}

.svc-steps > li::before {
  content: counter(svc-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--hc-c);
  color: var(--wz-text-primary);
  font-family: var(--font-accent);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-sm);
}

/* 보라 · 산호 바탕 위 번호는 흰 글자가 더 잘 읽힌다 */
.svc-main [data-hc-color="purple"] .svc-steps > li::before { color: var(--wz-text-inverse); }

@media (prefers-reduced-motion: no-preference) {
  :where(html.js:not(.lite)) .svc-item[open] .svc-steps::before { animation: svc-line 0.6s var(--ease-out) both; }
  :where(html.js:not(.lite)) .svc-item[open] .svc-item__body { animation: svc-open 0.28s var(--ease-out) both; }
}

@keyframes svc-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes svc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 자료와 링크 */
.svc-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-links > li { min-width: 0; }
.svc-links > li:only-child { grid-column: 1 / -1; }

.svc-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--svc-ink, var(--wz-purple-dark));
  font-weight: var(--weight-bold);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.svc-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; }

@media (hover: hover) and (pointer: fine) {
  .svc-link:hover .hc-arrow { transform: translateX(3px); }
  [dir="rtl"] .svc-link:hover .hc-arrow { transform: scaleX(-1) translateX(3px); }
}

.svc-links p { margin-top: var(--space-1); font-size: var(--text-sm); }

/* 앱 받기 — 웹 열기(큰 단추) + 스토어(테두리 단추) */
.svc-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.svc-acts .hc-btn,
.svc-box .hc-btn { white-space: normal; text-align: center; max-width: 100%; }

.svc-store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-height-lg);
  padding: 0 var(--space-5);
  border: 2px solid var(--hc-c);
  border-radius: var(--btn-radius);
  background: var(--wz-bg-light);
  color: var(--wz-text-primary);
  font-family: var(--font-accent);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-body-md);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--duration-fast) var(--ease-playful);
}

.svc-store svg { flex: none; color: var(--svc-ink); }
.svc-store:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.svc-store:active { transform: translateY(2px); }

@media (hover: hover) and (pointer: fine) {
  .svc-store:hover { background: var(--hc-c-soft); }
}

.svc-acts__note { color: var(--wz-text-secondary); font-size: var(--text-sm); }

.svc-asof {
  margin: var(--space-6) 0 0;
  color: var(--wz-text-secondary);
  font-size: var(--text-sm);
}

@media (max-width: 760px) {
  .svc-item__sum { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-4); }
  .svc-item__icon { width: 44px; height: 44px; align-self: start; }
  .svc-item__name { font-size: var(--text-lg); }
  .svc-item__chev { width: 32px; height: 32px; align-self: start; }
  .svc-item__body { grid-template-columns: minmax(0, 1fr); padding: var(--space-4) var(--space-4) var(--space-5); margin-inline: var(--space-1); }
  .svc-links { grid-template-columns: minmax(0, 1fr); }
  .svc-acts > .hc-btn { flex: 1 1 100%; }
  .svc-store { flex: 1 1 calc(50% - var(--space-3)); justify-content: center; padding: 0 var(--space-3); }
  .svc-acts .hc-btn { padding: var(--space-2) var(--space-5); }
}

/* ── 함께 알아 두면 좋은 곳 · 학교 · 자료 요청 ────────────────────── */
.svc-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}

.svc-more__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--wz-bg-light);
  border: 2px solid var(--hc-c-soft);
}

.svc-more__icon { width: 48px; height: 48px; border-radius: var(--radius-md); grid-row: 1 / span 2; }
.svc-more__body { min-width: 0; }

.svc-more__name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
}

.svc-more__body p { margin: 0; color: var(--wz-text-secondary); line-height: var(--leading-relaxed); font-size: var(--text-sm); }

.svc-more__go {
  grid-column: 2;
  justify-self: start;
  color: var(--svc-ink);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.svc-more__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-more__go:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; }

.svc-box {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-2xl);
  background: var(--hc-c-soft);
}

.svc-box + .svc-box { margin-top: var(--space-6); }

.svc-box__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-headline-md);
  line-height: var(--leading-snug);
}

.svc-box > p { margin: 0; max-width: 46rem; color: var(--wz-text-primary); line-height: var(--leading-relaxed); }

.svc-box__links {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 연한 바탕 위 링크는 본문 진한 보라로(민트 · 노랑 진한 색은 연한 같은 색 바탕에서 대비가 모자란다) */
.svc-box .svc-link { color: var(--wz-purple-darker); }
/* 연한 민트 · 노랑 바탕 위 작은 글 — 회색(--wz-text-secondary)은 4:1 이 안 돼 본문색으로 */
.svc-box__hint { color: var(--wz-text-primary); font-size: var(--text-sm); }

@media (max-width: 860px) {
  .svc-more { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .svc-box { padding: var(--space-6) var(--space-5); }
  .svc-box__title { font-size: var(--text-headline-sm); }
  .svc-box > .hc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-glance__card, .svc-item, .svc-item__chev, .svc-store, .svc-down { transition: none; }
  .svc-glance__card:hover, .svc-store:active { transform: none; }
}