/* 셈톡 파트너스 — 글자 크기·굵기는 토큰만. 색은 회색조 + 브랜드 파랑.
   상품 카드(.ptn-prod)·가격표(.ptn-tiers)·해지 세 줄(.ptn-rules)이 세 지면에서 같은 모양이다.
   공통 조건은 칩 한 줄(.ptn-chips). 교환·자동결제는 <details>(.ptn-notes). 넓으면 3열(가격표 카드는 한 줄 전체) · 좁으면 한 열. */
/* 카드·판은 광고·구독 홈(ads.css .cb-*) 폭을 그대로 쓴다. */
.ptn { max-width: none; }
.ptn .cb-layout { margin-top: var(--s-xl); }
.ptn-points span { display: block; }
.ptn-narrow { max-width: 640px; }
.ptn-kicker { margin: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--primary-pressed); }
.ptn-h { margin: var(--s-sm) 0 0; font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: var(--ls-22); }
.ptn-lead { margin: var(--s-md) 0 0; max-width: 40em; font-size: var(--fs-body1); line-height: var(--lh-body1); color: var(--text-secondary); }
.ptn-acts { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-xl); }
.ptn-acts .btn { min-height: 44px; }
/* 탭 — 세무사 등록 | 상품. 지금 탭은 진한 글자 + 밑줄 */
.ptn-tabs { display: flex; gap: var(--s-xl); margin: var(--s-sm) 0 0; border-bottom: 1px solid var(--border); }
.ptn-tab { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: var(--fs-body1); line-height: var(--lh-body1); font-weight: var(--fw-semibold); color: var(--text-tertiary); text-decoration: none; }
.ptn-tab:hover { color: var(--text-secondary); }
.ptn-tab[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.ptn-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ptn-h-tab { margin-top: var(--s-2xl); font-size: var(--fs-title2); line-height: var(--lh-title2); }

/* 등록 배너 — 그림은 왼쪽·가운데, 제목과 버튼은 오른쪽 갈색 면. */
.ptn-bnr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 28%); min-height: 480px; margin-top: var(--s-2xl); border-radius: 28px; overflow: hidden; background: #6b3a28; }
.ptn-bnr-art { position: relative; min-height: 480px; background: #efc4a4; overflow: hidden; }
.ptn-bnr-art img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left bottom; }
.ptn-bnr-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; min-height: 480px; padding: 48px 32px; }
.ptn-bnr .ptn-acts { margin-top: 64px; }
.ptn-bnr .ptn-h { margin: 0; color: #fff; }
.ptn-bnr .ptn-lead { color: rgba(255, 255, 255, .92); }
.ptn-bnr .btn-primary { background: #fff; color: var(--text-primary); }
.ptn-bnr .btn-primary:hover { background: var(--grey100); }
.ptn-cta { min-width: 200px; justify-content: center; }
.ptn-h-room { margin-top: 96px; }

.ptn-h2 { margin: var(--s-3xl) 0 0; font-size: var(--fs-title3); line-height: var(--lh-title3); font-weight: var(--fw-semibold); color: var(--text-primary); }

/* 소개 카드 3장(파트너스 홈) */
.ptn-grid { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md); }
.ptn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 무료로 쓰는 것 — 그림 칸 없는 흰 카드 두 장. */
.ptn-free { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ptn-free-card { min-width: 0; padding: 20px 22px 22px; background: var(--background); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 2px 6px rgba(11, 27, 61, .06); }
.ptn-free-card h3 { margin: 0; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ptn-free-card p { margin: 8px 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.ptn-card, .ptn-box, .ptn-prod { min-width: 0; padding: var(--s-xl); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ptn-card { background: var(--background); }
.ptn-card h3 { margin: 0; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ptn-card p { margin: var(--s-sm) 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.ptn-box { margin-top: var(--s-lg); }

/* 공통 조건 칩 */
.ptn-chips { list-style: none; margin: var(--s-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.ptn-chips li { padding: var(--s-xs) var(--s-md); border-radius: var(--r-full); background: var(--grey100); font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-medium); color: var(--grey700); }

/* 상품 카드 — 이름 → 한 줄 → 가격 → 가격표 → 사실 → 자세히 */
.ptn-prods { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md); }
.ptn-prod-wide { grid-column: 1 / -1; }
.ptn-prod { display: flex; flex-direction: column; background: var(--background); box-shadow: var(--shadow-card); }
.ptn-prod-solo { margin-top: var(--s-xl); }
.ptn-prod-name { margin: 0; font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ptn-prod-what { margin: var(--s-xs) 0 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.ptn-price { margin: var(--s-lg) 0 0; font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-22); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ptn-prod-solo .ptn-price { margin-top: 0; }
.ptn-meta { margin: var(--s-xs) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }

/* 상품 상세 — 가격이 머리, 포함·구매가 몸 */
.ptn-sheet { margin-top: var(--s-xl); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--background); }
.ptn-sheet-top { padding: var(--s-xl); background: var(--grey50); border-bottom: 1px solid var(--border); }
.ptn-sheet-top .ptn-price { margin-top: 0; }
/* 회색 머리(--grey50) 위 caption은 tertiary(#6B7684)가 4.5:1에 못 미친다 — 한 단 진한 본문색. */
.ptn-sheet-top .ptn-meta { color: var(--text-secondary); }
.ptn-sheet-body { padding: var(--s-xl); display: flex; flex-direction: column; }
.ptn-sheet-body .ptn-tiers { margin-top: 0; }

/* «포함» 라벨 — 가격 아래 사실 목록의 머리 */
.ptn-inc { margin: var(--s-lg) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.ptn-prod .ptn-facts, .ptn-sheet-body .ptn-facts { margin-top: var(--s-sm); }

/* 해지·환불 세 줄. 상품 상세(좁은 단)는 한 줄씩. */
.ptn-rules { list-style: none; margin: var(--s-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-md); }
.ptn-narrow .ptn-rules { grid-template-columns: minmax(0, 1fr); }
.ptn-rules li { min-width: 0; display: flex; flex-direction: column; gap: var(--s-xs); padding: var(--s-lg) var(--s-xl); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--background); }
.ptn-rule-k { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.ptn-rule-v { font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-medium); color: var(--text-primary); }

/* 상품 상세 명세 — 넓은 화면은 라벨·값, 좁으면 위아래 */
.ptn-spec { margin: var(--s-lg) 0 0; }
.ptn-spec div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--s-md); align-items: baseline; padding: var(--s-md) 0; border-bottom: 1px solid var(--border); }
.ptn-spec div:first-child { border-top: 1px solid var(--border); }
.ptn-spec dt { margin: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.ptn-spec dd { margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-primary); }

/* 가격표 — 이름 왼쪽 · 값 오른쪽 한 줄(짧은 값이라 좁은 화면에서도 접지 않는다) */
.ptn-tiers { list-style: none; margin: var(--s-md) 0 0; padding: 0; border-top: 1px solid var(--border); }
.ptn-tiers li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md); padding: var(--s-sm) 0; border-bottom: 1px solid var(--border); }
.ptn-tier-label { min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-primary); }
.ptn-tier-label small { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.ptn-tier-price { flex: none; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* 넓은 카드의 가격표는 칸으로 편다 — 이름 위 · 값 아래(좁으면 위의 한 줄 목록으로 돌아간다) */
@media (min-width: 721px) {
  .ptn-prod-wide .ptn-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-sm); border-top: 0; }
  .ptn-prod-wide .ptn-tiers li { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-xs); padding: var(--s-md) var(--s-lg); border: 0; border-radius: var(--r-md); background: var(--grey50); }
  .ptn-prod-wide .ptn-tier-price { font-size: var(--fs-heading); line-height: var(--lh-heading); }
}

/* 짧은 사실 두세 줄 */
.ptn-facts { list-style: none; margin: var(--s-md) 0 0; padding: 0; display: grid; gap: var(--s-xs); }
.ptn-facts li { position: relative; padding-left: var(--s-md); font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.ptn-facts li::before { content: ""; position: absolute; left: 2px; top: calc(var(--lh-body2) / 2 - 2px); width: 4px; height: 4px; border-radius: var(--r-full); background: var(--grey400); }

/* 접은 기준 */
.ptn-notes { margin: var(--s-md) 0 0; }
.ptn-notes summary { font-size: var(--fs-caption1); line-height: var(--lh-caption1); font-weight: var(--fw-medium); color: var(--grey700); cursor: pointer; }
.ptn-notes summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ptn-notes p { margin: var(--s-sm) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-secondary); }

.ptn-more { margin: 0; margin-top: auto; padding-top: var(--s-lg); display: flex; flex-wrap: wrap; gap: var(--s-lg); font-size: var(--fs-body2); line-height: var(--lh-body2); }
.ptn-box .ptn-facts { margin-top: 0; }
.ptn-note { margin: var(--s-md) 0 0; max-width: 40em; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }

/* 상품 탭으로 가는 한 줄(세무사 등록 탭) */
.ptn-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); padding: var(--s-lg) var(--s-xl); border: 1px solid var(--border); border-radius: var(--r-lg); color: inherit; text-decoration: none; }
.ptn-next { margin-top: var(--s-xl); }
a.ptn-row:hover { background: var(--grey50); }
a.ptn-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ptn-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ptn-row-name { font-size: var(--fs-body1); line-height: var(--lh-body1); font-weight: var(--fw-semibold); color: var(--text-primary); }
.ptn-row-what { font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.ptn-row-go { flex: none; font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-semibold); color: var(--primary-pressed); }

