/**
 * shared.css - 증명수학 공통 스타일
 * 
 * Include in every page:
 * <link rel="stylesheet" href="css/shared.css">
 * 
 * Centralizes:
 * - Font families (EB Garamond, Pretendard)
 * - Color tokens / CSS vars
 * - Reusable classes: .heading-serif, .paper-texture, .concept-card, .filter-chip, .modal, .book-spine, .premium-button etc.
 * 
 * Page-specific overrides go in <style> in the HTML or page-*.css
 * 
 * To change global look (colors, fonts): edit here.
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Noto+Serif+KR:wght@400;500;600&display=swap');

:root {
  --bg: #F7F3EB;
  --paper: #F9F6F0;
  --wood: #3F2E23;
  --wood-light: #5C4636;
  --ink: #1F2A3A;
  --accent: #B38B5E;
  --accent-dark: #8C6640;
  --forest: #2F3F36;
  --workroom: #163B46;
  --workroom-soft: #DDEBEA;
  --signal: #C85F4A;
  --border: #EDE5D8;

  /* tailwind-config.js 색 토큰과 1:1 (<style>/인라인 CSS에서도 var()로 참조) */
  --wood-dark: #2A211A;
  --accent-light: #C5A46E;
  --workroom-dark: #0F2F38;
  --sand: #D4C9B3;
  --linen: #F0E9DC;
  --parchment: #F1E9DC;
  --taupe: #7A6A58;
  --taupe-light: #8A7B6A;

  /* 표면·구분선 (대시보드 카드 등) */
  --surface-raised: #FFFCF6;
  --border-warm: #D8CEBA;
  --divider: #E7DDCC;
  --wood-muted: #6F6253;

  /* 콜아웃·상태 색 (퀴즈/피드백) */
  --callout-warn-bg: #FFFBEB;
  --success: #4ADE80;
  --success-soft: #D1FAE5;
  --danger: #F87171;
  --danger-soft: #FEE2E2;

  /* 학습 시트 카테고리 톤 (데이터-비주얼) */
  --tone-strong: #6F7F4E;
  --tone-geometry: #7A3F3F;
  --tone-default: #2F5D62;

  /* elevation (그림자 스케일) — 중립 검정 그림자 */
  --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-book-hover: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-pdf: 0 4px 12px rgb(0 0 0 / 0.15);
  --shadow-pdf-soft: 0 2px 8px rgb(0 0 0 / 0.1);
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg);
  color: var(--ink);
  /* 한글은 어절(단어) 단위로만 줄바꿈 — '스타일'이 '스/타일'로 잘리는 것 방지.
     폭을 넘는 긴 영문/URL 은 그때만 분리해 가로 오버플로우를 막는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.heading-serif,
.section-title {
  font-family: 'EB Garamond', 'Noto Serif KR', Georgia, 'Times New Roman', serif;
  font-feature-settings: "liga" 1, "tnum" 1;
  letter-spacing: -0.02em;
}

.paper-texture {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 25% 30%, rgba(63,46,35,0.035) 0.8px, transparent 0.8px),
    radial-gradient(circle at 75% 70%, rgba(63,46,35,0.025) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}

/* 히어로 도트 그리드 — Tailwind arbitrary hex(bg-[#…]) 대신 재사용 유틸(브랜드 wood 색). */
.dot-grid-wood {
  background-image: radial-gradient(rgba(63, 46, 35, 1) 0.8px, transparent 0.8px);
  background-size: 3px 3px;
}

.concept-card {
  transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0.0, 0.2, 1),
              border-color 0.2s;
  border: 1px solid var(--border);
}

.concept-card:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 
              0 8px 10px -6px rgb(0 0 0 / 0.1);
  border-color: #D4C9B3;
}

.filter-chip {
  transition: all 0.1s ease;
}

.filter-chip.active {
  background-color: var(--wood);
  color: var(--paper);
  border-color: var(--wood);
}

.nav-link {
  position: relative;
  transition: color 0.15s ease;
}

.nav-link:after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--accent);
  transition: width 0.2s ease;
}

.nav-link:hover:after {
  width: 100%;
}

