/* 홈페이지 제작 서비스 페이지(/website) — 템플릿 갤러리·문의 영역 (2026-10-17)
   styles.css · styles-product.css 뒤에 불러온다. */

.ws-cta--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.ws-cta--ghost:hover { background: var(--fg); color: var(--bg); }

.callout code { font-family: inherit; font-weight: 600; }

/* 템플릿 갤러리 */
.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 22px; margin-top: 6px; }
#templates .d-sec__body--wide { max-width: 1040px; }
.tpl { display: flex; flex-direction: column; gap: 12px; color: var(--fg); text-decoration: none; }
.tpl__shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 18px 40px -30px rgba(26,47,42,.55); }
.tpl__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s ease; }
.tpl:hover .tpl__shot img { transform: scale(1.02); }
.tpl__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tpl__name { font-size: 16px; font-weight: 700; }
.tpl__kind { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tpl__desc { font-size: 14px; line-height: 1.7; color: var(--muted); word-break: keep-all; }
.tpl__open { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--coral-ink); }
.tpl:hover .tpl__open { color: var(--fg); }

/* 카드 오른쪽 아래에 같은 템플릿의 휴대폰 화면을 겹쳐 PC·모바일을 함께 보여 준다 */
.tpl__shot img.tpl__phone { position: absolute; right: 14px; bottom: -1px; width: 22%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border: 3px solid #1A2F2A; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 10px 24px -12px rgba(26,47,42,.6); transform: none !important; }
.tpl[hidden] { display: none; }

/* 업종 필터 */
.tpl-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-filter__btn { padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--fg); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tpl-filter__btn:hover { border-color: var(--fg); }
.tpl-filter__btn[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* 문의 */
.ws-ask { scroll-margin-top: 84px; }
.ws-ask__hint { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--muted); word-break: keep-all; }

/* 홈: 홈페이지 제작 티저 — 교육 티저(.course-teaser) 틀을 같이 쓴다. 두 티저 사이 구분선 */
html:lang(ko) .course-teaser__desc, html:lang(ko) .course-teaser__title, html:lang(ko) .services__note { word-break: keep-all; }

@media (max-width: 900px) {
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .ws-ask { scroll-margin-top: 72px; }
}

/* 홈 Services: 태그를 누르면 세부 페이지로 */
.tag-list li { display: flex; }
.tag--link { text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.tag--link:hover { border-color: var(--fg); color: var(--coral-ink); }
.services > .course-teaser__link { margin-top: -24px; width: fit-content; }

/* /services: 서비스 목록 바로가기 + 진행 단계 이름이 들어간 번호 칸 */
.svc-index { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) 56px; display: flex; flex-wrap: wrap; gap: 10px; }
.svc-index a { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; }
.svc-index a:hover { border-color: var(--fg); }
.svc-index span { font-size: 12px; color: var(--coral-ink); font-variant-numeric: tabular-nums; }
.d-sec__body > .detail-hero__cta { margin-top: 4px; }
.steps:has(.steps__when) li { grid-template-columns: 84px 1fr; }
.steps__when { white-space: nowrap; }
@media (max-width: 900px) { .svc-index { padding-bottom: 40px; } }

@media (max-width: 560px) {
  /* 폰에서는 2열로 촘촘하게 — 설명은 숨기고 이름·업종만 */
  .tpl__desc { display: none; }
  .tpl__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tpl__name { font-size: 14.5px; }
  .tpl__kind { font-size: 12px; white-space: normal; }
  .tpl__open { font-size: 12.5px; }
  .tpl__shot img.tpl__phone { right: 8px; border-width: 2px; border-radius: 9px 9px 0 0; }
}

/* 카드 이름이 길면 단어 단위로 줄바꿈, 업종 표기는 다음 줄로 내려간다 */
.tpl__meta { flex-wrap: wrap; row-gap: 2px; }
.tpl__name { word-break: keep-all; }
/* 진행 방식 번호 목록 — 기본 들여쓰기 제거(위아래 섹션과 왼쪽 맞춤) */
.d-sec__body .steps { padding: 0; list-style: none; }

/* FAQ 답 안의 링크 */
.qa details p a { text-decoration: underline; text-underline-offset: 3px; }