/*
 * 활판인쇄 (Letterpress) 디자인 테마
 * "납활자가 찍어낸 운명의 무게"
 *
 * 특징:
 * - 색의 밀도로 무게감 표현
 * - 얇은 괘선 (1px)
 * - 인쇄 잉크 질감
 * - 명조체 활자 미학
 */

/* ===========================
   CSS 변수 (활판인쇄 팔레트)
   =========================== */
:root {
  /* 인쇄 잉크 */
  --ink-black: #1C1917;
  --newsprint: #28241F;
  --old-paper: #3A352D;
  --proof-sheet: #4D463B;

  /* 강조색 */
  --red-ink: #C45050;
  --red-ink-light: rgba(196, 80, 80, 0.2);
  --red-ink-glow: rgba(196, 80, 80, 0.3);

  /* 텍스트 - 가독성 향상 */
  --worn-type: #A69E91;
  --white-paper: #F5F1E8;
  --cream-paper: #DDD6C8;

  /* 괘선 */
  --rule-color: rgba(166, 158, 145, 0.5);
  --rule-light: rgba(166, 158, 145, 0.3);

  /* 그림자 */
  --shadow-deep: rgba(28, 25, 23, 0.7);
  --shadow-soft: rgba(28, 25, 23, 0.4);

  /* 폰트 */
  --font-display: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  --font-body: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* 오행(五行) 색상 - 밝은 변형 */
  --ohang-wood: #7FB08D;   /* 木 - 고동청록 */
  --ohang-fire: #D4605A;   /* 火 - 진사주 */
  --ohang-earth: #D4B56A;  /* 土 - 황토색 */
  --ohang-metal: #F5F1E8;  /* 金 - 운모백 */
  --ohang-water: #6B8BA4;  /* 水 - 먹빛남색 */
}

/* ===========================
   오행(五行) 색상 클래스
   =========================== */
.ohang-wood { color: var(--ohang-wood) !important; }
.ohang-fire { color: var(--ohang-fire) !important; }
.ohang-earth { color: var(--ohang-earth) !important; }
.ohang-metal { color: var(--ohang-metal) !important; }
.ohang-water { color: var(--ohang-water) !important; }

/* 오행 배경색 (선택적 사용) */
.ohang-bg-wood { background-color: rgba(127, 176, 141, 0.15) !important; }
.ohang-bg-fire { background-color: rgba(212, 96, 90, 0.15) !important; }
.ohang-bg-earth { background-color: rgba(212, 181, 106, 0.15) !important; }
.ohang-bg-metal { background-color: rgba(245, 241, 232, 0.1) !important; }
.ohang-bg-water { background-color: rgba(107, 139, 164, 0.15) !important; }

/* 오행 테두리 (강조용) */
.ohang-border-wood { border-color: var(--ohang-wood) !important; }
.ohang-border-fire { border-color: var(--ohang-fire) !important; }
.ohang-border-earth { border-color: var(--ohang-earth) !important; }
.ohang-border-metal { border-color: var(--ohang-metal) !important; }
.ohang-border-water { border-color: var(--ohang-water) !important; }

/* ===========================
   기본 리셋 (Tailwind 오버라이드)
   =========================== */
.saju-input-wrapper *,
.saju-input-wrapper *::before,
.saju-input-wrapper *::after {
  border-radius: 0 !important;
}

/* 버튼 기본 스타일 리셋 */
.saju-input-wrapper button,
.saju-input-wrapper button[type="button"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border-radius: 0 !important;
  outline: none !important;
}

/* 결과 페이지 리셋 */
.result-page *,
.result-page *::before,
.result-page *::after {
  border-radius: 0 !important;
}

/* 하단 네비게이션 리셋 */
.bottom-nav *,
.bottom-nav *::before,
.bottom-nav *::after {
  border-radius: 0 !important;
}

/* ===========================
   기본 레이아웃
   =========================== */
.saju-input-wrapper {
  font-family: var(--font-body) !important;
  background: var(--ink-black) !important;
  min-height: 100vh;
  position: relative;
}

/* 인쇄 노이즈 텍스처 */
.saju-input-wrapper::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.saju-input-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 180px;
  position: relative;
  z-index: 1;
}

/* ===========================
   헤더
   =========================== */
.saju-header {
  text-align: center !important;
  padding: 24px 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--rule-color) !important;
}

.saju-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--white-paper) !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: 0.2em !important;
}

.saju-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
  letter-spacing: 0.1em !important;
}

/* ===========================
   진행 표시
   =========================== */
.saju-progress {
  margin-bottom: 32px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.progress-track {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.progress-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 16px !important;
  position: relative !important;
}

.step-number {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--worn-type) !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 0 !important;
}

.step-label {
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  font-family: var(--font-body) !important;
}

.progress-step.active .step-number {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

.progress-step.active .step-label {
  color: var(--white-paper) !important;
}

.progress-step.completed .step-number {
  background: var(--proof-sheet) !important;
  border-color: var(--worn-type) !important;
  color: var(--cream-paper) !important;
}

.progress-step.completed .step-label {
  color: var(--cream-paper) !important;
}

.progress-connector {
  width: 40px !important;
  height: 1px !important;
  background: var(--rule-color) !important;
}

/* ===========================
   선택 단계
   =========================== */
.selection-step {
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.selection-step.active {
  display: block;
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white-paper);
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: 0.1em;
}

.step-title::before {
  content: '― ';
  color: var(--red-ink);
}

.step-title::after {
  content: ' ―';
  color: var(--red-ink);
}

/* ===========================
   월 선택
   =========================== */
.month-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.option-btn,
.month-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 16px 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 0 !important;
  color: var(--cream-paper) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: var(--font-body) !important;
}

.option-btn:hover,
.month-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.option-btn.selected,
.month-btn.selected {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

.option-value {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
}

.option-unit {
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.option-btn.selected .option-unit,
.month-btn.selected .option-unit {
  color: var(--cream-paper) !important;
}

/* ===========================
   일 선택
   =========================== */
.day-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
  padding: 12px !important;
  background: rgba(58, 53, 45, 0.3) !important;
  border: 1px solid var(--rule-light) !important;
}

.day-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 10px 4px !important;
  background: var(--old-paper) !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--cream-paper) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.day-btn:hover {
  background: var(--proof-sheet) !important;
}

.day-btn.selected {
  background: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

.day-btn .option-unit {
  font-size: 0.65rem !important;
}

/* ===========================
   시간 선택
   =========================== */
.time-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

.time-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  border-radius: 0 !important;
  color: var(--cream-paper) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.time-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.time-btn.selected {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

.time-unknown-btn {
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  background: var(--newsprint) !important;
  border: 1px dashed var(--rule-color) !important;
}

.time-unknown-btn:hover {
  background: var(--old-paper) !important;
  border-style: solid !important;
}

.unknown-icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--worn-type) !important;
}

.unknown-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.time-btn.selected .unknown-icon {
  color: var(--white-paper) !important;
}

.time-zodiac-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  filter: grayscale(30%) contrast(1.1) !important;
  transition: all 0.2s ease !important;
}

.time-btn:hover .time-zodiac-icon {
  filter: grayscale(0%) contrast(1.2) !important;
}

.time-btn.selected .time-zodiac-icon {
  filter: grayscale(0%) contrast(1.2) brightness(1.1) !important;
}

.time-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.time-korean {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.time-range {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.time-btn.selected .time-range {
  color: var(--cream-paper) !important;
}

/* ===========================
   연도 선택
   =========================== */
.year-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  padding: 12px !important;
  background: rgba(58, 53, 45, 0.3) !important;
  border: 1px solid var(--rule-light) !important;
}

/* 성별 선택 (활판인쇄 스타일) */
.gender-toggle {
  display: flex !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--rule-color) !important;
  background: var(--ink-black) !important;
  width: 100% !important;
}

.gender-toggle-btn {
  flex: 1 !important;
  padding: 14px 0 12px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: rgba(166, 158, 145, 0.5) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  letter-spacing: 0.1em !important;
  text-align: center !important;
}

.gender-toggle-btn:first-child {
  border-right: 1px solid var(--rule-color) !important;
}

.gender-toggle-btn:hover:not(.selected) {
  background: var(--old-paper) !important;
  color: var(--cream-paper) !important;
}

.gender-toggle-btn.selected {
  background: var(--old-paper) !important;
  color: var(--red-ink) !important;
  border-bottom: 3px solid var(--red-ink) !important;
  font-weight: 500 !important;
}

.year-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 12px 8px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  color: var(--cream-paper) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  position: relative !important;
}

.year-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.year-btn.selected {
  background: var(--newsprint) !important;
  border-color: var(--red-ink) !important;
  box-shadow: inset 0 0 0 1px var(--red-ink-light) !important;
}

/* 연도 아이콘 (동적 생성: year-zodiac-icon) */
.year-zodiac-icon,
.zodiac-icon {
  width: 48px !important;
  height: 48px !important;
  filter: grayscale(30%) contrast(1.1) !important;
  transition: all 0.2s ease !important;
}

.year-btn:hover .year-zodiac-icon,
.year-btn:hover .zodiac-icon {
  filter: grayscale(0%) contrast(1.2) !important;
}

.year-btn.selected .year-zodiac-icon,
.year-btn.selected .zodiac-icon {
  filter: grayscale(0%) contrast(1.2) brightness(1.1) !important;
}

.year-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* 연도 값 (동적 생성: year-value) */
.year-value,
.year-label {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
}

.year-btn.selected .year-value,
.year-btn.selected .year-label {
  color: var(--white-paper) !important;
}

/* 띠 표시 (동적 생성: year-zodiac) */
.year-zodiac,
.zodiac-badge {
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  font-family: var(--font-body) !important;
  margin-top: 2px !important;
}

.year-btn:hover .year-zodiac,
.year-btn:hover .zodiac-badge,
.year-btn.selected .year-zodiac,
.year-btn.selected .zodiac-badge {
  color: var(--cream-paper) !important;
}

/* 나이 표시 (동적 생성: year-age) */
.year-age,
.age-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 0.65rem !important;
  padding: 2px 5px !important;
  background: var(--newsprint) !important;
  color: var(--worn-type) !important;
  font-family: var(--font-mono) !important;
  border: 1px solid var(--rule-light) !important;
}

.year-btn:hover .year-age,
.year-btn:hover .age-badge {
  color: var(--cream-paper) !important;
}

.year-btn.selected .year-age,
.year-btn.selected .age-badge {
  background: var(--ink-black) !important;
  color: var(--white-paper) !important;
}

/* ===========================
   하단 액션 버튼
   =========================== */
.saju-actions {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 80px !important;
  z-index: 100 !important;
  display: flex !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  background: var(--newsprint) !important;
  border-top: 1px solid var(--rule-color) !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.btn-back,
.btn-submit {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 20px !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border: 1px solid var(--rule-color) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-back {
  background: var(--old-paper) !important;
  color: var(--cream-paper) !important;
}

.btn-back:hover:not(:disabled) {
  background: var(--proof-sheet) !important;
}

.btn-back:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.btn-back svg,
.btn-submit svg {
  width: 18px !important;
  height: 18px !important;
}

.btn-submit {
  background: var(--red-ink) !important;
  color: var(--white-paper) !important;
  border-color: var(--red-ink) !important;
}

.btn-submit:hover:not(:disabled) {
  background: #8a3535 !important;
}

.btn-submit:disabled {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-light) !important;
  color: var(--worn-type) !important;
  cursor: not-allowed !important;
}

/* ===========================
   애니메이션
   =========================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===========================
   결과 페이지 스타일
   =========================== */
.saju-result-wrapper,
.saju-result-single,
.saju-result-carousel,
.result-page {
  background: var(--ink-black) !important;
  min-height: 100vh !important;
  padding-bottom: 20px !important;
  font-family: var(--font-body) !important;
}

.saju-result-wrapper::before,
.saju-result-single::before,
.saju-result-carousel::before,
.result-page::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 결과 페이지 리셋 */
.saju-result-wrapper *,
.saju-result-wrapper *::before,
.saju-result-wrapper *::after {
  border-radius: 0 !important;
}

/* 결과 헤더 */
.result-header,
.carousel-header {
  background: var(--newsprint) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--rule-color) !important;
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 24px !important;
}

.result-header::before,
.carousel-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-color) 20%,
    var(--rule-color) 80%,
    transparent 100%
  ) !important;
}

.result-title {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--white-paper) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.2em !important;
}

.result-title::before {
  content: '【 ' !important;
  color: var(--worn-type) !important;
}

.result-title::after {
  content: ' 】' !important;
  color: var(--worn-type) !important;
}

.result-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--worn-type) !important;
  letter-spacing: 0.05em !important;
}

.birth-info {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--cream-paper) !important;
  margin-top: 12px !important;
}

/* 개발환경 전용: 텍스트 내보내기 도구바 */
.dev-export-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px dashed var(--rule-light);
}

.dev-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--cream-paper);
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dev-export-btn:hover {
  background: var(--rule-light);
  border-color: var(--worn-type);
  color: var(--white-paper);
}

.dev-export-btn:active {
  transform: scale(0.97);
}

.dev-export-btn svg {
  flex-shrink: 0;
}

.dev-export-status {
  display: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--worn-type);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* 사주 기둥 섹션 */
.pillars-section {
  padding: 24px 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

.pillars-grid,
.pillars-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  max-width: 500px !important;
  margin: 0 auto !important;
}

/* 개별 기둥 카드 */
.pillar,
.pillar-card {
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  padding: 16px 8px !important;
  text-align: center !important;
  position: relative !important;
  box-shadow: 0 4px 16px var(--shadow-soft) !important;
}

