/* ==========================================================================
   Tea World Core CSS (tea-core.css)
   目的：最小限の骨格・可読性・辞典カードの型
   命名：.tw-* に限定してテーマやプラグインと衝突を避ける
   ========================================================================== */

/* ------------------------------
   CSS Variables (テーマ基調色)
   ------------------------------ */
:root {
  --tw-bg: #ffffff;
  --tw-surface: #faf7f2;           /* 紅茶の紙っぽい淡色 */
  --tw-ink: #1a1a1a;
  --tw-ink-subtle: #555;
  --tw-accent: #7a4a2f;           /* ティーブラウン */
  --tw-accent-2: #a6693d;         /* 明るめの茶 */
  --tw-border: #e6dfd6;
  --tw-link: #7a4a2f;
  --tw-link-hover: #a6693d;

  --tw-radius: 16px;
  --tw-radius-sm: 10px;
  --tw-radius-lg: 24px;

  --tw-shadow: 0 6px 20px rgba(0,0,0,.06);
  --tw-shadow-sm: 0 2px 10px rgba(0,0,0,.05);

  --tw-maxw: 72rem; /* 1152px */
  --tw-pad-x: clamp(16px, 4vw, 28px);
  --tw-flow: 1rem;  /* 段落間の基本間隔 */
}

/* ==== Brand Tokens (site theme switch) ==== */
/* デフォルト（未指定時はティーブラウン系） */
:root {
  --brand-50:  #f7efe9;
  --brand-100: #ecd9cd;
  --brand-200: #dcb69d;
  --brand-300: #c98e6a;
  --brand-400: #b56f46;
  --brand-500: #a0542b;  /* base */
  --brand-600: #834421;
  --brand-700: #65341a;
  --brand-800: #4a2613;
  --brand-900: #341a0d;

  --brand-text-on: #ffffff;       /* brand色上の文字 */
  --brand-border: var(--brand-200);

  /* 既存リンク/アクセントを brand に連動 */
  --tw-link: var(--brand-600);
  --tw-link-hover: var(--brand-400);
  --tw-accent: var(--brand-600);
  --tw-accent-2: var(--brand-400);
  --tw-border: #e6dfd6;
}

/* body.theme-ow-purple */
.theme-ow-purple {
  --brand-50:  #f4f0fa;
  --brand-100: #e6ddf5;
  --brand-200: #cbb9ea;
  --brand-300: #af95de;
  --brand-400: #9474d2;
  --brand-500: #7b57c6; /* base */
  --brand-600: #6846b0;
  --brand-700: #563a92;
  --brand-800: #432e73;
  --brand-900: #312254;
  --brand-text-on: #ffffff;
  --brand-border: #cbb9ea;
}


/* ------------------------------
   Base
   ------------------------------ */
body {
  background: var(--tw-bg);
  color: var(--tw-ink);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas,
audio,
iframe {
  max-width: 100%;
  height: auto;
}

.tw-container {
  max-width: var(--tw-maxw);
  margin-inline: auto;
  padding-inline: var(--tw-pad-x);
}

.tw-prose > * + * { margin-top: var(--tw-flow); }

.tw-prose h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.25; }
.tw-prose h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.3; }
.tw-prose h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.tw-prose p, .tw-prose li { font-size: clamp(1rem, 1.2vw, 1.05rem); }

a { color: var(--tw-link); text-decoration: none; }
a:hover, a:focus { color: var(--tw-link-hover); text-decoration: underline; }

/* フォーカス可視化（アクセシビリティ） */
:where(a, button, input, summary, [tabindex]) :focus-visible,
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tw-accent-2);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 固定ヘッダ分のアンカー飛び補正（見出し直リンク用） */
:target { scroll-margin-top: 96px; }

/* ------------------------------
   Breadcrumbs
   ------------------------------ */
.tw-breadcrumbs {
  display: flex; flex-wrap: wrap; gap: .5ch;
  font-size: .95rem; color: var(--tw-ink-subtle);
  margin: .5rem 0 1rem;
}
.tw-breadcrumbs a { color: inherit; text-decoration: none; }
.tw-breadcrumbs a:hover { text-decoration: underline; }
.tw-breadcrumbs__sep { opacity: .5; }

