:root{
  --bg:#fff7fb; --panel:#fff; --ink:#273144; --muted:#6b7280; --accent:#ec4899;
  --border:#f6d4e6; --line:#f1e2ec; --radius:14px; --menu-w:280px;
  --header-h: 88px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--ink);background:var(--bg);
     font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.6}
img{display:block;max-width:100%;height:auto}

/* ===== ヘッダー ===== */
.header-area {
  background: #ffe4e1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  border-bottom: 2px solid #ffb6c1;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  position: sticky;
  top: 0;
  z-index: 20;
  height: 88px;
}

/* タイトル中央 */
.header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInSlide .8s ease forwards;
}

@keyframes fadeInSlide{to{opacity:1; transform:translateY(0)}}

/* ロゴ画像 */
.header-title-img {
  height: 48px;
  image-rendering: auto;
}

/* タルタルGIF左右配置 */
.header-gif {
  height: 64px;
  width: auto;
  object-fit: contain;
}

/* 右側のタルタルを反転 */
.header-gif.right {
  transform: scaleX(-1);
}

/* ===== レイアウト ===== */
.layout {
  display: grid;
  grid-template-columns: var(--menu-w) 1fr;
  min-height: calc(100dvh - var(--header-h));
}

/* サイドバー全体の雰囲気をふわっと */
.sidebar{
  border-right: none;
  background: linear-gradient(180deg,#fff,#fff7fb);
  position: sticky; top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  overflow: auto; 
  padding: 14px 12px 20px;
  width: var(--menu-w);
}

/* メニューをカードに収める（余白＆影） */
.menu{
  list-style:none; margin:0; padding:12px;
  background:#ffffffcc; backdrop-filter: blur(2px);
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(236,72,153,.08);
  display:flex; flex-direction:column; gap:10px;
}

/* セクション見出しをカプセルに */
.group-label{
  display:inline-block;
  padding:2px 10px;
  margin:6px 0 2px 4px;
  font-weight:700; font-size:.78rem; letter-spacing:.04em;
  color:#ad5c7c;
  background:#ffeaf3;
  border:1px solid #f6d4e6;
  border-radius:999px;
}

/* メニュー項目（ボタン風＋やわらか影） */
.menu-item{
  position:relative;
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:11px 12px 11px 18px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  transition: transform .12s ease, background .2s, border-color .2s, box-shadow .2s;
  text-align:left;
}
.menu-item:hover{
  transform: translateX(2px);
  background:#fff6fb;
  border-color:#f0c3d7;
  box-shadow:0 6px 18px rgba(236,72,153,.12);
}
.menu-item.is-active{
  background: linear-gradient(180deg,#fff6fb 0%, #ffffff 100%);
  border-color:#eea5c7;
  box-shadow:0 10px 26px rgba(236,72,153,.16);
}
/* アクティブ左バー */
.menu-item.is-active::before{
  content:"";
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:4px; height:70%;
  background: var(--accent);
  border-radius:3px;
}
/* テキスト */
.menu-text{ flex:1; font-weight:700; letter-spacing:.02em; }

/* キーボード操作の見やすい枠 */
.menu-item:focus-visible{
  outline: 3px solid rgba(236,72,153,.35);
  outline-offset: 2px;
}

/* スクロールバー（Windows配慮で控えめ） */
.sidebar::-webkit-scrollbar{ width:10px }
.sidebar::-webkit-scrollbar-thumb{
  background:#f2d6e5; border-radius:999px; border:2px solid #fff;
}

/* 右ペイン */
.main{ 
  padding:16px; 
  min-height:calc(100dvh - var(--header-h));
  overflow-x: auto;
}

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 10px 26px rgba(236,72,153,.08); 
  max-width: 880px; 
  margin: 0 auto;
}

.content-title{margin:0 0 8px}.content-desc{margin:0 0 10px;color:var(--muted)}

/* カードのサムネ：素の画像をそのまま表示（背景/枠なし） */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:16px 0;
  padding:14px 12px;    /* 余白を気持ちコンパクトに */
  box-shadow:0 4px 14px rgba(236,72,153,.08);
  display:flex;
  gap:10px;             /* すこしだけ詰める（今が広いなら） */
  align-items:center;   /* 画像とテキストを中央揃え */
}

/* サムネはそのまま"素のまま表示"をキープ */
.card-img {
  width:84px; height:84px; flex:0 0 84px; 
  object-fit:cover;         /* contain から cover に変更 */
  background:transparent; border:none; padding:0; filter:none;
  border-radius: 0;         /* 枠の角を丸めない */
  box-shadow: none;         /* 影を削除 */
  image-rendering: auto;
}