.ptn-faq { margin: var(--s-lg) 0 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.ptn-faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--background); }
.ptn-faq summary { padding: var(--s-lg) var(--s-xl); font-size: var(--fs-body1); line-height: var(--lh-body1); font-weight: var(--fw-semibold); color: var(--text-primary); cursor: pointer; }
.ptn-faq summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ptn-faq details p { margin: 0; padding: 0 var(--s-xl) var(--s-lg); font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-secondary); }
.ptn-dl { margin: var(--s-lg) 0 0; display: grid; gap: var(--s-md); }
.ptn-dl div { display: grid; gap: var(--s-xs); }
.ptn-dl dt { margin: 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
.ptn-dl dd { margin: 0; font-size: var(--fs-body2); line-height: var(--lh-body2); color: var(--text-primary); }
.ptn-buy { margin-top: var(--s-xl); align-self: flex-start; min-height: 44px; }
.ptn-foot { margin: var(--s-xl) 0 0; font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--text-tertiary); }
@media (max-width: 900px) {
  .ptn-grid, .ptn-prods, .ptn-rules, .ptn-free { grid-template-columns: minmax(0, 1fr); }
  .ptn-bnr { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ptn-bnr-copy { min-height: 0; padding: 32px 24px 28px; }
  .ptn-bnr-art { min-height: 280px; }
}
@media (max-width: 720px) {
  .ptn-prod, .ptn-box, .ptn-sheet-top, .ptn-sheet-body { padding: var(--s-lg); }
  .ptn-spec div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* 좁으면 줄은 위아래로 쌓는다(design.md — 모바일 2단 금지) */
  .ptn-row { flex-direction: column; align-items: flex-start; gap: var(--s-xs); padding: var(--s-lg); }
  .ptn-cta { width: 100%; }
  .ptn-h-room { margin-top: 72px; }
}