/* 타래 상세·지원·처리방침·계정 삭제 페이지의 보충 스타일. 페이지 틀과 글자 크기는 site.css(상세 페이지·
   .guide-section·.detail-body·.btn)를 그대로 쓰고, site.css에 없는 것만 여기에 둔다:
   언어 고르기(#en·#ko·#ja·#es), 소제목(h4)·표·안내 문단. 강조색은 section의 --app-accent로 정한다. */
.lang-doc,.tarae-links{--app-accent-soft:color-mix(in srgb,var(--app-accent) 12%,#fff)}
.guide-section a.btn{text-decoration:none}

/* 언어 고르기 — 기존 .btn을 한 줄로 나란히 놓고, 고른 언어는 .btn.primary와 같은 모양으로 보여 준다 */
.lang-switch{display:flex;gap:8px;max-width:520px;margin-bottom:6px}
.lang-switch .btn{flex:1 1 0;justify-content:center;padding-inline:8px;white-space:nowrap}
.lang-switch .btn:focus-visible,.legal-links .btn:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.legal-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* 타래 상세의 지원·처리방침·계정 삭제 버튼 줄 — 카드 바로 아래 단독 단락이라 위 여백을 단락 패딩에 맡긴다 */
.tarae-links .legal-links{margin-top:0}
/* 좁은 화면에서는 세 버튼이 두 줄로 들쭉날쭉 접히지 않게, 스토어 버튼(.actions)처럼 한 줄에 하나씩 쌓는다 */
@media(max-width:560px){.tarae-links .legal-links{flex-direction:column}}

/* 해시로 언어 단락에 들어오면 바로 위의 언어 고르기가 함께 보이도록 여백을 둔다 */
.lang-section{scroll-margin-top:72px}
.lang-section [id]{scroll-margin-top:16px}
.lang-section+.lang-section{margin-top:28px;border-top:1px solid var(--line)}
.lang-section h4{font-size:15px;margin-top:18px;color:var(--ink)}
.lang-section strong{color:var(--ink);font-weight:600}
.detail-page .lang-section ol{margin-top:8px;padding-left:20px}
.detail-page .lang-section .meta-line{font-size:13px;color:var(--faint)}
.detail-page .lang-section p.note{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink)}
.table-wrap{margin-top:12px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px;overflow-wrap:normal}
.table-wrap th:first-child,.table-wrap td:first-child{min-width:8.5em}
.table-wrap th,.table-wrap td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--muted)}
.table-wrap th{color:var(--ink);font-weight:600;background:var(--bg)}
.table-wrap tr:last-child td{border-bottom:0}

/* 고른 언어(#ko 등)만 보여 준다. 고르지 않았으면 기기 언어(html[data-lang]), 그것도 없으면 영어.
   :has를 모르는 브라우저는 네 언어를 모두 펼친다. */
@supports selector(:has(*)){
  .lang-sections .lang-section{display:none}
  .lang-sections .lang-section:target,.lang-sections .lang-section:has(:target){display:block}
  html:not([data-lang]) .lang-sections:not(:has(:target)) .lang-section[data-default],
  html[data-lang="en"] .lang-sections:not(:has(:target)) #en,
  html[data-lang="ko"] .lang-sections:not(:has(:target)) #ko,
  html[data-lang="ja"] .lang-sections:not(:has(:target)) #ja,
  html[data-lang="es"] .lang-sections:not(:has(:target)) #es{display:block}
  .lang-section+.lang-section{margin-top:0;border-top:0}
  .lang-doc:has(#en:target,#en :target) .lang-switch a[href="#en"],
  .lang-doc:has(#ko:target,#ko :target) .lang-switch a[href="#ko"],
  .lang-doc:has(#ja:target,#ja :target) .lang-switch a[href="#ja"],
  .lang-doc:has(#es:target,#es :target) .lang-switch a[href="#es"],
  html:not([data-lang]) .lang-doc:not(:has(.lang-sections :target)) .lang-switch a[href="#en"],
  html[data-lang="en"] .lang-doc:not(:has(.lang-sections :target)) .lang-switch a[href="#en"],
  html[data-lang="ko"] .lang-doc:not(:has(.lang-sections :target)) .lang-switch a[href="#ko"],
  html[data-lang="ja"] .lang-doc:not(:has(.lang-sections :target)) .lang-switch a[href="#ja"],
  html[data-lang="es"] .lang-doc:not(:has(.lang-sections :target)) .lang-switch a[href="#es"]{background:var(--app-accent);border-color:var(--app-accent);color:#fff}
}
/* 좁은 화면에서는 표를 줄마다 쌓고, 첫 칸을 제외한 칸 앞에 열 이름(data-label)을 붙인다 */
@media(max-width:560px){
  .table-wrap table{min-width:0}
  .table-wrap thead{display:none}
  .table-wrap tr{display:block;padding:12px 14px;border-bottom:1px solid var(--line)}
  .table-wrap tr:last-child{border-bottom:0}
  .table-wrap td{display:block;padding:0;border:0}
  .table-wrap td+td{margin-top:8px}
  .table-wrap td:first-child{color:var(--ink);font-weight:600}
  .table-wrap td+td::before{content:attr(data-label);display:block;font-size:12px;color:var(--faint);font-weight:500}
}