/* 역학 화면 공통 껍데기 — 한 벌만 둔다.
 *
 * [2026-09-01 운영자] "답변지 기본 레이아웃이 3로 통일되고 그 안에 명반만 달라지는 것 아닌가?"
 *
 * 실측(2026-09-01): 아래 규칙들이 페이지마다 복사돼 있었다 —
 *   .goldtext · .glass · .kr   6개 파일
 *   .fld · .fld:focus          5개 파일
 *   @keyframes spin            4개 파일
 * 다행히 **본문은 글자까지 같았다**. 사본 md5 가 갈렸던 것은 페이지 고유 추가분
 * (예: cheon 의 iOS 확대 방지 .fld{font-size:16px}) 때문이었다.
 * 그래서 같은 것만 여기로 올린다 — 페이지 고유값은 그 페이지에 그대로 둔다.
 * 이 파일이 먼저 실리고 페이지 <style> 이 뒤에 오므로, 고유값이 이긴다(덮어쓰기 유지).
 *
 * 왜 모으나: JS 쪽에서 사본이 갈려 실제로 사고가 났다.
 *   reading.html 에만 hourFromLabel 이 없어 시각 라벨을 그대로 서버에 보냈고
 *   손님 화면에 "invalid literal for int()" 가 떴다(2026-08-31).
 *   CSS 도 같은 길을 간다 — 한 곳만 고치고 나머지를 잊는다.
 *
 * 쓰는 법: yeon-tw.css 다음, 페이지 <style> 앞에 넣는다.
 */

/* 한국어 줄바꿈 — 낱말을 쪼개지 않는다 */
.kr { word-break: keep-all; }

/* 금박 글씨 — 제목에 쓴다 */
.goldtext {
    background: linear-gradient(180deg, #faeec0, #e8cd7a 45%, #d4af37 72%, #b8872b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 유리판 — 카드·패널 바탕 */
.glass {
    background: rgba(31, 26, 21, .55);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, .18);
}

/* 입력칸 */
.fld {
    background: rgba(4, 5, 12, .5);
    border: 1px solid rgba(212, 175, 55, .25);
    color: #f6f1e6;
}
.fld:focus {
    outline: none;
    border-color: rgba(212, 175, 55, .7);
}

/* 기다리는 동안 도는 표시 */
@keyframes spin { to { transform: rotate(360deg); } }