.pillar.pillar-day,
.pillar-card.day-pillar {
  background: var(--old-paper) !important;
  border-color: var(--red-ink) !important;
  box-shadow:
    0 0 0 1px var(--red-ink-light),
    0 6px 24px var(--red-ink-glow) !important;
}

.pillar-label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.1em !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--rule-light) !important;
  display: block !important;
}

.pillar.pillar-day .pillar-label,
.pillar-card.day-pillar .pillar-label {
  color: var(--red-ink) !important;
  border-color: var(--red-ink-light) !important;
}

.pillar-label::before {
  content: '▪ ' !important;
}

.pillar-chars,
.stem-branch {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.pillar-stem,
.pillar-branch,
.stem,
.branch {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  padding: 8px !important;
  display: block !important;
}

.pillar.pillar-day .pillar-stem,
.pillar.pillar-day .pillar-branch,
.pillar-card.day-pillar .stem,
.pillar-card.day-pillar .branch {
  text-shadow: 0 2px 4px var(--shadow-soft) !important;
}

.stem-korean, .branch-korean {
  display: block !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
}

/* 구분선 */
.section-divider {
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-color) 15%,
    var(--rule-color) 85%,
    transparent 100%
  ) !important;
  margin: 24px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.section-divider.double {
  height: 3px !important;
  background:
    linear-gradient(
      to bottom,
      var(--rule-color) 0px,
      var(--rule-color) 1px,
      transparent 1px,
      transparent 2px,
      var(--rule-color) 2px,
      var(--rule-color) 3px
    ) !important;
}

/* 결과 섹션 */
.result-section {
  padding: 20px 16px !important;
  margin: 0 16px 16px 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  position: relative !important;
  z-index: 1 !important;
}

.section-title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--rule-color) !important;
  letter-spacing: 0.1em !important;
}

.section-title::before {
  content: '― ' !important;
  color: var(--red-ink) !important;
}

/* 십신 그리드 */
.ten-gods-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

.ten-god-item {
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  padding: 12px 8px !important;
  text-align: center !important;
}

.ten-god-item.ten-god-day {
  background: var(--newsprint) !important;
  border-color: var(--red-ink-light) !important;
}

.ten-god-label {
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  margin-bottom: 6px !important;
  font-family: var(--font-body) !important;
  display: block !important;
}

.ten-god-stem,
.ten-god-branch,
.ten-god-value {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
  display: block !important;
  margin-top: 4px !important;
}

.ten-god-stem {
  color: var(--white-paper) !important;
}

/* 12운성 그리드 */
.unseong-grid,
.twelve-unseong-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

.unseong-item {
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  padding: 12px 8px !important;
  text-align: center !important;
}

.unseong-label {
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  margin-bottom: 6px !important;
  font-family: var(--font-body) !important;
  display: block !important;
}

.unseong-value {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
  display: block !important;
}

/* 용신 표시 */
.yongshin-display {
  background: var(--old-paper) !important;
  border: 1px solid var(--red-ink-light) !important;
  padding: 20px !important;
  text-align: center !important;
}

.yongshin-value {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
}

/* 용신 오행 색상 적용 (기본값은 크림색) */
.yongshin-value:not([class*="ohang-"]) {
  color: var(--cream-paper) !important;
}

/* 용신에 오행 클래스가 있으면 해당 색상 사용 */
.yongshin-value.ohang-wood { color: var(--ohang-wood) !important; }
.yongshin-value.ohang-fire { color: var(--ohang-fire) !important; }
.yongshin-value.ohang-earth { color: var(--ohang-earth) !important; }
.yongshin-value.ohang-metal { color: var(--ohang-metal) !important; }
.yongshin-value.ohang-water { color: var(--ohang-water) !important; }

/* 대운 그리드 */
.daewoon-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

.daewoon-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.daewoon-age {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
  min-width: 50px !important;
}

.daewoon-pillar {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
}

/* 세운/월운 그리드 */
.fortune-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}

.fortune-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 16px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  text-align: center !important;
}

.fortune-label {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--cream-paper) !important;
}

.fortune-value {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
}

/* 빈 상태 */
.empty-state {
  color: var(--worn-type) !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  padding: 20px !important;
  font-style: italic !important;
}

/* 캐러셀 네비게이션 */
.carousel-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  z-index: 1;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  background: var(--old-paper);
  border: 1px solid var(--rule-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-dot.active {
  background: var(--red-ink);
  border-color: var(--red-ink);
  width: 24px;
}

/* ===========================
   성별 선택
   =========================== */
.gender-select {
  padding: 16px !important;
  margin: 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  position: relative !important;
  z-index: 1 !important;
}

.gender-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.gender-options {
  display: flex !important;
  gap: 12px !important;
}

.gender-option {
  flex: 1 !important;
  display: flex !important;
  cursor: pointer !important;
}

.gender-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.gender-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--cream-paper) !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  transition: all 0.15s ease !important;
}

.gender-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.gender-option input[type="radio"]:checked + .gender-btn {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

/* ===========================
   결과 액션 버튼
   =========================== */
.result-actions {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 80px !important;
  z-index: 100 !important;
  display: flex !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  background: var(--newsprint) !important;
  border-top: 1px solid var(--rule-color) !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.action-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 20px !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 1px solid var(--rule-color) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.action-btn svg {
  width: 18px !important;
  height: 18px !important;
}

.action-btn-secondary {
  background: var(--old-paper) !important;
  color: var(--cream-paper) !important;
}

.action-btn-secondary:hover {
  background: var(--proof-sheet) !important;
}

.action-btn-primary {
  background: var(--red-ink) !important;
  color: var(--white-paper) !important;
  border-color: var(--red-ink) !important;
}

.action-btn-primary:hover {
  background: #8a3535 !important;
}

/* ===========================
   캐러셀 추가 스타일
   =========================== */
.carousel-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px !important;
  background: var(--old-paper) !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.carousel-prev,
.carousel-next {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  color: var(--cream-paper) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.carousel-prev:hover,
.carousel-next:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.carousel-prev svg,
.carousel-next svg {
  width: 20px !important;
  height: 20px !important;
}

.carousel-info {
  text-align: center !important;
}

.carousel-counter {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
}

.carousel-time-name {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--worn-type) !important;
  margin-top: 4px !important;
}

.carousel-indicators {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px !important;
  background: var(--newsprint) !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.carousel-indicator {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  color: var(--worn-type) !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.carousel-indicator:hover {
  background: var(--proof-sheet) !important;
}

.carousel-indicator.active {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

.carousel-slides {
  position: relative !important;
}

.carousel-slide {
  display: none !important;
}

.carousel-slide.active {
  display: block !important;
}

.slide-time-header {
  padding: 12px 16px !important;
  background: var(--old-paper) !important;
  text-align: center !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.slide-time-korean {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin-right: 8px !important;
}

.slide-time-range {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

.time-unknown-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  padding: 6px 12px !important;
  background: var(--old-paper) !important;
  border: 1px dashed var(--rule-color) !important;
  color: var(--worn-type) !important;
  font-size: 0.8rem !important;
}

/* ===========================
   하단 네비게이션
   =========================== */
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--newsprint) !important;
  border-top: 1px solid var(--rule-color) !important;
  z-index: 50 !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.nav-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  height: 72px !important;
}

.nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  color: var(--worn-type) !important;
  transition: all 0.15s ease !important;
  position: relative !important;
  border-left: 1px solid var(--rule-light) !important;
  border-radius: 0 !important;
}

.nav-item:first-child {
  border-left: none !important;
}

.nav-item:hover {
  background: var(--old-paper) !important;
  color: var(--cream-paper) !important;
}

.nav-item.active {
  background: var(--old-paper) !important;
  color: var(--white-paper) !important;
}

.nav-item.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 2px !important;
  background: var(--red-ink) !important;
}

.nav-icon {
  width: 24px !important;
  height: 24px !important;
}

.nav-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.nav-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.02em !important;
}

/* ===========================
   모바일 반응형
   =========================== */
@media (max-width: 768px) {
  .saju-input-container {
    padding: 16px;
    padding-bottom: 160px;
  }

  .saju-header {
    padding: 20px 0;
  }

  .saju-title {
    font-size: 2rem;
  }

  .saju-progress {
    margin-bottom: 24px;
    padding: 12px 0;
  }

  .progress-step {
    padding: 6px 12px;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .progress-connector {
    width: 24px;
  }

  .step-title {
    font-size: 1.15rem;
    margin-bottom: 20px;
  }

  .month-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .option-btn,
  .month-btn {
    padding: 14px 10px;
  }

  .option-value {
    font-size: 1.2rem;
  }

  .day-grid {
    gap: 4px;
    padding: 10px;
  }

  .day-btn {
    padding: 8px 2px;
    font-size: 0.85rem;
  }

  .time-grid {
    gap: 8px;
  }

  .time-btn {
    padding: 12px;
    gap: 10px;
  }

  .time-zodiac-icon {
    width: 32px;
    height: 32px;
  }

  .time-korean {
    font-size: 0.95rem;
  }

  .time-range {
    font-size: 0.7rem;
  }

  .year-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 10px;
  }

  .year-btn {
    padding: 10px 6px;
  }

  .zodiac-icon {
    width: 40px;
    height: 40px;
  }

  .year-label {
    font-size: 0.85rem;
  }

  .saju-actions {
    bottom: 72px;
    padding: 12px 16px;
    gap: 8px;
  }

  .btn-back,
  .btn-submit {
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  /* 결과 페이지 */
  .result-title {
    font-size: 1.6rem;
  }

  .pillars-container {
    gap: 6px;
  }

  .pillar-card {
    padding: 12px 6px;
  }

  .stem, .branch {
    font-size: 1.5rem;
  }

  .ten-gods-grid,
  .twelve-unseong-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .saju-title {
    font-size: 1.8rem;
  }

  .month-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .day-grid {
    gap: 3px;
    padding: 8px;
  }

  .day-btn {
    padding: 6px 2px;
    font-size: 0.8rem;
  }

  .time-grid {
    grid-template-columns: 1fr;
  }

  .time-unknown-btn {
    grid-column: auto;
  }

  .year-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .zodiac-icon {
    width: 36px;
    height: 36px;
  }

  .nav-grid {
    height: 64px;
  }

  .nav-label {
    font-size: 0.65rem;
  }

  .saju-actions {
    bottom: 64px;
  }

  /* 결과 페이지 */
  .result-header {
    padding: 24px 16px;
  }

  .result-title {
    font-size: 1.4rem;
  }

  .stem, .branch {
    font-size: 1.3rem;
  }

  .pillar-label {
    font-size: 0.7rem;
  }
}

/* ===========================
   로그인/인증 페이지
   =========================== */
.auth-page-wrapper {
  background: var(--ink-black) !important;
  min-height: 100vh !important;
  font-family: var(--font-body) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 노이즈 텍스처 */
.auth-page-wrapper::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.auth-page-wrapper * {
  border-radius: 0 !important;
}

.auth-container {
  flex: 1 !important;
  max-width: 400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.auth-header {
  text-align: center !important;
  padding: 32px 0 !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--rule-color) !important;
}

.auth-title {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: var(--white-paper) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.15em !important;
}

.auth-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
  letter-spacing: 0.1em !important;
}

.auth-card {
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  padding: 32px 24px !important;
  box-shadow: 0 4px 16px var(--shadow-soft) !important;
}

.auth-description {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--cream-paper) !important;
  margin-bottom: 24px !important;
  line-height: 1.6 !important;
}

.auth-phone-highlight {
  font-weight: 700 !important;
  color: var(--white-paper) !important;
}

.auth-form-group {
  margin-bottom: 24px !important;
}

.auth-label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--worn-type) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.05em !important;
}

.auth-input {
  width: 100% !important;
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  color: var(--white-paper) !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  transition: border-color 0.15s ease !important;
  box-sizing: border-box !important;
}

.auth-input::placeholder {
  color: var(--worn-type) !important;
}

.auth-input:focus {
  outline: none !important;
  border-color: var(--red-ink) !important;
}

/* 인증번호 입력 전용 */
.auth-input-code {
  text-align: center !important;
  letter-spacing: 0.3em !important;
  font-family: var(--font-mono) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

.auth-btn-primary {
  width: 100% !important;
  padding: 16px 24px !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  background: var(--red-ink) !important;
  border: 1px solid var(--red-ink) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  letter-spacing: 0.1em !important;
}

.auth-btn-primary:hover {
  background: #8a3535 !important;
}

.auth-link {
  display: block !important;
  width: 100% !important;
  margin-top: 16px !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--worn-type) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.auth-link:hover {
  color: var(--cream-paper) !important;
}

.auth-alert {
  margin-top: 20px !important;
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  border: 1px solid !important;
}

.auth-alert-error {
  background: var(--red-ink-light) !important;
  color: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
}

.auth-alert-success {
  background: rgba(127, 176, 141, 0.15) !important;
  color: var(--ohang-wood) !important;
  border-color: var(--ohang-wood) !important;
}

.auth-footer {
  margin-top: 24px !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--worn-type) !important;
}

.auth-footer-link {
  color: var(--red-ink) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-left: 4px !important;
}

.auth-footer-link:hover {
  text-decoration: underline !important;
}

/* 인증 페이지 반응형 */
@media (max-width: 480px) {
  .auth-container {
    padding: 16px !important;
  }

  .auth-title {
    font-size: 1.8rem !important;
  }

  .auth-card {
    padding: 24px 16px !important;
  }

  .auth-btn-primary {
    padding: 14px 20px !important;
    font-size: 1rem !important;
  }
}

/* ===========================
   일주론 분석 스타일 v3
   컨셉: 활판인쇄의 운명록 (다크 테마 통합)
   =========================== */

/* 메인 컨테이너 - 다크 테마 통합 (result-section 상속) */
.ilju-analysis-section {
  /* result-section 클래스와 함께 사용 */
}

