/* ============================================================
   base.css
   リセット / CSS変数 / フォント / ユーティリティ
   よかぺんらい - yokapenrai.com
   ============================================================ */

/* ----------------------------
   Google Fonts
---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&family=Noto+Sans+JP:wght@400;500&family=Sarabun:wght@300;400;600&display=swap');

/* ----------------------------
   CSS Variables
---------------------------- */
:root {
  /* カラー：紫 */
  --purple-deep:    #3B1F6E;
  --purple-mid:     #5C2D9B;
  --purple-light:   #8B5CCC;
  --purple-pale:    #EDE7F6;

  /* カラー：ゴールド */
  --gold-bright:    #D4A017;
  --gold-warm:      #C8971A;
  --gold-pale:      #FFF8E1;
  --gold-line:      #E8C84A;

  /* カラー：背景・テキスト */
  --bg-main:        #FDFAF5;
  --bg-card:        #FFFFFF;
  --text-main:      #1A1A2E;
  --text-body:      #2D2D3A;
  --text-muted:     #7A7A8C;
  --text-light:     #A0A0B0;
  --border:         #E8E0F5;
  --shadow:         rgba(59, 31, 110, 0.08);
  --shadow-hover:   rgba(59, 31, 110, 0.18);

  /* フォント */
  --font-serif:  'Noto Serif JP', 'Yu Mincho', serif;
  --font-sans:   'Noto Sans JP', sans-serif;
  --font-thai:   'Sarabun', sans-serif;

  /* レイアウト */
  --max-width:        760px;
  --content-padding:  clamp(1rem, 5vw, 2rem);
}

/* ----------------------------
   Reset
---------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-body);
  line-height: 1.85;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ----------------------------
   スクロールプログレスバー
---------------------------- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-bright), var(--purple-light));
  z-index: 200;
  transition: width 0.1s linear;
}

/* ----------------------------
   ユーティリティ
---------------------------- */
.thai-accent {
  font-family: var(--font-thai);
  color: var(--gold-warm);
  font-size: 0.95em;
}