.card-body{flex:1; min-width:0;}

/* 見出しと本文のメリハリ */
.card-title{
  margin:0 0 2px;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--ink);
}
.card-desc{
  margin:0 0 6px;
  line-height:1.7;       /* 日本語が読みやすい行間 */
  color:#555;            /* ほんの少し濃く */
}

.card-actions{display:flex; flex-wrap:wrap; gap:10px;}

/* 「詳細を見る」などのリンクをボタン風にしすぎない・でも見失わない */
.card-link{
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight:700;
  color:var(--accent);
}
.card-link:hover{ opacity:.85; }

.card-badges{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.badge{font-size:.8rem;padding:2px 8px;border-radius:999px;background:#ffeaf3;border:1px solid #f6d4e6}
.badge.ongoing{background:#e6ffef;border-color:#b7f3c7}
.badge.upcoming{background:#fffbe6;border-color:#f3e3a8}
.badge.ended{opacity:.6}

/* 小画面で少し小さく */
@media (max-width: 520px){
  .card{ padding:12px 10px; gap:8px; }
  .card-img{ width:72px; height:72px; flex-basis:72px; }
}

@media (max-width:960px){
  :root{--menu-w:260px}
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:none;padding:10px}
  .header-area{position:static;height:auto}
}

/* 色トークン用クラス */
.v-pink { 
  color:#ff6699; 
  font-weight:600; /* 少し太字で視認性UP */
}
.v-sky {
  color:#3b82f6;   /* 以前: #66ccff */
  font-weight:600; /* 少し太字で視認性UP */
}
.v-gold { 
  color:#d4a123; 
  font-weight:600; /* 少し太字で視認性UP */
}
.v-red  { 
  color:#ef4444; 
  font-weight:600; /* 少し太字で視認性UP */
}

/* カードグリッドレイアウト */
.card-grid {
  display: grid; 
  gap: 12px;
}

/* デイリーカード用の画像スタイル */
.daily-card .card-img {
  max-width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 12px;
}

/* アイコン用スタイル */
/* 基本 */
.v-icon{
  width: 1.05em; height: 1.05em;
  vertical-align: -0.15em;
  object-fit: contain; display:inline-block;
  margin: 0 .2em;
}

/* プリセット */
.v-icon-sm{ width:14px; height:14px; }
.v-icon-md{ width:18px; height:18px; } /* 既定に近い */
.v-icon-lg{ width:22px; height:22px; }

/* 数字指定（例: v-icon-n20）に対応 */
[class*="v-icon-n"]{ height:auto; } /* 高さは画像比で自動 */

/* パンくずナビゲーション用スタイル */
.v-path{ 
  display:inline-flex; 
  gap:.25em; 
  align-items:center; 
}
.v-path > span,
.v-path > a{ 
  position:relative; 
  padding-left:.5em; 
}
.v-path > span::before,
.v-path > a::before{ 
  content:"›"; 
  position:absolute; 
  left:0; 
  opacity:.45; 
}
.v-path > span:first-child,
.v-path > a:first-child{ 
  padding-left:0; 
}
.v-path > span:first-child::before,
.v-path > a:first-child::before{ 
  content:""; 
}
.v-path-last{ 
  font-weight:700; 
  text-decoration:none; 
}
.v-path-last:hover{ 
  text-decoration:underline; 
}

/* テーブル用スタイル */
.table-wrap{overflow-x:auto}
.mofu-table{
  border-collapse:collapse; min-width:520px; width:100%;
  font-size:0.95rem; background:#fff;
  border:1px solid #f1e2ec;
}
.mofu-table caption{padding:6px 8px; color:#6b7280; text-align:left}
.mofu-table th,.mofu-table td{
  border:1px solid #f1e2ec; padding:6px 8px; text-align:center;
}
.mofu-table thead th{
  background:#fff7fb; font-weight:600;
}
.mofu-table tbody tr:nth-child(even){ background:#fffafc }

/* 4列目（用途メモ）を左寄せ */
.mofu-table th:nth-child(4),
.mofu-table td:nth-child(4) {
  text-align: left;
}

/* ウォンテッド表：2列目のヘッダーにMAPアイコンを表示（JS変更なし） */
.mofu-table thead th:nth-child(2)::after {
  content: "";
  display: inline-block;
  width: 16px;           /* アイコン幅 */
  height: 16px;          /* アイコン高 */
  margin-left: 6px;      /* 文字との間隔 */
  vertical-align: text-bottom;
  background-image: url("/FFXI/vanamofu/assets/images/icons/MAP_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* テーブルセル内のハイライト用 */
.hl-pink { color:#e11d48; font-weight:700; }