/* 상단/하단 장식 제거 - result-section 스타일 사용 */
.ilju-analysis-section::before,
.ilju-analysis-section::after {
  display: none;
}

/* 일주 도장 표시 영역 */
.ilju-pillar-display {
  text-align: center;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--rule-light);
}

/* 일주 인장 스타일 - 붉은 도장 느낌 */
.ilju-pillar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 12px 20px;
  color: var(--red-ink);
  border: 2px solid var(--red-ink);
  border-radius: 0;
  position: relative;
  background: transparent;
  transition: all 0.3s ease;
}

.ilju-pillar::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--red-ink);
  border-radius: 0;
  opacity: 0.4;
}

/* 전역 노트/주의 */
.ilju-global-notes,
.ilju-global-cautions {
  padding: 0 16px;
  margin-bottom: 8px;
}

.ilju-global-note,
.ilju-global-caution {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  border-left: 2px solid;
  background: var(--old-paper);
}

.ilju-global-note {
  border-color: var(--ohang-wood);
  color: var(--cream-paper);
}

.ilju-global-note .note-icon {
  color: var(--ohang-wood);
  flex-shrink: 0;
}

.ilju-global-caution {
  border-color: var(--red-ink);
  color: var(--cream-paper);
}

.ilju-global-caution .caution-icon {
  color: var(--red-ink);
  flex-shrink: 0;
}

/* 카드 영역 */
.ilju-cards {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

/* 기본 카드 스타일 */
.ilju-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-light);
  transition: all 0.2s ease;
}

.ilju-card:last-child {
  border-bottom: none;
}

.ilju-card.emphasized {
  background: var(--old-paper);
  margin: 0 -16px;
  padding: 16px;
  border-left: 2px solid var(--red-ink);
  border-bottom: 1px solid var(--rule-light);
}

.ilju-card .card-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.05em;
}

.ilju-card .card-title::before {
  content: '― ';
  color: var(--red-ink);
}

.ilju-card .card-title svg {
  opacity: 0.6;
  color: var(--worn-type);
}

.ilju-card .card-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--cream-paper);
  margin: 0;
}

/* 헤드라인 카드 - 활자 인쇄 강조 */
.ilju-card-headline {
  padding: 20px 0 24px;
  text-align: center;
  border-bottom: 1px solid var(--rule-color);
}

.ilju-card-headline .headline-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.ilju-card-headline .headline-subtitle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--worn-type);
  margin-top: 8px;
}

.ilju-card-headline .headline-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--cream-paper);
  line-height: 1.8;
  margin-top: 12px;
}

/* 불릿 카드 */
.ilju-card-bullets .bullets-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ilju-card-bullets .bullets-list .bullet-item {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--cream-paper);
}

.ilju-card-bullets .bullets-list .bullet-item::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--red-ink);
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.3;
}

.ilju-card-bullets .bullets-list .bullet-item:last-child {
  margin-bottom: 0;
}

/* ===========================
   음양(陰陽) 이중 패널 - 성격 경향
   =========================== */
.traits-dual-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.traits-panel {
  position: relative;
  padding: 16px;
  border: 1px solid var(--rule-light);
}

.traits-panel-yang {
  background: linear-gradient(180deg,
    rgba(127, 176, 141, 0.08) 0%,
    rgba(127, 176, 141, 0.02) 100%
  );
  border-bottom: none;
}

.traits-panel-yin {
  background: linear-gradient(180deg,
    rgba(196, 80, 80, 0.06) 0%,
    rgba(196, 80, 80, 0.02) 100%
  );
}

.traits-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-light);
}

.traits-gua {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  letter-spacing: 0;
}

.traits-panel-yang .traits-gua {
  color: var(--ohang-wood);
  border-color: var(--ohang-wood);
  background: rgba(127, 176, 141, 0.1);
}

.traits-panel-yin .traits-gua {
  color: var(--red-ink);
  border-color: var(--red-ink);
  background: rgba(196, 80, 80, 0.1);
}

.traits-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--worn-type);
}

.traits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.traits-item {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--cream-paper);
}

.traits-item:last-child {
  margin-bottom: 0;
}

.traits-item::before {
  position: absolute;
  left: 0;
  font-weight: 700;
  font-size: 0.9em;
}

.traits-item-yang::before {
  content: '◦';
  color: var(--ohang-wood);
}

.traits-item-yin::before {
  content: '·';
  color: var(--red-ink);
}

/* 푸터 팁 - 조언/격려 메시지 */
.ilju-card-bullets .footer-tip {
  margin-top: 20px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(212, 181, 106, 0.12) 0%, rgba(212, 181, 106, 0.06) 100%);
  border-left: 3px solid var(--ohang-earth);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--ohang-earth);
  letter-spacing: 0.02em;
  position: relative;
}

.ilju-card-bullets .footer-tip::before {
  content: '✦';
  position: absolute;
  left: -1px;
  top: -8px;
  font-size: 0.75rem;
  color: var(--ohang-earth);
  background: var(--newsprint);
  padding: 2px 4px;
  border-radius: 2px;
}

/* =====================================================
   관계/가정 포인트 카드 - 가계도 스타일
   ===================================================== */

/* 헤더 영역 */
.ilju-card-relations .relations-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-light);
}

.ilju-card-relations .relations-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--red-ink);
  border: 2px solid var(--red-ink);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
}

.ilju-card-relations .relations-header .card-title {
  margin: 0;
  border: none;
  padding: 0;
  flex: 1;
  text-align: right;
}

/* 가계도 트리 구조 */
.ilju-card-relations .relations-tree {
  position: relative;
  padding-left: 8px;
}

/* 세로 연결선 */
.ilju-card-relations .relations-tree::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--rule-light) 0%,
    var(--rule-color) 20%,
    var(--rule-color) 80%,
    var(--rule-light) 100%
  );
}

/* 관계 노드 */
.ilju-card-relations .relation-node {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  position: relative;
}

.ilju-card-relations .relation-node:first-child {
  padding-top: 0;
}

.ilju-card-relations .relation-node-last {
  padding-bottom: 0;
}

/* 한자 인장 */
.ilju-card-relations .relation-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 44px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.ilju-card-relations .relation-seal .seal-hanja {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--red-ink);
  background: var(--newsprint);
  border: 1.5px solid var(--red-ink);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(196, 80, 80, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

.ilju-card-relations .relation-seal .seal-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--worn-type);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* 관계 콘텐츠 */
.ilju-card-relations .relation-content {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}

.ilju-card-relations .relation-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0 0 8px 0;
  letter-spacing: 0.03em;
}

.ilju-card-relations .relation-text {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--cream-paper);
  line-height: 1.7;
  margin: 0;
  text-align: justify;
  word-break: keep-all;
}

.ilju-card-relations .relation-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.ilju-card-relations .relation-bullets li {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--cream-paper);
  padding: 3px 0 3px 14px;
  position: relative;
  line-height: 1.5;
}

.ilju-card-relations .relation-bullets li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--worn-type);
  font-weight: bold;
}

/* =====================================================
   일/돈 카드 - 음양 대비 패널
   ===================================================== */

/* 헤더 */
.ilju-card-work-wealth .work-wealth-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-light);
}

.ilju-card-work-wealth .header-seals {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ilju-card-work-wealth .mini-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 3px;
}

.ilju-card-work-wealth .seal-work {
  color: var(--ohang-wood);
  border: 1.5px solid var(--ohang-wood);
  background: rgba(76, 140, 98, 0.08);
}

.ilju-card-work-wealth .seal-wealth {
  color: var(--ohang-metal);
  border: 1.5px solid var(--ohang-metal);
  background: rgba(201, 180, 128, 0.08);
}

.ilju-card-work-wealth .header-divider {
  font-size: 1.2rem;
  color: var(--rule-color);
}

.ilju-card-work-wealth .work-wealth-header .card-title {
  margin: 0;
  border: none;
  padding: 0;
  flex: 1;
  text-align: right;
}

/* 2단 컨테이너 */
.ilju-card-work-wealth .work-wealth-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

@media (max-width: 520px) {
  .ilju-card-work-wealth .work-wealth-container {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* 컬럼 공통 */
.ilju-card-work-wealth .ww-column {
  padding: 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
}

.ilju-card-work-wealth .ww-column-work {
  border-left: 3px solid var(--ohang-wood);
}

.ilju-card-work-wealth .ww-column-wealth {
  border-right: 3px solid var(--ohang-metal);
}

@media (max-width: 520px) {
  .ilju-card-work-wealth .ww-column-work {
    border-radius: 4px 4px 0 0;
    border-left: none;
    border-top: 3px solid var(--ohang-wood);
  }

  .ilju-card-work-wealth .ww-column-wealth {
    border-radius: 0 0 4px 4px;
    border-right: none;
    border-bottom: 3px solid var(--ohang-metal);
  }
}

/* 컬럼 헤더 */
.ilju-card-work-wealth .ww-column-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--rule-light);
}

.ilju-card-work-wealth .ww-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ilju-card-work-wealth .ww-column-work .ww-seal {
  color: var(--ohang-wood);
  border: 1.5px solid var(--ohang-wood);
  background: rgba(76, 140, 98, 0.15);
}

.ilju-card-work-wealth .ww-column-wealth .ww-seal {
  color: var(--ohang-metal);
  border: 1.5px solid var(--ohang-metal);
  background: rgba(201, 180, 128, 0.15);
}

.ilju-card-work-wealth .ww-seal-hanja {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
}

.ilju-card-work-wealth .ww-column-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0;
  letter-spacing: 0.03em;
}

/* 중앙 구분선 */
.ilju-card-work-wealth .ww-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;
  gap: 8px;
}

.ilju-card-work-wealth .ww-divider-line {
  width: 1px;
  flex: 1;
  min-height: 20px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rule-color) 30%,
    var(--rule-color) 70%,
    transparent
  );
}

.ilju-card-work-wealth .ww-divider-symbol {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--worn-type);
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

@media (max-width: 520px) {
  .ilju-card-work-wealth .ww-divider {
    flex-direction: row;
    padding: 12px 16px;
  }

  .ilju-card-work-wealth .ww-divider-line {
    width: auto;
    height: 1px;
    min-height: auto;
    min-width: 20px;
    background: linear-gradient(
      to right,
      transparent,
      var(--rule-color) 30%,
      var(--rule-color) 70%,
      transparent
    );
  }

  .ilju-card-work-wealth .ww-divider-symbol {
    writing-mode: horizontal-tb;
  }
}

/* 리스트 */
.ilju-card-work-wealth .ww-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ilju-card-work-wealth .ww-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--cream-paper);
  padding: 6px 0;
  line-height: 1.55;
}

.ilju-card-work-wealth .ww-item:first-child {
  padding-top: 0;
}

.ilju-card-work-wealth .ww-item:last-child {
  padding-bottom: 0;
}

.ilju-card-work-wealth .ww-bullet {
  flex-shrink: 0;
  font-size: 0.65rem;
  line-height: 1.9;
}

.ilju-card-work-wealth .ww-column-work .ww-bullet {
  color: var(--ohang-wood);
}

.ilju-card-work-wealth .ww-column-wealth .ww-bullet {
  color: var(--ohang-metal);
}

.ilju-card-work-wealth .ww-text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--cream-paper);
  line-height: 1.6;
  margin: 0;
}

/* 기존 two-column 레거시 지원 */
.ilju-card-two-column:not(.ilju-card-work-wealth) .two-column-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 480px) {
  .ilju-card-two-column:not(.ilju-card-work-wealth) .two-column-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.ilju-card-two-column:not(.ilju-card-work-wealth) .column {
  padding: 0;
}

.ilju-card-two-column:not(.ilju-card-work-wealth) .column-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-light);
  letter-spacing: 0.05em;
}

.ilju-card-two-column:not(.ilju-card-work-wealth) .column-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ilju-card-two-column:not(.ilju-card-work-wealth) .column-list li {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream-paper);
  padding: 4px 0;
  line-height: 1.5;
}

.ilju-card-two-column:not(.ilju-card-work-wealth) .column-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream-paper);
  line-height: 1.6;
}

/* 건강/습관 카드 */
.ilju-card-habits .health-icon {
  color: var(--red-ink);
}

.ilju-card-habits .habits-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--cream-paper);
  line-height: 1.7;
  margin-bottom: 16px;
}

.ilju-card-habits .recommendations,
.ilju-card-habits .health-cautions {
  margin-top: 14px;
}

.ilju-card-habits .recommendations-title,
.ilju-card-habits .cautions-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--worn-type);
  margin: 0 0 8px 0;
  letter-spacing: 0.1em;
}

.ilju-card-habits .recommendations-list,
.ilju-card-habits .cautions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ilju-card-habits .recommendations-list li,
.ilju-card-habits .cautions-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream-paper);
  line-height: 1.5;
}

.ilju-card-habits .check-icon {
  color: var(--ohang-wood);
  flex-shrink: 0;
  margin-top: 3px;
}

.ilju-card-habits .alert-icon {
  color: var(--red-ink);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ===========================
   생활 루틴 - 宜/忌 스타일
   =========================== */
.routine-section {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule-light);
  position: relative;
}

.routine-section:first-of-type {
  margin-top: 0;
}

.routine-section-do {
  background: linear-gradient(135deg,
    rgba(127, 176, 141, 0.06) 0%,
    transparent 60%
  );
  border-left: 2px solid var(--ohang-wood);
}

.routine-section-avoid {
  background: linear-gradient(135deg,
    rgba(196, 80, 80, 0.05) 0%,
    transparent 60%
  );
  border-left: 2px solid var(--red-ink);
}

.routine-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-light);
}

.routine-seal {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
  letter-spacing: 0;
}

.routine-section-do .routine-seal {
  color: var(--ohang-wood);
  border-color: var(--ohang-wood);
}

