/* ═══════════════════════════════════════════ DigMol — 다국어 타이포그래피 + 언어 전환기 style.css / legal.css 다음에 로드하세요. 한국어 폰트로 일본어 가나를 렌더하면 자형이 무너지고, 중국어를 한국 폰트로 렌더하면 이체자가 섞입니다. 을 보고 폰트 스택을 갈아끼웁니다. ═══════════════════════════════════════════ */ :root { --f-ko: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; --f-ja: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', 'Meiryo', system-ui, sans-serif; --f-zh-hant: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', 'Heiti TC', system-ui, sans-serif; --f-zh-hans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Heiti SC', system-ui, sans-serif; --f-latin: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif; } html[lang^="ko"] body { --sans: var(--f-ko); } html[lang^="ja"] body { --sans: var(--f-ja); } html[lang="zh-Hant"] body, html[lang^="zh-TW"] body, html[lang^="zh-HK"] body { --sans: var(--f-zh-hant); } html[lang="zh-Hans"] body, html[lang^="zh-CN"] body { --sans: var(--f-zh-hans); } html[lang^="en"] body { --sans: var(--f-latin); } /* CJK 는 단어 경계가 없어서 어디서든 줄이 끊깁니다. break-all 을 쓰면 조사·구두점이 줄머리로 튀므로 끕니다. */ html[lang^="ko"], html[lang^="ja"], html[lang^="zh"] { word-break: normal; overflow-wrap: anywhere; line-break: strict; } html[lang^="ja"] .legal-doc p, html[lang^="zh"] .legal-doc p, html[lang^="ja"] .legal-doc li, html[lang^="zh"] .legal-doc li { line-height: 1.95; /* 한자 밀도가 높아 행간을 더 준다 */ letter-spacing: .01em; } /* 영문은 한 줄이 길어져 가독 폭을 줄여 준다 */ html[lang^="en"] .legal-doc p, html[lang^="en"] .legal-doc li { max-width: 68ch; } /* 목차 항목이 언어마다 길이가 달라 그리드 폭을 살짝 넓힘 */ html[lang^="en"] .legal-cols, html[lang^="ja"] .legal-cols { grid-template-columns: 252px minmax(0, 1fr); } /* 사업자 정보 — 영문 주소가 길어 줄바꿈 허용 */ html[lang^="en"] .lc-grid b { word-break: break-word; } /* ─────────── 번역본 고지 배너 ─────────── */ .legal-xlate { display: flex; gap: 10px; align-items: flex-start; background: color-mix(in srgb, var(--lg-accent, #c8622a) 7%, transparent); border: 1px solid color-mix(in srgb, var(--lg-accent, #c8622a) 24%, transparent); border-radius: 12px; padding: 13px 16px; margin: 0 0 26px; font-size: 13.4px; line-height: 1.7; color: var(--lg-mute, #7c7168); } .legal-xlate b { color: var(--lg-ink, #1a1512); font-weight: 650; } .legal-xlate::before { content: '⚖'; flex: none; opacity: .65; } /* ─────────── 언어 전환기 ─────────── */ .lang-switch { position: relative; display: inline-flex; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 100px; border: 1.5px solid var(--line, #e8e0d4); background: transparent; color: var(--ink-2, #5c5651); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; transition: border-color .16s, color .16s; } .lang-btn:hover { border-color: var(--amber, #c8622a); color: var(--amber, #c8622a); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 148px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line, #e8e0d4); border-radius: 13px; box-shadow: 0 12px 32px rgba(28, 26, 24, .13); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; } .lang-switch.open .lang-menu, .lang-switch:focus-within .lang-menu { /* JS 실패해도 키보드로는 열린다 */ opacity: 1; visibility: visible; transform: none; } .lang-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #5c5651); text-decoration: none; white-space: nowrap; } .lang-menu a:hover { background: var(--cream-2, #f6efe4); color: var(--ink, #1c1a18); } .lang-menu a.on { color: var(--amber, #c8622a); } .lang-menu a.on::after { content: ' ✓'; } /* 각 언어 이름은 그 언어의 폰트로 — 일본어 항목이 한국 폰트로 나오면 어색합니다 */ .lang-menu a[lang^="ja"] { font-family: var(--f-ja); } .lang-menu a[lang="zh-Hant"]{ font-family: var(--f-zh-hant); } .lang-menu a[lang="zh-Hans"]{ font-family: var(--f-zh-hans); } .lang-menu a[lang^="en"] { font-family: var(--f-latin); } .lang-menu a[lang^="ko"] { font-family: var(--f-ko); } @media (max-width: 560px) { .lang-menu { right: auto; left: 0; } } @media print { .lang-switch { display: none !important; } }