/* ------------------------------
   Table of Contents (目次)
   ------------------------------ */
.tw-toc {
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-sm);
  padding: 1rem 1.2rem;
  box-shadow: var(--tw-shadow-sm);
}
.tw-toc__title {
  font-weight: 600; margin: 0 0 .5rem; color: var(--tw-ink);
}
.tw-toc ol, .tw-toc ul { margin: 0; padding-left: 1.2rem; }
.tw-toc a { text-decoration: none; }
.tw-toc a:hover { text-decoration: underline; }

/* ------------------------------
   Cards（記事一覧・辞典カード）
   ------------------------------ */
.tw-grid {
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
}
@media (min-width: 640px)   { .tw-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 960px)   { .tw-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1200px)  { .tw-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.tw-card {
  background: #fff;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  overflow: clip;
  box-shadow: var(--tw-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tw-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

.tw-card__media img { display:block; width:100%; height:auto; }
.tw-card__body { padding: 1rem 1.1rem 1.2rem; }
.tw-card__title {
  font-weight: 700; line-height: 1.35; margin: 0 0 .35rem;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
}
.tw-card__meta {
  display:flex; flex-wrap:wrap; gap:.4rem .6rem;
  color: var(--tw-ink-subtle); font-size:.92rem;
}
.tw-card__excerpt { margin-top: .6rem; color: var(--tw-ink-subtle); }

/* 辞典特有のメタ（品詞・規格タグなど） */
.tw-badge {
  display:inline-block; padding:.2rem .5rem; border-radius:999px;
  background: #f2e8df; color: #5b3a23; border: 1px solid var(--tw-border);
  font-size:.82rem; line-height:1;
}

/* ------------------------------
   Article 帯・ヒーロー
   ------------------------------ */
.tw-hero {
  background: linear-gradient(180deg, #fff, var(--tw-surface));
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  padding: clamp(20px, 5vw, 48px);
  box-shadow: var(--tw-shadow);
}
.tw-hero__title { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.tw-hero__lead  { color: var(--tw-ink-subtle); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }

/* ------------------------------
   Buttons / CTA
   ------------------------------ */
.tw-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem; border-radius: 999px;
  background: var(--tw-accent); color:#fff; border:1px solid transparent;
  font-weight:600; text-decoration:none;
  transition: filter .2s ease, transform .06s ease-in-out;
}
.tw-btn:hover { filter: brightness(105%); text-decoration:none; }
.tw-btn:active { transform: translateY(1px); }
.tw-btn--ghost {
  background: transparent; color: var(--tw-accent);
  border-color: var(--tw-accent);
}

/* ------------------------------
   Tables（規格・比較表）
   ------------------------------ */
.tw-table {
  width: 100%; border-collapse: collapse; font-size: .98rem;
  background: #fff; border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-sm); overflow: hidden;
}
.tw-table th, .tw-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--tw-border); }
.tw-table thead th { background: var(--tw-surface); text-align: left; }

/* 横スクロールラッパ（小画面） */
.tw-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm);
}

/* ------------------------------
   Code / Pre
   ------------------------------ */
pre.tw-pre, code.tw-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
pre.tw-pre {
  background: #111; color: #eee; padding: 1rem 1.2rem; border-radius: var(--tw-radius-sm);
  overflow: auto; box-shadow: var(--tw-shadow-sm);
}
code.tw-code { background: #f3efe9; padding: .1rem .35rem; border-radius: 6px; }

/* ------------------------------
   Utilities
   ------------------------------ */
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  border: 0; padding: 0; white-space: nowrap; clip-path: inset(50%); clip: rect(0 0 0 0); overflow: hidden;
}
.u-flow > * + * { margin-top: var(--tw-flow); }
.u-stack-sm > * + * { margin-top: .5rem; }
.u-stack > * + *    { margin-top: 1rem; }
.u-stack-lg > * + * { margin-top: 1.5rem; }

/* ------------------------------
   Layout helpers (辞典の2カラムなど)
   ------------------------------ */