.routine-section-avoid .routine-seal {
  color: var(--red-ink);
  border-color: var(--red-ink);
}

.routine-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--worn-type);
}

.routine-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.routine-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--cream-paper);
}

.routine-item:last-child {
  padding-bottom: 0;
}

.routine-marker {
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  margin-top: 2px;
}

.routine-item-do .routine-marker {
  color: var(--ohang-wood);
}

.routine-item-avoid .routine-marker {
  color: var(--red-ink);
}

.routine-text {
  flex: 1;
}

/* 근거 카드 */
.ilju-card-evidence .evidence-icon {
  color: var(--ohang-water);
}

.ilju-card-evidence .evidence-summary {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--cream-paper);
  line-height: 1.6;
  margin-bottom: 14px;
}

.ilju-card-evidence .evidences-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ilju-card-evidence .evidence-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule-light);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.ilju-card-evidence .evidence-item:last-child {
  border-bottom: none;
}

.ilju-card-evidence .evidence-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white-paper);
  min-width: 70px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.ilju-card-evidence .evidence-value {
  color: var(--cream-paper);
}

.ilju-card-evidence .evidence-note {
  font-size: 0.75rem;
  color: var(--worn-type);
  margin-left: auto;
}

.ilju-card-evidence .diagram-refs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-light);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ilju-card-evidence .refs-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--worn-type);
}

.ilju-card-evidence .diagram-ref-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--red-ink);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--red-ink-light);
  border-radius: 0;
  transition: all 0.2s ease;
}

.ilju-card-evidence .diagram-ref-link:hover {
  background: var(--red-ink);
  color: var(--white-paper);
  border-color: var(--red-ink);
}

/* 추가 노트/주의 */
.card-additional-notes,
.card-additional-cautions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule-light);
}

.card-additional-notes .additional-note,
.card-additional-cautions .additional-caution {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 4px;
  padding: 8px 12px;
  border-radius: 0;
}

.card-additional-notes .additional-note {
  color: var(--ohang-wood);
  background: rgba(127, 176, 141, 0.1);
  border-left: 2px solid var(--ohang-wood);
}

.card-additional-cautions .additional-caution {
  color: var(--red-ink);
  background: var(--red-ink-light);
  border-left: 2px solid var(--red-ink);
}

.note-icon-sm,
.caution-icon-sm {
  flex-shrink: 0;
  margin-top: 1px;
}

/* 다이어그램 영역 */
.ilju-diagrams {
  padding: 0 16px 16px;
  margin-top: 8px;
}

.ilju-diagrams::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rule-color);
  margin: 0 auto 20px;
}

.ilju-diagram {
  background: var(--old-paper);
  border: 1px solid var(--rule-light);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 12px;
}

.ilju-diagram:last-child {
  margin-bottom: 0;
}

.ilju-diagram .diagram-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1em;
}

.ilju-diagram .diagram-icon {
  color: var(--worn-type);
  opacity: 0.8;
}

.ilju-diagram .diagram-note {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--worn-type);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule-light);
  line-height: 1.5;
}

.ilju-diagram .diagram-empty {
  font-family: var(--font-body);
  color: var(--worn-type);
  text-align: center;
  padding: 24px;
}

/* 기본 일주 다이어그램 - 인장 스타일 */
.ilju-diagram-basic .basic-ilju-grid {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 20px;
}

.ilju-diagram-basic .pillar-cell {
  text-align: center;
  padding: 16px 24px;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 0;
  position: relative;
  min-width: 80px;
}

.ilju-diagram-basic .pillar-cell::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 0;
  opacity: 0.3;
}

.ilju-diagram-basic .cell-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: inherit;
  margin-bottom: 6px;
  opacity: 0.7;
  letter-spacing: 0.1em;
}

.ilju-diagram-basic .cell-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
}

.ilju-diagram-basic .cell-hanja {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: inherit;
  margin-top: 4px;
  opacity: 0.6;
}

.ilju-diagram-basic .basic-info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 280px;
  margin: 0 auto;
}

.ilju-diagram-basic .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule-light);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.ilju-diagram-basic .info-item:last-child {
  border-bottom: none;
}

.ilju-diagram-basic .info-label {
  color: var(--worn-type);
}

.ilju-diagram-basic .info-value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream-paper);
  letter-spacing: 0.05em;
}

.ilju-diagram-basic .info-flag {
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
}

.ilju-diagram-basic .flag-badge {
  font-family: var(--font-body);
  padding: 4px 12px;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ilju-diagram-basic .flag-badge.dohua {
  background: rgba(212, 96, 90, 0.15);
  color: var(--ohang-fire);
  border: 1px solid rgba(212, 96, 90, 0.4);
}

.ilju-diagram-basic .flag-badge.nache {
  background: rgba(212, 181, 106, 0.15);
  color: var(--ohang-earth);
  border: 1px solid rgba(212, 181, 106, 0.4);
}

/* 좌법 다이어그램 */
.ilju-diagram-jwabeop .jwabeop-container {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.ilju-diagram-jwabeop .jwabeop-ilgan,
.ilju-diagram-jwabeop .jwabeop-ilji {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  border: 2px solid currentColor;
  border-radius: 0;
  position: relative;
  min-width: 60px;
}

.ilju-diagram-jwabeop .jwabeop-ilgan::before,
.ilju-diagram-jwabeop .jwabeop-ilji::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 0;
  opacity: 0.3;
}

.ilju-diagram-jwabeop .jwabeop-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: inherit;
  margin-bottom: 4px;
  opacity: 0.6;
  letter-spacing: 0.1em;
}

.ilju-diagram-jwabeop .jwabeop-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}

.ilju-diagram-jwabeop .jwabeop-components {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
  background: var(--proof-sheet);
  border-radius: 0;
  border: 1px solid var(--rule-light);
}

.ilju-diagram-jwabeop .components-title {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--worn-type);
  margin-bottom: 8px;
  letter-spacing: 0.1em;
}

.ilju-diagram-jwabeop .components-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.ilju-diagram-jwabeop .component-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background: var(--newsprint);
  border: 1px solid var(--rule-light);
  border-radius: 0;
  min-width: 42px;
  min-height: 42px;
}

.ilju-diagram-jwabeop .component-stem {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.ilju-diagram-jwabeop .component-ten-god {
  font-family: var(--font-body);
  font-size: 0.55rem;
  color: var(--cream-paper);
  margin-top: 2px;
}

.ilju-diagram-jwabeop .component-ratio {
  font-family: var(--font-body);
  font-size: 0.5rem;
  color: var(--worn-type);
}

/* ========================================
   인종법 - 활자 케이스(Type Case) 스타일
   ======================================== */

.ilju-diagram-injong .injong-typecase {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 헤더: 메인 활자 (일지 12운성) */
.ilju-diagram-injong .typecase-header {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--rule-color);
}

.ilju-diagram-injong .main-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ilju-diagram-injong .main-type-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: var(--worn-type);
  letter-spacing: 0.1em;
}

.ilju-diagram-injong .main-type-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream-paper);
  padding: 2px 10px;
  background: var(--newsprint);
  border: 1px solid var(--rule-light);
}

/* 십성 칸들: 활자 보관함 그리드 */
.ilju-diagram-injong .typecase-compartments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}

/* 개별 활자 칸 */
.ilju-diagram-injong .type-compartment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: var(--newsprint);
  text-align: center;
  min-height: 70px;
}

/* 십성 이름 */
.ilju-diagram-injong .comp-category {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  opacity: 0.8;
}

/* 12운성 값 - 메인 활자 */
.ilju-diagram-injong .comp-woonseong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cream-paper);
  line-height: 1;
  margin-bottom: 4px;
}

/* 해석 */
.ilju-diagram-injong .comp-desc {
  font-family: var(--font-body);
  font-size: 0.55rem;
  color: var(--worn-type);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* 십성별 색상 */
.ilju-diagram-injong .sipseong-bigeop {
  border-left: 3px solid var(--ohang-wood);
}
.ilju-diagram-injong .sipseong-bigeop .comp-category {
  color: var(--ohang-wood);
}

.ilju-diagram-injong .sipseong-siksang {
  border-left: 3px solid var(--ohang-fire);
}
.ilju-diagram-injong .sipseong-siksang .comp-category {
  color: var(--ohang-fire);
}

.ilju-diagram-injong .sipseong-jaeseong {
  border-left: 3px solid var(--ohang-earth);
}
.ilju-diagram-injong .sipseong-jaeseong .comp-category {
  color: var(--ohang-earth);
}

.ilju-diagram-injong .sipseong-gwanseong {
  border-left: 3px solid var(--worn-type);
}
.ilju-diagram-injong .sipseong-gwanseong .comp-category {
  color: var(--worn-type);
}

.ilju-diagram-injong .sipseong-inseong {
  border-left: 3px solid var(--ohang-water);
}
.ilju-diagram-injong .sipseong-inseong .comp-category {
  color: var(--ohang-water);
}

/* 개운법 영역 - 처방전 스타일 */
.ilju-remedies {
  margin: 0 16px 16px;
  padding: 16px;
  background: var(--old-paper);
  border: 1px solid var(--rule-light);
  border-radius: 0;
  position: relative;
}

.ilju-remedies::before {
  content: '◇';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--newsprint);
  padding: 0 8px;
  color: var(--worn-type);
  font-size: 0.8rem;
}

.ilju-remedies .remedies-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0 0 16px 0;
  text-align: center;
  letter-spacing: 0.15em;
}

.ilju-remedies .remedies-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ilju-remedies .remedy-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule-light);
}

.ilju-remedies .remedy-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ilju-remedies .remedy-type {
  font-family: var(--font-display);
  font-weight: 700;
  min-width: 60px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 0;
  text-align: center;
  flex-shrink: 0;
}

.ilju-remedies .remedy-type[class*="activity"],
.ilju-remedies .remedy-item:has(.remedy-type:first-child) .remedy-type {
  background: rgba(127, 176, 141, 0.2);
  color: var(--ohang-wood);
  border: 1px solid rgba(127, 176, 141, 0.4);
}

.ilju-remedies .remedy-item:nth-child(3n+2) .remedy-type {
  background: rgba(107, 139, 164, 0.2);
  color: var(--ohang-water);
  border: 1px solid rgba(107, 139, 164, 0.4);
}

.ilju-remedies .remedy-item:nth-child(3n) .remedy-type {
  background: rgba(212, 96, 90, 0.15);
  color: var(--ohang-fire);
  border: 1px solid rgba(212, 96, 90, 0.35);
}

.ilju-remedies .remedy-desc {
  font-family: var(--font-body);
  color: var(--cream-paper);
  font-size: 0.85rem;
  line-height: 1.6;
  flex: 1;
}

/* ===========================
   개운법 카드 스타일 (ilju-card 위계)
   =========================== */
.ilju-card-remedies .remedies-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ilju-card-remedies .remedy-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule-light);
}

.ilju-card-remedies .remedy-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ilju-card-remedies .remedy-row:first-child {
  padding-top: 0;
}

.ilju-card-remedies .remedy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ilju-card-remedies .badge-hanja {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  letter-spacing: 0;
}

.ilju-card-remedies .badge-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  min-width: 28px;
}

/* 오행별 색상 */
.ilju-card-remedies .remedy-ohang-fire .badge-hanja {
  color: var(--ohang-fire);
  border-color: var(--ohang-fire);
  background: rgba(212, 96, 90, 0.1);
}
.ilju-card-remedies .remedy-ohang-fire .badge-label {
  color: var(--ohang-fire);
}

.ilju-card-remedies .remedy-ohang-wood .badge-hanja {
  color: var(--ohang-wood);
  border-color: var(--ohang-wood);
  background: rgba(127, 176, 141, 0.1);
}
.ilju-card-remedies .remedy-ohang-wood .badge-label {
  color: var(--ohang-wood);
}

.ilju-card-remedies .remedy-ohang-water .badge-hanja {
  color: var(--ohang-water);
  border-color: var(--ohang-water);
  background: rgba(107, 139, 164, 0.1);
}
.ilju-card-remedies .remedy-ohang-water .badge-label {
  color: var(--ohang-water);
}

.ilju-card-remedies .remedy-ohang-earth .badge-hanja {
  color: var(--ohang-earth);
  border-color: var(--ohang-earth);
  background: rgba(212, 181, 106, 0.1);
}
.ilju-card-remedies .remedy-ohang-earth .badge-label {
  color: var(--ohang-earth);
}

.ilju-card-remedies .remedy-ohang-metal .badge-hanja {
  color: var(--ohang-metal);
  border-color: rgba(245, 241, 232, 0.5);
  background: rgba(245, 241, 232, 0.08);
}
.ilju-card-remedies .remedy-ohang-metal .badge-label {
  color: var(--ohang-metal);
}

.ilju-card-remedies .remedy-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--cream-paper);
  flex: 1;
}

/* ===========================
   개운법 v2 - 전통 처방전 스타일 (레거시)
   =========================== */
.ilju-remedies-v2 {
  margin: 24px 16px 16px;
  background: var(--newsprint);
  border: 1px solid var(--rule-color);
  position: relative;
}

/* 상단 꾸밈 - 두루마리 느낌 */
.ilju-remedies-v2::before,
.ilju-remedies-v2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--rule-color) 10%,
    var(--rule-color) 90%,
    transparent 100%
  );
}

.ilju-remedies-v2::before {
  top: -1px;
}

.ilju-remedies-v2::after {
  bottom: -1px;
}

/* 헤더 */
.ilju-remedies-v2 .remedies-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule-light);
  background: linear-gradient(180deg,
    rgba(212, 181, 106, 0.06) 0%,
    transparent 100%
  );
}

.ilju-remedies-v2 .remedies-seal {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-ink);
  border: 2px solid var(--red-ink);
  background: rgba(196, 80, 80, 0.08);
  letter-spacing: 0;
}

.ilju-remedies-v2 .remedies-title-group {
  flex: 1;
}

.ilju-remedies-v2 .remedies-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white-paper);
  margin: 0;
  letter-spacing: 0.12em;
}

.ilju-remedies-v2 .remedies-subtitle {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--worn-type);
  margin: 4px 0 0 0;
  letter-spacing: 0.05em;
}

/* 처방 스크롤 영역 */
.ilju-remedies-v2 .remedies-scroll {
  padding: 0;
}

/* 개별 처방 */
.ilju-remedies-v2 .remedy-prescription {
  display: flex;
  align-items: stretch;
  border-bottom: 1px dotted var(--rule-light);
  transition: background 0.2s ease;
}

.ilju-remedies-v2 .remedy-prescription:last-child {
  border-bottom: none;
}

.ilju-remedies-v2 .remedy-prescription:hover {
  background: rgba(245, 241, 232, 0.03);
}

/* 번호 */
.ilju-remedies-v2 .prescription-number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--worn-type);
  padding: 14px 0 14px 16px;
  min-width: 28px;
  opacity: 0.5;
}

/* 처방 본문 */
.ilju-remedies-v2 .prescription-body {
  flex: 1;
  padding: 14px 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 카테고리 */
.ilju-remedies-v2 .prescription-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.ilju-remedies-v2 .category-hanja {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  letter-spacing: 0;
}

.ilju-remedies-v2 .category-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* 오행별 색상 */
.ilju-remedies-v2 .remedy-ohang-fire .category-hanja {
  color: var(--ohang-fire);
  border-color: var(--ohang-fire);
  background: rgba(212, 96, 90, 0.1);
}
.ilju-remedies-v2 .remedy-ohang-fire .category-label {
  color: var(--ohang-fire);
}

.ilju-remedies-v2 .remedy-ohang-wood .category-hanja {
  color: var(--ohang-wood);
  border-color: var(--ohang-wood);
  background: rgba(127, 176, 141, 0.1);
}
.ilju-remedies-v2 .remedy-ohang-wood .category-label {
  color: var(--ohang-wood);
}

.ilju-remedies-v2 .remedy-ohang-water .category-hanja {
  color: var(--ohang-water);
  border-color: var(--ohang-water);
  background: rgba(107, 139, 164, 0.1);
}
.ilju-remedies-v2 .remedy-ohang-water .category-label {
  color: var(--ohang-water);
}

.ilju-remedies-v2 .remedy-ohang-earth .category-hanja {
  color: var(--ohang-earth);
  border-color: var(--ohang-earth);
  background: rgba(212, 181, 106, 0.1);
}
.ilju-remedies-v2 .remedy-ohang-earth .category-label {
  color: var(--ohang-earth);
}

.ilju-remedies-v2 .remedy-ohang-metal .category-hanja {
  color: var(--ohang-metal);
  border-color: rgba(245, 241, 232, 0.5);
  background: rgba(245, 241, 232, 0.08);
}
.ilju-remedies-v2 .remedy-ohang-metal .category-label {
  color: var(--ohang-metal);
}

/* 처방 텍스트 */
.ilju-remedies-v2 .prescription-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--cream-paper);
  margin: 0;
}

/* 푸터 */
.ilju-remedies-v2 .remedies-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule-light);
  background: linear-gradient(0deg,
    rgba(212, 181, 106, 0.04) 0%,
    transparent 100%
  );
}

.ilju-remedies-v2 .footer-ornament {
  color: var(--ohang-earth);
  font-size: 0.65rem;
  opacity: 0.7;
}

.ilju-remedies-v2 .footer-text {
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--worn-type);
  letter-spacing: 0.06em;
  font-style: italic;
}