.modal {
  animation: modalEnter 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.book-spine {
  width: 5px;
  background: linear-gradient(to bottom, var(--wood), var(--wood-light), var(--wood));
}

.premium-button {
  transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.premium-button:hover {
  background-color: var(--accent-dark);
  transform: translateY(-1px);
}

.store-header {
  background: var(--wood);
  color: var(--bg);
}

.subtle-gold {
  color: var(--accent);
}

.concept-title {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.book-card-inner {
  position: relative;
}

.book-card-inner:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--wood) 0%, var(--wood-light) 50%, var(--wood) 100%);
}

.stat-number {
  font-variant-numeric: tabular-nums;
}

.math-text {
  font-family: 'EB Garamond', Georgia, serif;
  font-feature-settings: "tnum";
}

.shelf-shadow {
  box-shadow: inset 0 30px 30px -15px rgba(0,0,0,0.25),
              0 10px 10px -5px rgba(0,0,0,0.1);
}

.workroom-panel {
  background:
    linear-gradient(135deg, rgba(22,59,70,0.96), rgba(31,42,58,0.96)),
    radial-gradient(circle at 20% 20%, rgba(221,235,234,0.12), transparent 28%);
  color: #F9F6F0;
}

.workroom-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(221,235,234,0.32);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  color: #DDEBEA;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.workroom-card {
  border: 1px solid rgba(22,59,70,0.16);
  background: rgba(255,255,255,0.72);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.workroom-card:hover {
  transform: translateY(-2px);
  border-color: rgba(22,59,70,0.38);
  box-shadow: 0 12px 24px -18px rgba(31,42,58,0.55);
}

.focus-ring:focus-visible {
  outline: 2px solid var(--workroom);
  outline-offset: 3px;
}

/* Global keyboard focus — markup uses Tailwind `outline-none` on inputs, so restore
   a visible focus indicator for every interactive element (color-only :focus is not enough). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  /* outline follows each element's own border-radius in modern browsers —
     do NOT set border-radius here or rounded-full controls square off on focus */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Common footer / misc */
.pm-footer {
  border-top: 1px solid var(--border);
  color: var(--wood-light);
  font-size: 12px;
}

.pm-mobile-only,
.pm-tablet-only {
  display: none !important;
}

.pm-desktop-only {
  display: initial !important;
}

.pm-mobile-bottom-nav {
  display: none;
}

.pm-tablet-context-bar {
  display: none;
}

@media (max-width: 767px) {
  body.pm-has-mobile-bottom-nav {
    padding-bottom: 82px;
  }

  .pm-mobile-only {
    display: block !important;
  }

  .pm-tablet-only,
  .pm-desktop-only {
    display: none !important;
  }

  .pm-mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(237, 229, 216, 0.95);
    border-radius: 22px;
    background: rgba(249, 246, 240, 0.96);
    box-shadow: 0 18px 42px -22px rgba(31, 42, 58, 0.58);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .pm-mobile-bottom-nav a {
    min-height: 50px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--wood-light);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .pm-mobile-bottom-nav a.is-active {
    background: var(--wood);
    color: var(--paper);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pm-mobile-only,
  .pm-desktop-only {
    display: none !important;
  }

  .pm-tablet-only {
    display: block !important;
  }

  .pm-tablet-context-bar {
    display: block;
    border-bottom: 1px solid var(--border);
    background: rgba(249, 246, 240, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .pm-tablet-context-bar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 0 14px;
    color: var(--wood-light);
    white-space: nowrap;
  }

  .pm-tablet-context-bar a:hover,
  .pm-tablet-context-bar a.is-active {
    background: white;
    color: var(--wood);
  }
}

@media (min-width: 1024px) {
  .pm-mobile-only,
  .pm-tablet-only {
    display: none !important;
  }

  .pm-desktop-only {
    display: block !important;
  }
}

/* Toast already styled in JS for flexibility */

/* 히어로 등 배경 이미지 위 텍스트 가독성 — 배경 밝기와 무관하게 외곽 대비를 만든다.
   오버레이만으로는 이미지의 밝은 영역 위에서 밝은 텍스트가 묻히므로, ink 색 그림자로
   글자 외곽을 눌러 어떤 배경에서도 읽히게 한다. (ink #1F2A3A = rgb(31,42,58)) */
.text-legible-on-image {
  text-shadow: 0 1px 3px rgba(31, 42, 58, 0.9), 0 2px 14px rgba(31, 42, 58, 0.6);
}