/* 우아공 공식 소개 페이지(ko · ja · hi) 전용 — 공용 /style.css 위에 얹는다 (2026-10-15 티징판).
   색은 공용 변수(--bg --ink --sub --card --line --band2 ...)만 쓴다: 밝은 판·어두운 판 모두 공용 값을 따른다. 외부 글꼴·스크립트 없음. */

.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--brand-ink);padding:10px 16px;border-radius:0 0 12px 0;font-weight:700;z-index:20;text-decoration:none}
.skip:focus{left:0}
a:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

html[lang="ko"] body{word-break:keep-all}   /* 한글은 낱말 중간에서 줄을 바꾸지 않는다(공용 글꼴 줄·overflow-wrap:anywhere 만으로는 음절 사이에서 끊긴다) */
/* 글꼴: 공용 글꼴 줄은 한글이 앞이라 일본어 한자가 한국식 모양으로 나올 수 있다 → 판마다 맞춘다 */
html[lang="ja"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
html[lang="hi"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Devanagari","Nirmala UI","Mangal","Kohinoor Devanagari","Devanagari Sangam MN",sans-serif;line-height:1.6}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{line-height:1.45}
html[lang="hi"] .lede,html[lang="hi"] .qa p,html[lang="hi"] .facts td,html[lang="hi"] .facts th{line-height:1.6}

/* 첫 띠(제목 · 마스코트) */
.ug-hero{padding:36px 20px 40px;display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.ug-hero h1{font-size:clamp(26px,6.2vw,44px);line-height:1.3;margin:0 0 12px;letter-spacing:-.5px}
.ug-hero .lede{font-size:clamp(16px,2.4vw,18px);color:var(--ink);margin:0 0 16px;max-width:60ch}
.ug-hero .kicker strong{font-weight:800}
.ug-hero .mascot{margin:0;text-align:center}
.ug-hero .mascot img{width:auto;height:clamp(140px,24vh,300px);max-width:100%;filter:drop-shadow(0 8px 0 rgba(30,58,107,.12))}
@media (min-width:860px){.ug-hero{grid-template-columns:1.35fr .65fr;gap:40px;padding:52px 20px 56px}.ug-hero .mascot img{height:clamp(240px,48vh,380px)}}

.sum{margin:0;padding:16px 18px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);max-width:62ch}
.sum li{margin:0 0 8px}
.sum li:last-child{margin-bottom:0}
ol.sum{list-style:none;counter-reset:s;padding-left:18px}
ol.sum li{counter-increment:s;position:relative;padding-left:30px}
ol.sum li::before{content:counter(s);position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#1e3a6b;font-weight:800;font-size:13px;line-height:22px;text-align:center}

/* 마디 */
.ug-sec{padding:44px 0 8px}
.ug-sec h2{font-size:clamp(22px,4.4vw,30px);margin:0 0 16px}
.ug-note{color:var(--sub);margin:14px 0 0;font-size:15.5px}

/* 사실표 */
.facts{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.facts th,.facts td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15.5px}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts thead th{background:var(--chip);color:var(--chip-ink);font-size:13.5px;letter-spacing:.2px}
.facts th{overflow-wrap:normal}
/* (1차의 nowrap 규칙은 .facts.short 로 옮겼다) */
@media (max-width:699px){.facts th,.facts td{padding:11px 11px}.facts tbody th{font-size:14.5px}}
.facts tbody th{width:clamp(5.6em,25%,11em);background:var(--band2);font-weight:800;color:var(--ink)}
@media (min-width:700px){.facts th,.facts td{padding:14px 18px;font-size:16px}}

/* 자주 묻는 질문 */
.qa{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 12px;box-shadow:var(--shadow)}
.qa h3{margin:0 0 8px;font-size:17.5px;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.qa p{margin:0;display:flex;gap:10px;align-items:flex-start;font-size:16px}
.qa .mk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#1e3a6b;font-weight:800;font-size:13px;line-height:24px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.qa .mk.a{background:var(--chip);color:var(--chip-ink)}
.qa span.t{display:block;min-width:0}

/* 쓰레드 */
.threads{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.threads li{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.threads a{display:inline-block;font-weight:800;font-size:17px;word-break:break-all}
.threads .who{display:block;color:var(--sub);font-size:14.5px;margin-top:2px}

.maker{margin:22px 0 0;font-weight:700}
.meta-line{color:var(--sub);font-size:14px;margin:6px 0 0}
footer.site .links{margin:0 0 10px}
footer.site .links a{margin-right:14px}

/* 다른 글자 체계가 섞인 낱말(lang 표시한 span)은 그 글자에 맞는 시스템 글꼴을 먼저 쓴다 */
span[lang="ko"]{font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif}
span[lang="ja"]{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif}
span[lang="hi"]{font-family:"Noto Sans Devanagari","Nirmala UI","Mangal","Kohinoor Devanagari","Devanagari Sangam MN",sans-serif}

/* ===== 2차(10/15): 차례 · 빵부스러기 · 맞는 경우 · 하루 따라가기 · 학습 설계 · 숫자 · 안전 ===== */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 12px;padding:0;font-size:14px;color:var(--sub)}
.crumbs li+li::before{content:"›";margin-right:8px}
.crumbs a{color:var(--sub)}
nav.toc ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
nav.toc a{display:inline-block;padding:6px 13px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);text-decoration:none;font-weight:700;font-size:14.5px;color:var(--ink)}
nav.toc a:hover{border-color:var(--ink)}
.ug-sec h3.sub{margin:22px 0 10px;font-size:18px}

/* 표: 첫 표(짧은 칸 이름)만 칸 이름을 한 줄로, 권한 표는 긴 영문 이름을 꺾는다 */
html[lang="ko"] .facts.short tbody th,html[lang="ja"] .facts.short tbody th{white-space:nowrap}
.facts.perm tbody th{overflow-wrap:anywhere;font-size:14px}
@media (min-width:700px){.facts.perm tbody th{width:clamp(11em,30%,17em)}}

/* 잘 맞는 경우 · 맞지 않는 경우: 글자 표시(✓ ✕)와 제목·점선으로 구분(색에만 기대지 않는다) */
.fit{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.fit{grid-template-columns:1fr 1fr}}
.fit>div{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.fit-no{border-style:dashed!important}
.fit h3{margin:0 0 10px;font-size:17.5px;line-height:1.5}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{position:relative;padding-left:28px;margin:0 0 9px}
.fit li:last-child{margin-bottom:0}
.fit li::before{position:absolute;left:0;top:0;font-weight:800;color:var(--ink)}
.fit-yes li::before{content:"✓"}
.fit-no li::before{content:"✕"}

/* 하루 따라가기 */
ol.walk{list-style:none;counter-reset:w;margin:16px 0 0;padding:0}
ol.walk>li{counter-increment:w;position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 18px 14px 58px;margin:0 0 12px;box-shadow:var(--shadow)}
ol.walk>li::before{content:counter(w);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#1e3a6b;font-weight:800;font-size:15px;line-height:28px;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
ol.walk h3{margin:0 0 4px;font-size:17.5px;line-height:1.5}
ol.walk p{margin:0;font-size:16px}

/* 학습 설계 · 안전 설계 블록 */
.dz{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:0 0 12px;box-shadow:var(--shadow)}
.dz h3{margin:0 0 5px;font-size:17.5px;line-height:1.5}
.dz p{margin:0;font-size:16px}
ol.levels{margin:10px 0 0;padding-left:1.7em;columns:1;column-gap:28px}
@media (min-width:760px){ol.levels{columns:2}}
ol.levels li{break-inside:avoid;margin:2px 0}
html[lang="hi"] ol.levels li,html[lang="hi"] ol.walk p,html[lang="hi"] .dz p,html[lang="hi"] .fit li{line-height:1.6}

/* 권한 표: 영문 권한 이름은 작은 글씨로 다음 줄에, 좁은 화면에서는 칸 이름 열을 넓힌다 */
.facts code.id{display:block;margin-top:2px;font-size:11.5px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;color:var(--sub);overflow-wrap:anywhere;word-break:break-all}
@media (max-width:699px){.facts.perm tbody th{width:40%}}