/* 반응형 - 개운법 v2 */
@media (max-width: 480px) {
  .ilju-remedies-v2 {
    margin: 20px 16px 16px;
  }

  .ilju-remedies-v2 .remedies-header {
    padding: 14px 16px;
  }

  .ilju-remedies-v2 .remedies-seal {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .ilju-remedies-v2 .remedies-title {
    font-size: 1rem;
  }

  .ilju-remedies-v2 .prescription-number {
    padding-left: 12px;
    min-width: 24px;
  }

  .ilju-remedies-v2 .prescription-body {
    padding: 12px 12px 12px 6px;
  }
}

/* 반응형 */
@media (max-width: 480px) {
  .ilju-cards {
    padding: 0 16px 20px;
  }

  .ilju-pillar-display {
    padding: 12px 0 16px;
  }

  .ilju-pillar {
    font-size: 1.4rem;
    padding: 10px 16px;
  }

  .ilju-card.emphasized {
    margin: 0 -16px;
    padding: 16px 16px;
  }

  .ilju-diagrams {
    padding: 0 16px 20px;
  }

  .ilju-diagram {
    padding: 16px;
  }

  .ilju-diagram-basic .basic-ilju-grid {
    gap: 2px;
  }

  .ilju-diagram-basic .pillar-cell {
    padding: 12px 18px;
    min-width: 70px;
  }

  .ilju-diagram-basic .cell-value {
    font-size: 1.6rem;
  }

  .ilju-diagram-jwabeop .jwabeop-container {
    flex-direction: column;
    align-items: center;
  }

  .ilju-diagram-jwabeop .jwabeop-components {
    width: 100%;
    min-width: auto;
  }

  .ilju-remedies {
    margin: 0 16px 20px;
    padding: 16px;
  }

  .ilju-remedies .remedy-item {
    flex-direction: column;
    gap: 8px;
  }

  .ilju-remedies .remedy-type {
    align-self: flex-start;
  }

  .ilju-global-notes,
  .ilju-global-cautions {
    padding: 0 16px;
  }
}

/* ===========================
   대운 분석 섹션 (B-1 프로토콜)
   =========================== */

.daewoon-analysis-section .section-subtitle {
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin-top: -8px !important;
  margin-bottom: 16px !important;
  font-family: var(--font-body) !important;
}

.daewoon-analysis-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 640px) {
  .daewoon-analysis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.daewoon-analysis-item {
  padding: 16px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  transition: all 0.2s ease !important;
}

/* 레일 판정별 좌측 보더 색상 */
.rail-very-comfortable { border-left: 4px solid #4CAF50 !important; }
.rail-comfortable { border-left: 4px solid #8BC34A !important; }
.rail-slightly-comfortable { border-left: 4px solid #CDDC39 !important; }
.rail-neutral { border-left: 4px solid var(--rule-color) !important; }
.rail-slightly-rough { border-left: 4px solid #FFC107 !important; }
.rail-rough { border-left: 4px solid #FF9800 !important; }
.rail-very-rough { border-left: 4px solid #F44336 !important; }

/* 대운 헤더 */
.daewoon-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.daewoon-analysis-item .daewoon-age {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

.daewoon-analysis-item .daewoon-pillar {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
}

.daewoon-verdict-icon {
  font-size: 1.3rem !important;
  margin-left: auto !important;
}

/* 대운 양력 날짜 범위 */
.daewoon-date-range {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  padding: 6px 0 !important;
  border-top: 1px solid var(--rule-light) !important;
  border-bottom: 1px solid var(--rule-light) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(166, 158, 145, 0.08) 10%,
    rgba(166, 158, 145, 0.08) 90%,
    transparent 100%
  ) !important;
}

.daewoon-date-range .date-range-label {
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  color: var(--worn-type) !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
  padding-right: 4px !important;
}

.daewoon-date-range .date-range-text {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  letter-spacing: 0.02em !important;
}

.daewoon-date-range .date-range-separator {
  font-size: 0.6rem !important;
  color: var(--rule-color) !important;
  opacity: 0.7 !important;
}

/* 현재 대운의 날짜 범위 강조 */
.daewoon-analysis-item.current-daewoon .daewoon-date-range {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 80, 80, 0.1) 10%,
    rgba(196, 80, 80, 0.1) 90%,
    transparent 100%
  ) !important;
  border-color: rgba(196, 80, 80, 0.3) !important;
}

.daewoon-analysis-item.current-daewoon .daewoon-date-range .date-range-text,
.daewoon-analysis-item.current-daewoon .daewoon-date-range .date-range-label {
  color: var(--cream-paper) !important;
}

/* 용희기 배지 */
.daewoon-yonghigi {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.yonghigi-badge {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  padding: 3px 8px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.yonghigi-yongsin { color: #4CAF50 !important; border-color: #4CAF50 !important; }
.yonghigi-heesin { color: #8BC34A !important; border-color: #8BC34A !important; }
.yonghigi-conditional { color: #FFC107 !important; border-color: #FFC107 !important; }
.yonghigi-gisin { color: #F44336 !important; border-color: #F44336 !important; }
.yonghigi-neutral { color: var(--worn-type) !important; }

/* 지지 관계 배지 */
.daewoon-relations {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.relation-badge {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  padding: 2px 6px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.relation-badge small {
  opacity: 0.7 !important;
  margin-left: 2px !important;
}

.relation-chung { color: #F44336 !important; background: rgba(244, 67, 54, 0.1) !important; border-color: rgba(244, 67, 54, 0.3) !important; }
.relation-xing { color: #FF9800 !important; background: rgba(255, 152, 0, 0.1) !important; border-color: rgba(255, 152, 0, 0.3) !important; }
.relation-pa { color: #FFC107 !important; background: rgba(255, 193, 7, 0.1) !important; border-color: rgba(255, 193, 7, 0.3) !important; }
.relation-hae { color: #9C27B0 !important; background: rgba(156, 39, 176, 0.1) !important; border-color: rgba(156, 39, 176, 0.3) !important; }
.relation-hap { color: #4CAF50 !important; background: rgba(76, 175, 80, 0.1) !important; border-color: rgba(76, 175, 80, 0.3) !important; }

/* 레일 판정 결과 */
.daewoon-verdict {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--rule-light) !important;
}

.verdict-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--cream-paper) !important;
}

/* 상세 보기 */
.daewoon-details {
  margin-top: 10px !important;
}

.daewoon-details summary {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  cursor: pointer !important;
  user-select: none !important;
}

.daewoon-details summary:hover {
  color: var(--cream-paper) !important;
}

.daewoon-oneliner {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--cream-paper) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.event-points {
  margin-top: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.event-points strong {
  color: var(--cream-paper) !important;
}

.event-points ul {
  margin: 4px 0 0 16px !important;
  padding: 0 !important;
}

.event-points li {
  margin-bottom: 4px !important;
}

.rail-score {
  margin-top: 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  opacity: 0.7 !important;
}

/* ===========================
   운(運) 드릴다운 공통 스타일
   =========================== */

/* 섹션 헤더 */
.section-header {
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--rule-color) !important;
}

.section-header .section-title {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* 일진 분석 헤더 - 오늘 버튼 포함 */
.iljin-header-with-action {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.section-header-left {
  flex: 1 !important;
}

.today-quick-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--ink-black) !important;
  background: var(--cream-paper) !important;
  border: 1px solid var(--worn-type) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px var(--shadow-soft) !important;
  flex-shrink: 0 !important;
}

.today-quick-btn:hover {
  background: var(--white-paper) !important;
  border-color: var(--cream-paper) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 6px var(--shadow-deep) !important;
}

.today-quick-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px var(--shadow-soft) !important;
}

.today-quick-btn .today-icon {
  font-size: 0.9rem !important;
  line-height: 1 !important;
  color: var(--red-ink) !important;
}

.today-quick-btn .today-text {
  letter-spacing: 0.02em !important;
}

.section-header .section-subtitle {
  font-size: 0.8rem !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
}

/* 현재 대운 하이라이트 */
.daewoon-analysis-item.current-daewoon {
  background: var(--newsprint) !important;
  border-color: var(--red-ink) !important;
  box-shadow: 0 0 0 1px var(--red-ink-light), 0 4px 12px var(--red-ink-glow) !important;
}

.daewoon-analysis-item.current-daewoon .daewoon-age::after {
  content: ' (현재)' !important;
  color: var(--red-ink) !important;
  font-size: 0.7rem !important;
}

/* 선택 가능 표시 - 대운 */
.daewoon-analysis-item {
  cursor: pointer !important;
  position: relative !important;
}

.daewoon-analysis-item:hover {
  background: var(--proof-sheet) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px var(--shadow-soft) !important;
}

.daewoon-analysis-item.selected {
  background: var(--newsprint) !important;
  border-color: var(--red-ink) !important;
}

/* 운 분석 turbo-frame (세운/월운/일진) */
#seawoon_frame,
#wolwoon_frame,
#iljin_frame {
  display: block !important;
}

.frame-placeholder {
  text-align: center !important;
  padding: 24px !important;
  color: var(--worn-type) !important;
  font-size: 0.9rem !important;
  font-style: italic !important;
  background: rgba(58, 53, 45, 0.3) !important;
  border: 1px dashed var(--rule-light) !important;
}

/* ===========================
   세운(歲運) 분석 섹션 (B-2)
   =========================== */
.seawoon-analysis-section {
  margin-top: 0 !important;
  border-top: none !important;
}

.seawoon-analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

@media (min-width: 640px) {
  .seawoon-analysis-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

.seawoon-analysis-item {
  padding: 12px 10px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.seawoon-analysis-item:hover {
  background: var(--proof-sheet) !important;
  transform: translateY(-2px) !important;
}

.seawoon-analysis-item.selected {
  background: var(--newsprint) !important;
  border-color: var(--red-ink) !important;
}

.seawoon-analysis-item.current-year {
  box-shadow: 0 0 0 1px var(--red-ink-light), 0 4px 12px var(--red-ink-glow) !important;
}

.seawoon-analysis-item.current-year .seawoon-year small {
  color: var(--red-ink) !important;
}

/* 세운 헤더 */
.seawoon-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.seawoon-year {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--cream-paper) !important;
}

.seawoon-year small {
  font-size: 0.65rem !important;
  color: var(--worn-type) !important;
}

.seawoon-pillar {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.seawoon-verdict-icon {
  font-size: 1rem !important;
  margin-left: auto !important;
}

/* 세운 양력 날짜 범위 */
.seawoon-date-range {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
  padding: 4px 0 !important;
  border-top: 1px solid var(--rule-light) !important;
  border-bottom: 1px solid var(--rule-light) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(166, 158, 145, 0.08) 15%,
    rgba(166, 158, 145, 0.08) 85%,
    transparent 100%
  ) !important;
}

.seawoon-date-range .date-range-label {
  font-family: var(--font-body) !important;
  font-size: 0.55rem !important;
  color: var(--worn-type) !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
  padding-right: 2px !important;
}

.seawoon-date-range .date-range-text {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  color: var(--worn-type) !important;
  letter-spacing: 0.02em !important;
}

.seawoon-date-range .date-range-separator {
  font-size: 0.5rem !important;
  color: var(--rule-color) !important;
  opacity: 0.7 !important;
}

/* 올해 세운의 날짜 범위 강조 */
.seawoon-analysis-item.current-year .seawoon-date-range {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 80, 80, 0.1) 15%,
    rgba(196, 80, 80, 0.1) 85%,
    transparent 100%
  ) !important;
  border-color: rgba(196, 80, 80, 0.3) !important;
}

.seawoon-analysis-item.current-year .seawoon-date-range .date-range-text,
.seawoon-analysis-item.current-year .seawoon-date-range .date-range-label {
  color: var(--cream-paper) !important;
}

/* 세운 용희기 */
.seawoon-yonghigi {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}

.seawoon-yonghigi .yonghigi-badge {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
}

/* 세운 지지 관계 */
.seawoon-relations {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}

/* 세운 판정 */
.seawoon-verdict {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px dashed var(--rule-light) !important;
}

.seawoon-verdict .verdict-label {
  font-size: 0.75rem !important;
}

/* 세운 상세 보기 */
.seawoon-details {
  margin-top: 8px !important;
}

.seawoon-details summary {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  cursor: pointer !important;
}

.seawoon-oneliner {
  font-size: 0.75rem !important;
  color: var(--cream-paper) !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* ===========================
   월운(月運) 분석 섹션 (B-3)
   =========================== */
.wolwoon-analysis-section {
  margin-top: 0 !important;
}

.wolwoon-analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}

@media (min-width: 480px) {
  .wolwoon-analysis-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 640px) {
  .wolwoon-analysis-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (min-width: 768px) {
  .wolwoon-analysis-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

.wolwoon-analysis-item {
  position: relative !important;
  padding: 10px 8px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.wolwoon-analysis-item:hover {
  background: var(--proof-sheet) !important;
}

.wolwoon-analysis-item.selected {
  background: var(--newsprint) !important;
  border-color: var(--red-ink) !important;
}

.wolwoon-analysis-item.current-month {
  box-shadow: 0 0 0 1px var(--red-ink-light), 0 4px 12px var(--red-ink-glow) !important;
}

/* 이번달 배지 */
.current-month-badge {
  position: absolute !important;
  top: -8px !important;
  right: 8px !important;
  padding: 3px 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: var(--white-paper) !important;
  background: var(--red-ink) !important;
  border-radius: 2px !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 2px 4px var(--shadow-soft) !important;
}

/* 월운 헤더 */
.wolwoon-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.wolwoon-month {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--cream-paper) !important;
}

.wolwoon-month small {
  font-size: 0.6rem !important;
  color: var(--worn-type) !important;
}

.wolwoon-pillar {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.wolwoon-verdict-icon {
  font-size: 0.9rem !important;
  margin-left: auto !important;
}

/* 월운 양력 날짜 범위 */
.wolwoon-date-range {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
  padding: 3px 0 !important;
  border-top: 1px solid var(--rule-light) !important;
  border-bottom: 1px solid var(--rule-light) !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(166, 158, 145, 0.08) 20%,
    rgba(166, 158, 145, 0.08) 80%,
    transparent 100%
  ) !important;
}

.wolwoon-date-range .date-range-label {
  font-family: var(--font-body) !important;
  font-size: 0.5rem !important;
  color: var(--worn-type) !important;
  opacity: 0.8 !important;
  letter-spacing: 0.05em !important;
  padding-right: 2px !important;
}

.wolwoon-date-range .date-range-text {
  font-family: var(--font-mono) !important;
  font-size: 0.55rem !important;
  color: var(--worn-type) !important;
  letter-spacing: 0.02em !important;
}

.wolwoon-date-range .date-range-separator {
  font-size: 0.45rem !important;
  color: var(--rule-color) !important;
  opacity: 0.7 !important;
}

/* 현재 월의 날짜 범위 강조 */
.wolwoon-analysis-item.current-month .wolwoon-date-range {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 80, 80, 0.1) 20%,
    rgba(196, 80, 80, 0.1) 80%,
    transparent 100%
  ) !important;
  border-color: rgba(196, 80, 80, 0.3) !important;
}

.wolwoon-analysis-item.current-month .wolwoon-date-range .date-range-text,
.wolwoon-analysis-item.current-month .wolwoon-date-range .date-range-label {
  color: var(--cream-paper) !important;
}

/* 월운 키워드 */
.wolwoon-keywords {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
}

.keyword-badge {
  font-family: var(--font-body) !important;
  font-size: 0.6rem !important;
  padding: 1px 4px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  color: var(--worn-type) !important;
}

/* 월운 지지 관계 */
.wolwoon-relations {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
}

.wolwoon-relations .relation-badge {
  font-size: 0.6rem !important;
  padding: 1px 4px !important;
}

/* 월운 판정 */
.wolwoon-verdict {
  margin-top: 4px !important;
  padding-top: 4px !important;
  border-top: 1px dashed var(--rule-light) !important;
}

.wolwoon-verdict .verdict-label {
  font-size: 0.7rem !important;
}

/* ===========================
   일진(日辰) 분석 섹션 (B-4)
   =========================== */
.iljin-analysis-section {
  margin-top: 0 !important;
}

/* 주간 네비게이션 */
.week-navigation {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding: 10px 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.week-nav-btn {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--cream-paper) !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.week-nav-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.week-nav-btn .nav-icon {
  font-size: 1rem !important;
}

.week-label {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
  font-weight: 600 !important;
}

/* 일진 그리드 */
.iljin-analysis-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 480px) {
  .iljin-analysis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (min-width: 640px) {
  .iljin-analysis-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
}

@media (min-width: 768px) {
  .iljin-analysis-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
  }
}

.iljin-analysis-item {
  position: relative !important;
  padding: 12px 16px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
}

@media (min-width: 480px) {
  .iljin-analysis-item {
    padding: 10px 6px !important;
    text-align: center !important;
  }
}

.iljin-analysis-item.today {
  background: var(--newsprint) !important;
  border-color: var(--red-ink) !important;
  box-shadow: 0 0 0 1px var(--red-ink-light), 0 4px 12px var(--red-ink-glow) !important;
}

/* 선택된 일진 */
.iljin-analysis-item.selected {
  background: var(--newsprint) !important;
  border: 2px solid var(--cream-paper) !important;
  box-shadow: 0 0 0 2px var(--rule-light), 0 4px 16px var(--shadow-soft) !important;
  transform: translateY(-2px) !important;
  transition: all 0.2s ease !important;
}

.iljin-analysis-item.selected::after {
  content: "선택됨" !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  font-size: 0.6rem !important;
  color: var(--cream-paper) !important;
  background: var(--old-paper) !important;
  padding: 2px 6px !important;
  border: 1px solid var(--rule-color) !important;
}

/* 오늘이면서 선택된 경우 */
.iljin-analysis-item.today.selected {
  border-color: var(--red-ink) !important;
  box-shadow: 0 0 0 2px var(--red-ink-light), 0 4px 16px var(--red-ink-glow) !important;
}

.iljin-analysis-item.today.selected::after {
  background: var(--red-ink) !important;
  color: var(--white-paper) !important;
  border-color: var(--red-ink) !important;
}

/* 일진 헤더 */
.iljin-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

@media (min-width: 480px) {
  .iljin-header {
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    margin-bottom: 6px !important;
  }
}

.iljin-date {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

@media (min-width: 480px) {
  .iljin-date {
    font-size: 0.7rem !important;
  }
}

.iljin-date small {
  font-size: 0.7rem !important;
  color: var(--red-ink) !important;
  margin-left: 4px !important;
}

@media (min-width: 480px) {
  .iljin-date small {
    font-size: 0.6rem !important;
    margin-left: 0 !important;
  }
}

.iljin-weekday {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--worn-type) !important;
}

@media (min-width: 480px) {
  .iljin-weekday {
    font-size: 0.65rem !important;
  }
}

.iljin-pillar {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

@media (min-width: 480px) {
  .iljin-pillar {
    font-size: 1rem !important;
  }
}

.iljin-verdict-icon {
  font-size: 1.1rem !important;
  margin-top: 0 !important;
}

@media (min-width: 480px) {
  .iljin-verdict-icon {
    font-size: 0.9rem !important;
    margin-top: 2px !important;
  }
}

/* 일진 판정 */
.iljin-verdict {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

@media (min-width: 480px) {
  .iljin-verdict {
    margin-top: 4px !important;
    padding-top: 4px !important;
    border-top: 1px dashed var(--rule-light) !important;
  }
}

.iljin-verdict .verdict-label {
  font-size: 0.75rem !important;
}

@media (min-width: 480px) {
  .iljin-verdict .verdict-label {
    font-size: 0.65rem !important;
  }
}

/* 일진 지지 관계 */
.iljin-relations {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin-top: 8px !important;
}

@media (min-width: 480px) {
  .iljin-relations {
    justify-content: center !important;
    gap: 2px !important;
    margin-top: 4px !important;
  }
}

.iljin-relations .relation-badge {
  font-size: 0.55rem !important;
  padding: 1px 3px !important;
}

.iljin-relations .relation-badge.small {
  font-size: 0.5rem !important;
}

/* 일진 액션 (오늘만 표시) */
.iljin-actions {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid var(--rule-light) !important;
  text-align: left !important;
}

.action-good, .action-avoid {
  display: flex !important;
  align-items: flex-start !important;
  gap: 4px !important;
  font-size: 0.6rem !important;
  margin-bottom: 3px !important;
}

.action-good {
  color: #4CAF50 !important;
}

.action-avoid {
  color: #F44336 !important;
}

.action-icon {
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.action-list {
  color: var(--cream-paper) !important;
  line-height: 1.3 !important;
}

/* 일진 상세 보기 */
.iljin-details {
  margin-top: 6px !important;
}

.iljin-details summary {
  font-size: 0.6rem !important;
  color: var(--worn-type) !important;
  cursor: pointer !important;
  text-align: center !important;
}

.iljin-oneliner {
  font-size: 0.65rem !important;
  color: var(--cream-paper) !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

.action-good-full, .action-avoid-full {
  font-size: 0.6rem !important;
  margin-top: 4px !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

.action-good-full {
  color: #4CAF50 !important;
}

.action-avoid-full {
  color: #F44336 !important;
}

.action-good-full strong, .action-avoid-full strong {
  display: block !important;
  margin-bottom: 2px !important;
}

/* 데이터 없음 메시지 */
.no-data {
  text-align: center !important;
  padding: 24px !important;
  color: var(--worn-type) !important;
  font-style: italic !important;
}

/* ===========================
   A-8 용신 분석 섹션
   =========================== */

.yongsin-analysis-section {
  position: relative !important;
}

/* 핵심 요약 영역 */
.yongsin-summary {
  padding: 16px !important;
  background: rgba(58, 53, 45, 0.5) !important;
  border: 1px solid var(--rule-light) !important;
}

/* 용신/희신/기신 3열 그리드 */
.yongsin-trinity {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.trinity-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 16px 8px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  position: relative !important;
}

.trinity-label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.1em !important;
}

.trinity-values {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.trinity-value {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
}

.trinity-desc {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  color: var(--worn-type) !important;
  margin-top: 8px !important;
  opacity: 0.8 !important;
}

/* 조건부 희신 */
.conditional-heesin {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px !important;
  background: var(--newsprint) !important;
  border: 1px dashed var(--rule-light) !important;
  margin-bottom: 16px !important;
}

.conditional-label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: #FFC107 !important;
}

.conditional-value {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.conditional-note {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
}

/* 한줄 처방 */
.yongsin-prescription {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--newsprint) !important;
  border-left: 3px solid var(--red-ink) !important;
}

.prescription-icon {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  color: var(--red-ink) !important;
  opacity: 0.8 !important;
  flex-shrink: 0 !important;
}

.prescription-text {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--cream-paper) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.prescription-text strong {
  color: var(--white-paper) !important;
}

/* 상세 분석 (접기/펼치기) */
.yongsin-details {
  margin-top: 16px !important;
}

.yongsin-details-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  list-style: none !important;
}

.yongsin-details-toggle::-webkit-details-marker {
  display: none !important;
}

.yongsin-details-toggle:hover {
  background: var(--proof-sheet) !important;
  color: var(--cream-paper) !important;
}

.toggle-icon {
  font-size: 0.8rem !important;
  transition: transform 0.2s ease !important;
}

.yongsin-details[open] .toggle-icon {
  transform: rotate(90deg) !important;
}

.toggle-text {
  letter-spacing: 0.05em !important;
}

.yongsin-details-content {
  padding: 16px 0 0 0 !important;
}

/* 분석 블록 공통 */
.analysis-block {
  margin-bottom: 16px !important;
  padding: 16px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.analysis-block:last-child {
  margin-bottom: 0 !important;
}

.analysis-block-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin: 0 0 12px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.block-icon {
  font-size: 1rem !important;
  opacity: 0.7 !important;
}

.block-result {
  margin-left: auto !important;
  font-size: 0.8rem !important;
  padding: 3px 10px !important;
  border: 1px solid !important;
}

/* 억부 결과 색상 */
.eokbu-strong { color: #F44336 !important; border-color: #F44336 !important; background: rgba(244, 67, 54, 0.1) !important; }
.eokbu-weak { color: #4CAF50 !important; border-color: #4CAF50 !important; background: rgba(76, 175, 80, 0.1) !important; }
.eokbu-neutral { color: var(--worn-type) !important; border-color: var(--rule-light) !important; }

/* 조후 결과 색상 */
.johu-emergency { color: #F44336 !important; border-color: #F44336 !important; background: rgba(244, 67, 54, 0.1) !important; }
.johu-medium { color: #FFC107 !important; border-color: #FFC107 !important; background: rgba(255, 193, 7, 0.1) !important; }
.johu-low { color: var(--worn-type) !important; border-color: var(--rule-light) !important; }

/* 통관 결과 색상 */
.tonggwan-needed { color: #FF9800 !important; border-color: #FF9800 !important; background: rgba(255, 152, 0, 0.1) !important; }
.tonggwan-optional { color: #FFC107 !important; border-color: #FFC107 !important; background: rgba(255, 193, 7, 0.1) !important; }
.tonggwan-none { color: var(--worn-type) !important; border-color: var(--rule-light) !important; }

/* 분석 그리드 */
.analysis-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 480px) {
  .analysis-grid {
    grid-template-columns: 1fr !important;
  }
}

.analysis-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.item-label {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  letter-spacing: 0.05em !important;
}

.item-value {
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.item-value.strong { color: #F44336 !important; }
.item-value.weak { color: #FFC107 !important; }
.item-value.neutral { color: var(--cream-paper) !important; }
.item-value.pressure { color: #FF9800 !important; }

.item-detail {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  line-height: 1.4 !important;
}

/* 분석 요약 */
.analysis-summary {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--cream-paper) !important;
  margin: 0 !important;
  padding: 10px !important;
  background: var(--newsprint) !important;
  border-left: 2px solid var(--rule-color) !important;
  line-height: 1.5 !important;
}

.analysis-summary em {
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
}

/* 조후 분석 특화 스타일 */
.johu-type {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding: 10px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.johu-type-badge {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border: 1px solid !important;
}

.johu-type-badge.hot-dry {
  color: var(--ohang-fire) !important;
  border-color: var(--ohang-fire) !important;
  background: rgba(212, 96, 90, 0.15) !important;
}

.johu-type-badge.cold-wet {
  color: var(--ohang-water) !important;
  border-color: var(--ohang-water) !important;
  background: rgba(107, 139, 164, 0.15) !important;
}

.johu-type-badge.dry {
  color: var(--ohang-metal) !important;
  border-color: var(--ohang-metal) !important;
  background: rgba(245, 241, 232, 0.1) !important;
}

.johu-type-badge.wet {
  color: var(--ohang-earth) !important;
  border-color: var(--ohang-earth) !important;
  background: rgba(212, 181, 106, 0.15) !important;
}

.johu-type-badge.mild {
  color: var(--worn-type) !important;
  border-color: var(--rule-light) !important;
}

.johu-type-desc {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  color: var(--cream-paper) !important;
}

.johu-elements {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 12px !important;
}

.johu-help, .johu-harm {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  flex: 1 !important;
}

.johu-label {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
  white-space: nowrap !important;
}

.johu-help .johu-label { color: #4CAF50 !important; }
.johu-harm .johu-label { color: #F44336 !important; }

.johu-element {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

/* 통관 분석 특화 스타일 */
.tonggwan-clash {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding: 10px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.clash-label {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: #F44336 !important;
  white-space: nowrap !important;
}

.clash-flow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.clash-arrow {
  color: #F44336 !important;
  font-size: 0.9rem !important;
}

.clash-desc {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  margin-left: auto !important;
}

.tonggwan-mediator {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding: 10px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.mediator-label {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: #FFC107 !important;
  white-space: nowrap !important;
}

.mediator-element {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.mediator-desc {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  margin-left: auto !important;
}

/* 용신 분석 반응형 */
@media (max-width: 480px) {
  .yongsin-trinity {
    gap: 8px !important;
  }

  .trinity-item {
    padding: 12px 6px !important;
  }

  .trinity-value {
    font-size: 1.3rem !important;
  }

  .trinity-desc {
    display: none !important;
  }

  .johu-elements {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .clash-desc, .mediator-desc {
    display: none !important;
  }
}

/* ===========================
   마이페이지 (Mypage)
   활판인쇄 테마 적용
   =========================== */

/* 마이페이지 래퍼 리셋 */
.mypage-wrapper *,
.mypage-wrapper *::before,
.mypage-wrapper *::after {
  border-radius: 0 !important;
}

.mypage-wrapper {
  font-family: var(--font-body) !important;
  background: var(--ink-black) !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* 인쇄 노이즈 텍스처 */
.mypage-wrapper::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.mypage-container {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-bottom: 100px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 마이페이지 헤더 */
.mypage-header {
  background: var(--newsprint) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--rule-color) !important;
  position: relative !important;
}

.mypage-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-color) 20%,
    var(--rule-color) 80%,
    transparent 100%
  ) !important;
}

.mypage-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--white-paper) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.2em !important;
}

.mypage-title::before {
  content: '【 ' !important;
  color: var(--worn-type) !important;
  font-size: 1.5rem !important;
}

.mypage-title::after {
  content: ' 】' !important;
  color: var(--worn-type) !important;
  font-size: 1.5rem !important;
}

.mypage-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--worn-type) !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 16px 0 !important;
}

.mypage-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.phone-label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.phone-label::after {
  content: ' ▪' !important;
  color: var(--red-ink) !important;
}

.phone-value {
  font-family: var(--font-mono) !important;
  font-size: 0.9rem !important;
  color: var(--cream-paper) !important;
  letter-spacing: 0.05em !important;
}

/* 통계 섹션 */
.mypage-stats {
  display: flex !important;
  margin: 24px 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  position: relative !important;
}

.stat-card {
  flex: 1 !important;
  padding: 24px 16px !important;
  text-align: center !important;
  position: relative !important;
}

.stat-divider {
  width: 1px !important;
  background: var(--rule-light) !important;
  align-self: stretch !important;
}

.stat-value {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--red-ink) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.stat-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
  display: block !important;
  letter-spacing: 0.05em !important;
}

.stat-icon {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--rule-color) !important;
  opacity: 0.6 !important;
}

.stat-icon svg {
  width: 100% !important;
  height: 100% !important;
}

/* 마이페이지 섹션 */
.mypage-section {
  margin: 0 16px 16px 16px !important;
  padding: 20px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.mypage-section .section-title {
  margin-bottom: 20px !important;
}

/* 사람 목록 */
.people-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  background: var(--rule-light) !important;
  border: 1px solid var(--rule-light) !important;
}

.person-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 12px !important;
  background: var(--old-paper) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.person-item:hover {
  background: var(--proof-sheet) !important;
}

.person-index {
  width: 28px !important;
  flex-shrink: 0 !important;
}

.index-number {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.person-gender {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  flex-shrink: 0 !important;
}

.gender-char {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
}

.person-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.person-name {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.person-birth {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.person-arrow {
  width: 20px !important;
  height: 20px !important;
  color: var(--worn-type) !important;
  flex-shrink: 0 !important;
}

.person-arrow svg {
  width: 100% !important;
  height: 100% !important;
}

.person-item:hover .person-arrow {
  color: var(--red-ink) !important;
}

/* 전체 보기 링크 */
.view-all {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--rule-light) !important;
  text-align: center !important;
}

.view-all-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--red-ink) !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border: 1px solid var(--red-ink-light) !important;
  transition: all 0.15s ease !important;
}

.view-all-link:hover {
  background: var(--red-ink-light) !important;
  border-color: var(--red-ink) !important;
}

.view-all-link svg {
  width: 16px !important;
  height: 16px !important;
}

/* 빈 상태 */
.empty-state {
  padding: 40px 20px !important;
  text-align: center !important;
}

.empty-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 16px auto !important;
  color: var(--rule-color) !important;
}

.empty-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.empty-text {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--cream-paper) !important;
  margin: 0 0 8px 0 !important;
}

.empty-hint {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
}

/* 액션 섹션 */
.mypage-actions {
  margin: 24px 16px !important;
  text-align: center !important;
}

.logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 32px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-color) !important;
  color: var(--cream-paper) !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  letter-spacing: 0.05em !important;
}

.logout-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--worn-type) !important;
}

.logout-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* 마이페이지 반응형 */
@media (max-width: 480px) {
  .mypage-title {
    font-size: 2rem !important;
  }

  .mypage-title::before,
  .mypage-title::after {
    font-size: 1.2rem !important;
  }

  .stat-value {
    font-size: 2rem !important;
  }

  .person-item {
    padding: 12px 10px !important;
    gap: 10px !important;
  }

  .person-index {
    display: none !important;
  }
}

/* ===========================
   리스트 페이지 (Teams/People Index)
   활판인쇄 테마
   =========================== */

/* 리스트 페이지 래퍼 리셋 */
.list-page-wrapper *,
.list-page-wrapper *::before,
.list-page-wrapper *::after {
  border-radius: 0 !important;
}

.list-page-wrapper {
  font-family: var(--font-body) !important;
  background: var(--ink-black) !important;
  min-height: 100vh !important;
  position: relative !important;
}

.list-page-wrapper::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.list-page-container {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-bottom: 100px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 리스트 페이지 헤더 */
.list-page-header {
  background: var(--newsprint) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--rule-color) !important;
  position: relative !important;
}

.list-page-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-color) 20%,
    var(--rule-color) 80%,
    transparent 100%
  ) !important;
}

.list-page-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--white-paper) !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.2em !important;
}

.list-page-title::before {
  content: '【 ' !important;
  color: var(--worn-type) !important;
  font-size: 1.5rem !important;
}

.list-page-title::after {
  content: ' 】' !important;
  color: var(--worn-type) !important;
  font-size: 1.5rem !important;
}

.list-page-subtitle {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  color: var(--cream-paper) !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 4px 0 !important;
}

.list-page-desc {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
}

/* 액션 바 */
.list-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px !important;
  background: var(--old-paper) !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.list-count {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.count-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

.count-value {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
}

.count-unit {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

.action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-color) !important;
  color: var(--cream-paper) !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.action-btn:hover {
  background: var(--proof-sheet) !important;
}

.action-btn.primary {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
  color: var(--white-paper) !important;
}

.action-btn.primary:hover {
  background: #a33d3d !important;
}

.action-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* 카드 리스트 */
.card-list {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.card-list-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 480px) {
  .card-list-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 리스트 카드 */
.list-card {
  display: flex !important;
  align-items: stretch !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.list-card:hover {
  background: var(--old-paper) !important;
  border-color: var(--rule-color) !important;
}

.card-index {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  background: var(--old-paper) !important;
  border-right: 1px solid var(--rule-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.card-content {
  flex: 1 !important;
  padding: 16px !important;
  min-width: 0 !important;
}

.card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.card-title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-badge {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  padding: 4px 8px !important;
  background: var(--ink-black) !important;
  border: 1px solid var(--rule-light) !important;
}

.badge-value {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
}

.badge-unit {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
}

.card-desc {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin: 0 0 12px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.card-members {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.member-badge {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.member-char {
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
}

.member-name {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.member-badge.more {
  background: var(--newsprint) !important;
  color: var(--worn-type) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
}

.card-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  color: var(--worn-type) !important;
  border-left: 1px solid var(--rule-light) !important;
}

.card-arrow svg {
  width: 20px !important;
  height: 20px !important;
}

.list-card:hover .card-arrow {
  color: var(--red-ink) !important;
}

/* Person 카드 (그리드 레이아웃) */
.person-card {
  flex-direction: column !important;
}

.person-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px !important;
  background: var(--old-paper) !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.person-gender-badge {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.person-card-index {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
}

.person-card-body {
  padding: 16px !important;
}

.person-card-name {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin: 0 0 12px 0 !important;
}

.person-card-birth {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.birth-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.birth-label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.birth-value {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
}

.person-card-footer {
  padding: 10px 16px !important;
  border-top: 1px solid var(--rule-light) !important;
  background: var(--old-paper) !important;
}

.record-count {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  color: var(--red-ink) !important;
}

/* 빈 상태 카드 */
.empty-state-card {
  margin: 16px !important;
  padding: 48px 24px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
  text-align: center !important;
}

.empty-state-card .empty-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px auto !important;
  color: var(--rule-color) !important;
}

.empty-state-card .empty-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.empty-title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  color: var(--cream-paper) !important;
  margin: 0 0 8px 0 !important;
}

.empty-hint {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--worn-type) !important;
  margin: 0 0 24px 0 !important;
}

.empty-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 24px !important;
  background: var(--red-ink) !important;
  border: 1px solid var(--red-ink) !important;
  color: var(--white-paper) !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.empty-action-btn:hover {
  background: #a33d3d !important;
}

.empty-action-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* ===========================
   상세 페이지 (Teams/People Show)
   =========================== */

.detail-page-wrapper *,
.detail-page-wrapper *::before,
.detail-page-wrapper *::after {
  border-radius: 0 !important;
}

.detail-page-wrapper {
  font-family: var(--font-body) !important;
  background: var(--ink-black) !important;
  min-height: 100vh !important;
  position: relative !important;
}

.detail-page-wrapper::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.detail-page-container {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-bottom: 100px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 상세 페이지 헤더 */
.detail-page-header {
  background: var(--newsprint) !important;
  border-bottom: 1px solid var(--rule-color) !important;
  position: relative !important;
}

.detail-page-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-color) 20%,
    var(--rule-color) 80%,
    transparent 100%
  ) !important;
}

.header-nav {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--worn-type) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.back-link:hover {
  color: var(--cream-paper) !important;
}

.back-link svg {
  width: 18px !important;
  height: 18px !important;
}

.header-content {
  padding: 24px 20px !important;
  text-align: center !important;
}

.header-label {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--red-ink) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.detail-page-title {
  font-family: var(--font-display) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin: 0 !important;
  letter-spacing: 0.05em !important;
}

.detail-page-desc {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--worn-type) !important;
  margin: 8px 0 0 0 !important;
}

.header-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--rule-light) !important;
  background: var(--old-paper) !important;
}

.header-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-color) !important;
  color: var(--cream-paper) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.header-action-btn:hover {
  background: var(--proof-sheet) !important;
}

.header-action-btn.danger {
  color: var(--red-ink) !important;
  border-color: var(--red-ink-light) !important;
}

.header-action-btn.danger:hover {
  background: var(--red-ink-light) !important;
}

.header-action-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* 상세 통계 */
.detail-stats {
  display: flex !important;
  justify-content: center !important;
  padding: 20px 16px !important;
  background: var(--old-paper) !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.detail-stat-item {
  text-align: center !important;
  padding: 0 24px !important;
}

.detail-stat-item .stat-value {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--red-ink) !important;
  display: block !important;
}

.detail-stat-item .stat-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

/* 상세 섹션 */
.detail-section {
  margin: 16px !important;
  padding: 20px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.detail-section .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.section-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  color: var(--cream-paper) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.section-action-btn:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.section-action-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* 정보 그리드 */
.info-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.info-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.info-label {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

.info-value {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
}

/* 팀 태그 리스트 */
.team-tag-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.team-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.team-tag:hover {
  background: var(--proof-sheet) !important;
  border-color: var(--rule-color) !important;
}

.tag-icon {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
}

.tag-name {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--cream-paper) !important;
}

/* 멤버 리스트 */
.member-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  background: var(--rule-light) !important;
  border: 1px solid var(--rule-light) !important;
}

.member-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--old-paper) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.member-list-item:hover {
  background: var(--proof-sheet) !important;
}

.member-index {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
  width: 24px !important;
}

.member-gender {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.member-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.member-name {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
}

.member-birth {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  color: var(--worn-type) !important;
}

.member-arrow {
  width: 18px !important;
  height: 18px !important;
  color: var(--worn-type) !important;
}

.member-arrow svg {
  width: 100% !important;
  height: 100% !important;
}

.member-list-item:hover .member-arrow {
  color: var(--red-ink) !important;
}

/* 기록 리스트 */
.record-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.record-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
}

.record-date {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-right: 16px !important;
  border-right: 1px solid var(--rule-light) !important;
}

.date-value {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
}

.date-time {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  color: var(--worn-type) !important;
}

.record-content {
  flex: 1 !important;
}

.record-label {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--cream-paper) !important;
}

/* 섹션 빈 상태 */
.section-empty {
  padding: 32px 16px !important;
  text-align: center !important;
  background: var(--old-paper) !important;
  border: 1px dashed var(--rule-light) !important;
}

.section-empty p {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--worn-type) !important;
  margin: 0 0 12px 0 !important;
}

.empty-action-link {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--red-ink) !important;
  text-decoration: none !important;
}

.empty-action-link:hover {
  text-decoration: underline !important;
}

.section-empty-inline {
  padding: 16px !important;
  background: var(--old-paper) !important;
  border: 1px dashed var(--rule-light) !important;
  text-align: center !important;
}

.section-empty-inline span {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
}

/* ===========================
   폼 페이지 (New/Edit)
   =========================== */

.form-page-wrapper *,
.form-page-wrapper *::before,
.form-page-wrapper *::after {
  border-radius: 0 !important;
}

.form-page-wrapper {
  font-family: var(--font-body) !important;
  background: var(--ink-black) !important;
  min-height: 100vh !important;
  position: relative !important;
}

.form-page-wrapper::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E") !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.form-page-container {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-bottom: 100px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 폼 페이지 헤더 */
.form-page-header {
  background: var(--newsprint) !important;
  border-bottom: 1px solid var(--rule-color) !important;
  position: relative !important;
}

.form-page-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rule-color) 20%,
    var(--rule-color) 80%,
    transparent 100%
  ) !important;
}

.form-page-header .header-nav {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.form-page-header .header-content {
  padding: 24px 20px !important;
  text-align: center !important;
}

.form-page-title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--white-paper) !important;
  margin: 0 !important;
}

/* Letterpress 폼 */
.letterpress-form {
  padding: 16px !important;
}

.form-errors {
  margin-bottom: 20px !important;
  padding: 16px !important;
  background: var(--red-ink-light) !important;
  border: 1px solid var(--red-ink) !important;
}

.error-title {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--red-ink) !important;
  margin: 0 0 8px 0 !important;
}

.error-list {
  margin: 0 !important;
  padding-left: 20px !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--cream-paper) !important;
}

.form-section {
  margin-bottom: 24px !important;
  padding: 20px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-light) !important;
}

.form-section-title {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--rule-light) !important;
}

.form-section-title::before {
  content: '▪ ' !important;
  color: var(--red-ink) !important;
}

.form-group {
  margin-bottom: 16px !important;
}

.form-group:last-child {
  margin-bottom: 0 !important;
}

.form-label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin-bottom: 8px !important;
}

.form-input,
.form-textarea {
  width: 100% !important;
  padding: 12px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  color: var(--white-paper) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  transition: all 0.15s ease !important;
}

.form-input:focus,
.form-textarea:focus {
  outline: none !important;
  border-color: var(--red-ink) !important;
  background: var(--proof-sheet) !important;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--worn-type) !important;
  opacity: 0.7 !important;
}

.form-textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

.form-row {
  display: flex !important;
  gap: 12px !important;
}

.form-group-half {
  flex: 1 !important;
}

.form-group-third {
  flex: 1 !important;
}

/* 라디오 버튼 그룹 */
.form-radio-group {
  display: flex !important;
  gap: 12px !important;
}

.form-radio-item {
  flex: 1 !important;
  cursor: pointer !important;
}

.form-radio-item input[type="radio"] {
  display: none !important;
}

.radio-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px !important;
  background: var(--old-paper) !important;
  border: 1px solid var(--rule-light) !important;
  transition: all 0.15s ease !important;
}

.form-radio-item input[type="radio"]:checked + .radio-label {
  background: var(--proof-sheet) !important;
  border-color: var(--red-ink) !important;
}

.radio-char {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--cream-paper) !important;
}

.form-radio-item input[type="radio"]:checked + .radio-label .radio-char {
  color: var(--red-ink) !important;
}

.radio-text {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--worn-type) !important;
}

.form-radio-item input[type="radio"]:checked + .radio-label .radio-text {
  color: var(--cream-paper) !important;
}

/* 폼 액션 */
.form-actions {
  padding: 0 16px !important;
}

.form-submit-btn {
  width: 100% !important;
  padding: 16px !important;
  background: var(--red-ink) !important;
  border: 1px solid var(--red-ink) !important;
  color: var(--white-paper) !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  letter-spacing: 0.1em !important;
}