.tw-layout {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .tw-layout--aside { grid-template-columns: minmax(0,1fr) 320px; }
  .tw-aside { position: sticky; top: 88px; align-self: start; }
}

/* ------------------------------
   Tag Cloud（軽めの初期スタイル）
   ------------------------------ */
.tw-tagcloud {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
}
.tw-tagcloud a {
  display:inline-block; padding:.3rem .65rem; border-radius: 999px;
  background:#fff; border:1px solid var(--tw-border); color: var(--tw-ink);
  text-decoration:none; font-size: .95rem;
}
.tw-tagcloud a:hover { border-color: var(--tw-accent-2); color: var(--tw-accent-2); }

/* ------------------------------
   Pagination
   ------------------------------ */
.tw-pager {
  display:flex; gap:.5rem; justify-content:center; align-items:center; margin-top: 1.25rem;
}
.tw-pager a, .tw-pager span {
  padding:.5rem .8rem; border:1px solid var(--tw-border); border-radius: 10px;
  background:#fff; text-decoration:none; color: var(--tw-ink);
}
.tw-pager .is-current { background: var(--tw-surface); font-weight: 700; }

/* ------------------------------
   Reduced Motion
   ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------
   Dark Mode（自動追従の軽い調整）
   ------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --tw-bg: #0f0f0f;
    --tw-surface: #161310;
    --tw-ink: #e9e6e2;
    --tw-ink-subtle: #b9b3ad;
    --tw-border: #2a241f;
    --tw-link: #e2b08a;
    --tw-link-hover: #f0c39e;
    --tw-shadow: 0 6px 20px rgba(0,0,0,.35);
    --tw-shadow-sm: 0 2px 10px rgba(0,0,0,.3);
  }
  .tw-card,
  .tw-table,
  .tw-hero { background: #151311; }
  .tw-toc { background: #181511; }
  .tw-badge { background:#241b15; color:#e0d6cc; }
  .tw-btn--ghost { border-color: var(--tw-link); color: var(--tw-link); }
}

/* ------------------------------
   Print（簡易）
   ------------------------------ */
@media print {
  .tw-btn, .tw-pager, .tw-aside { display: none !important; }
  a { text-decoration: underline; color: #000; }
  body { background: #fff; color: #000; }
}

/* Product Card */
.tw-product {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  background: #fff;
  overflow: clip;
  box-shadow: var(--tw-shadow-sm);
}
.tw-product__media img { display:block; width:100%; height:auto; }
.tw-product__body { padding: 1rem 1.1rem 1.2rem; }
.tw-product__title { margin:0; font-weight:700; line-height:1.35; }
.tw-product__price {
  margin-top:.4rem; font-size:1.1rem; font-weight:700; color: var(--brand-700);
}
.tw-product__badge {
  display:inline-block; margin-top:.4rem;
  background: var(--brand-100); color: var(--brand-700);
  border: 1px solid var(--brand-border); border-radius: 999px;
  padding:.25rem .6rem; font-size:.82rem;
}

/* Call to Action */
.tw-btn--primary {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--brand-text-on);
}
.tw-btn--primary:hover { filter: brightness(105%); }
.tw-btn--ghost-brand {
  background: transparent; color: var(--brand-700);
  border-color: var(--brand-300);
}
.tw-kicker {
  color: var(--brand-700);
  font-weight:600; letter-spacing:.02em;
}

/* Notice / Info（クーポンやお知らせ） */
.tw-note {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--tw-ink);
  border-radius: var(--tw-radius-sm);
  padding: .75rem 1rem;
}

/* === migrated from assets/CSS/app.css === */
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.skip-links { position: absolute; left: -9999px; }
.skip-links:focus-within { position: static; }
.site-header { position: sticky; top: 0; z-index: 1000; background:#fff; border-bottom:1px solid #eee; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
.menu { list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.menu-toggle { background:transparent; border:1px solid #ddd; border-radius:8px; padding:.4rem .6rem; }
.main-navigation[hidden] { display:none; }
@media (min-width: 980px){
  .menu-toggle{ display:none; }
  .main-navigation{ display:block !important; }
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }