/* ===========================================================
   iching-ui.combined.css — 정통주역점 통합 스타일
   - style.css + iching-ui.v2.additions.css 통합
   - 중복 제거 완료
   =========================================================== */

/* ========== 1. CSS 변수 (Theme Tokens) ========== */
:root {
  --fg: #1a1a1a;
  --muted: #b7777a;
  --accent: #0ea5e9;
  --accent-2: #10b981;
  --bg-soft: #f8fafc;
  --card: #ffffff;
  --border: #e5e7eb;
}

/* ========== 2. Reset & Body ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'NanumGothic', 'NanumGothicBold', 'NanumGothicExtraBold', 'NanumGothicLight', serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg);
  background: #fffcf0;
}

h1, h2, h3, h4, h5, h6,
button {
  font-family: 'NanumGothic', 'NanumGothicBold', 'NanumGothicExtraBold', 'NanumGothicLight', sans-serif;
}

/* ========== 3. 페이지 레이아웃 ========== */
.iching-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.iching-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ========== 4. 버튼 컨트롤 ========== */
.divination-controls {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.primary-btn, .secondary-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.primary-btn {
  background: #8b4513;
  color: #fff;
}
.primary-btn:hover {
  background: #654321;
}

.secondary-btn {
  background: #eee;
  color: #333;
}
.secondary-btn:hover {
  background: #ddd;
}

/* ========== 5. 컨텐츠 섹션 ========== */
/* 진행 표시 박스 */
.process-container {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 결과 래퍼 (바깥 큰 박스 없앰) */
.result-container,
.interpretation,
.changing-lines:not(.card) {
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.result-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 괘 심볼 영역 */
.hexagram-display {
  font-size: 4em;
  text-align: center;
  margin: 20px 0;
}

.interpretation h3 {
  margin-bottom: 6px;
}

/* interpretation 박스가 비어 있으면 표시하지 않음 */
.interpretation:empty {
  display: none;
}

/* 진행 로그 */
.changes-display {
  min-height: 40px;
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* ========== 6. 점괘선 UI ========== */
.line-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
}

.line {
  width: 42px;
  height: 6px;
  background: #111;
  border-radius: 2px;
  position: relative;
}

.line.yin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: #fff;
}

.line.changing {
  outline: 2px solid #b40000;
  box-shadow: 0 0 0 2px rgba(180,0,0,.2) inset;
}

.changing-line {
  color: #b40000;
  font-weight: 700;
}

/* ========== 7. 카드 공통 ========== */
.card {
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px;
  text-align: left;
}

.main-card.card {
  font-size: 1rem;
}

/* 본괘/변괘 카드 상단 행 */
.main-card.card .main-card__top,
.sub-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: 8px;
}

/* ========== 8. 칩 ('본괘', '변괘') ========== */
.card .card-chip {
  position: static;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid #b7777a;
  color: #ffffff;
  border-radius: 999px;
  background: #b7777a;
  font-size: 1rem;
  font-weight: 400;
  font-family: 'NanumGothic', 'Noto Serif CJK KR', serif !important;
}

/* ========== 9. 등급 배지 ========== */
.grade-line {
  margin: 0;
  display: inline-block;
}

.grade-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 400;
  font-size: 1rem;
  border: 1px solid var(--border, #e5e7eb);
  background: #f3f4f6;
  color: #111827;
}

/* 등급별 색상 */
.grade-badge.grade--daegil  { background: #f8e0d0; color: #000000; border-color: #f8e0d0; }
.grade-badge.grade--junggil { background: #f8e0d0; color: #000000; border-color: #f8e0d0; }
.grade-badge.grade--sogil   { background: #f8e0d0; color: #000000; border-color: #f8e0d0; }
.grade-badge.grade--munan   { background: #bbdcd6; color: #000000; border-color: #bbdcd6; }
.grade-badge.grade--lin     { background: #bbdcd6; color: #000000; border-color: #bbdcd6; }
.grade-badge.grade--witae   { background: #ffd700; color: #000000; border-color: #ffd700; }
.grade-badge.grade--hung    { background: #ffd700; color: #000000; border-color: #ffd700; }
.grade-badge.grade--daehung { background: #ffd700; color: #000000; border-color: #ffd700; }
.grade-badge.grade--neutral { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }

/* ========== 10. 본괘 심볼/이름 ========== */
.main-card.card .main-card__symbol {
  font-size: 70px;
  line-height: 1;
  margin: 2px 2px;
  text-align: center;
  color: #b7777a;
}

.main-card.card .main-card__name {
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .02em;
  margin-bottom: 4px;
  text-align: center;
  font-family: 'Noto Serif CJK KR', serif;
}

/* ========== 11. 변괘 헤더 ========== */
.changed-box .changed-head {
  display: block;
  text-align: center;
  margin-bottom: 4px;
}

.changed-box .changed-symbol {
  font-size: 72px;
  line-height: 1;
  margin: 4px 0 4px;
  color: #b7777a;
}

.changed-box .changed-name {
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .02em;
  font-family: 'Noto Serif CJK KR', serif;
}

/* ========== 12. 블록들 (괘사/해석/한줄요약/효문) ========== */
.bi-block, .interp-block, .line-block, .one-line-block {
  margin: 6px 0;
}

.bi-label {
  margin-bottom: 2px;
}

.bi.han, .bi.ko, .one-line-text, .interp-text {
  font-size: 1rem !important;
  line-height: 1.7;
}

/* 괘사 한자 원문 */
.bi-block .han {
  color: #006bff;
  font-family: 'NanumSquare', 'Noto Serif CJK KR', serif !important;
  font-size: 16px;
  font-weight: 400;
}

/* 괘사 한글 번역 */
.bi-block .ko {
  font-family: 'NanumGothic', 'Noto Sans KR', sans-serif !important;
  font-weight: 400;
}

/* 한 줄 요약 */
.one-line-label {
  margin-right: 2px;
  display: inline-flex;
  width: 1.4em;
  line-height: 1;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.one-line-text {
  color: #2A61A4;
  font-family: 'NanumSquare';
}

/* ========== 13. 해석 접기/펼치기 ========== */
.interp-text {
  white-space: pre-wrap;
}

.interp-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.interp-expanded {
  display: block;
}

.interp-toggle {
  margin-top: 4px;
  padding: 6px 10px;
  font-size: .9rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #f7f7f7;
  cursor: pointer;
}

/* ========== 14. 섹션 Pill 헤더 ========== */
.box-header {
  margin: -4px 0 10px;
}

.box-header .title {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  color: #111827;
  background: #e3e3e3;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ========== 15. 변효 카드 ========== */
.changing-lines.card {
  background: #fff !important;
  border: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin: 12px 0 !important;
  display: block !important;
}

/* ========== 16. 보조 텍스트 ========== */
.muted {
  color: var(--muted, #b7777a);
  font-size: .92rem;
}

/* ========== 17. 반응형 (모바일) ========== */
@media (max-width: 480px) {
  .hexagram-display {
    font-size: 3.5em;
  }
  
  .main-card.card .main-card__symbol {
    font-size: 60px;
  }
}