.form-submit-btn:hover {
  background: #a33d3d !important;
}

/* 폼 반응형 */
@media (max-width: 480px) {
  .form-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .form-group-half,
  .form-group-third {
    flex: none !important;
  }
}

/* ===========================
   고민 추측 섹션
   =========================== */
.concerns-prediction-section {
  position: relative !important;
  margin: 40px 16px 80px 16px !important;
  padding: 0 !important;
  z-index: 1 !important;
}

/* --- 로딩 상태 --- */
.concerns-loading {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  min-height: 200px !important;
  padding: 40px 20px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-color) !important;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out !important;
}

.concerns-loading.concerns-fade-out {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}

.concerns-loading-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

/* 진우 도령 포트레이트 */
.jinwoo-portrait {
  position: relative !important;
  width: 120px !important;
  height: 120px !important;
}

.portrait-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  position: relative !important;
  z-index: 2 !important;
  animation: portrait-float 3s ease-in-out infinite !important;
}

.portrait-glow {
  position: absolute !important;
  inset: -8px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--red-ink-glow) 0%, transparent 70%) !important;
  animation: glow-pulse 2.5s ease-in-out infinite !important;
  z-index: 0 !important;
}

.portrait-ring {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  border: 1px solid var(--red-ink) !important;
  opacity: 0.5 !important;
  animation: ring-rotate 12s linear infinite !important;
  z-index: 1 !important;
}

.portrait-ring::before {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 1px dashed var(--rule-color) !important;
  opacity: 0.4 !important;
}

@keyframes portrait-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 로딩 텍스트 */
.concerns-loading-text {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  color: var(--cream-paper) !important;
  text-align: center !important;
  letter-spacing: 0.05em !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.concerns-loading-text.text-fade-out {
  opacity: 0 !important;
  transform: translateY(-5px) !important;
}

.concerns-loading-text.text-fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 로딩 점 */
.loading-dots {
  display: flex !important;
  gap: 8px !important;
}

.loading-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--red-ink) !important;
  animation: loading-dot-bounce 1.4s ease-in-out infinite !important;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot-bounce {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* --- 콘텐츠 영역 --- */
.concerns-content {
  opacity: 0 !important;
  transform: translateY(15px) !important;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
}

.concerns-content.concerns-fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 헤더 */
.concerns-header {
  text-align: center !important;
  padding: 28px 20px 24px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-color) !important;
  border-bottom: none !important;
}

.concerns-header-decoration {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.concerns-header-decoration .header-line {
  width: 40px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--red-ink), transparent) !important;
  opacity: 0.6 !important;
}

.concerns-header-decoration .header-diamond {
  width: 8px !important;
  height: 8px !important;
  background: var(--red-ink) !important;
  transform: rotate(45deg) !important;
  opacity: 0.7 !important;
}

.concerns-title {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: normal !important;
  color: var(--white-paper) !important;
  letter-spacing: 0.15em !important;
  margin: 0 0 10px 0 !important;
}

.concerns-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
  letter-spacing: 0.02em !important;
}

/* 고민 목록 */
.concerns-list {
  display: flex !important;
  flex-direction: column !important;
}

/* 고민 아이템 */
.concern-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-color) !important;
  border-top: none !important;
  cursor: pointer !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
  opacity: 0 !important;
  transform: translateX(-10px) !important;
}

.concern-item.concern-item-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, background 0.3s ease, border-color 0.3s ease !important;
}

.concern-item:hover {
  background: var(--old-paper) !important;
}

.concern-item.concern-selected {
  background: var(--old-paper) !important;
  border-color: var(--red-ink) !important;
  border-left: 3px solid var(--red-ink) !important;
}

.concern-item.concern-selected + .concern-item {
  border-top: 1px solid var(--rule-color) !important;
}

/* 번호 배지 */
.concern-number {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid var(--rule-color) !important;
  transition: all 0.3s ease !important;
}

.concern-selected .concern-number {
  background: var(--red-ink) !important;
  border-color: var(--red-ink) !important;
}

.concern-number-text {
  font-family: var(--font-mono) !important;
  font-size: 0.85rem !important;
  color: var(--worn-type) !important;
  transition: color 0.3s ease !important;
}

.concern-selected .concern-number-text {
  color: var(--white-paper) !important;
}

/* 질문 영역 */
.concern-question-wrap {
  flex: 1 !important;
  min-width: 0 !important;
}

.concern-question {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--cream-paper) !important;
  margin: 0 !important;
  word-break: keep-all !important;
}

/* 상세 근거 */
.concern-detail {
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.3s ease, max-height 0.3s ease !important;
}

.concern-detail.concern-detail-visible {
  opacity: 1 !important;
  max-height: 500px !important;
}

.concern-detail-divider {
  width: 40px !important;
  height: 1px !important;
  background: var(--red-ink) !important;
  margin: 12px 0 !important;
  opacity: 0.5 !important;
}

.concern-reason {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
  padding-left: 12px !important;
  border-left: 2px solid var(--red-ink-light) !important;
}

/* 펼치기 아이콘 */
.concern-expand-icon {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  opacity: 0.5 !important;
}

.concern-expand-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--worn-type) !important;
}

.concern-item:hover .concern-expand-icon {
  opacity: 1 !important;
}

.concern-selected .concern-expand-icon {
  transform: rotate(180deg) !important;
  opacity: 1 !important;
}

.concern-selected .concern-expand-icon svg {
  stroke: var(--red-ink) !important;
}

/* 푸터 */
.concerns-footer {
  padding: 20px 16px !important;
  background: var(--newsprint) !important;
  border: 1px solid var(--rule-color) !important;
  border-top: none !important;
  text-align: center !important;
}

.concerns-footer-decoration {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.footer-line {
  flex: 1 !important;
  max-width: 60px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--rule-color), transparent) !important;
}

.footer-symbol {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  color: var(--red-ink) !important;
  opacity: 0.6 !important;
}

.concerns-next-step {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: var(--worn-type) !important;
  margin: 0 !important;
}

/* 반응형 */
@media (max-width: 480px) {
  .concerns-prediction-section {
    margin: 30px 12px 60px 12px !important;
  }

  .concerns-header {
    padding: 20px 12px !important;
  }

  .concern-item {
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .concern-question {
    font-size: 0.9rem !important;
  }

  .concern-reason {
    font-size: 0.85rem !important;
  }
}