/*
 * 最強！吉日カレンダー — スタイルシート
 *
 * カスケードは @layer で明示的に管理する（後方ほど優先）。
 *   tokens      … デザイントークン（:root のカスタムプロパティ）
 *   base        … リセットと土台（要素デフォルト・body・アプリ枠）
 *   components  … ヘッダー/ナビ/カレンダー/パネル/シート等のUI部品
 *   utilities   … アクセシビリティ等の上書き（prefers-reduced-motion）
 */
@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* 和紙・墨・金箔のパレット */
    --washi: #f4ecde;
    --washi-2: #ece0cb;
    --washi-3: #e2d3b8;
    --paper-card: #fbf6ec;
    --sumi: #2a1c12;
    --sumi-2: #4c3829;
    --sumi-3: #6f5944;
    --sumi-4: #8a755f;
    --gold-1: #e7c971;
    --gold-2: #c9a234;
    --gold-3: #9a7b2a;
    --gold-4: #6f5519;
    --aka: #9a1f1f;
    --ai: #27486f;
    --kuro: #36302b;

    --line: #d6c6a6;
    --line-soft: #e4d8bf;

    /* 流体タイポ */
    --fs-day: clamp(15px, 4.6vw, 22px);
    --fs-rokuyou: clamp(9px, 2.6vw, 12px);
    --fs-badge: clamp(8px, 2.4vw, 10.5px);

    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-card: 0 8px 30px rgba(42, 24, 14, 0.16);
    --radius: 12px;
  }
}

@layer base {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family:
      "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho",
      "Noto Serif JP", Georgia, serif;
    color: var(--sumi);
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
    background-color: var(--washi);
    background-image:
      radial-gradient(
        circle at 18% 12%,
        rgba(201, 162, 52, 0.08),
        transparent 42%
      ),
      radial-gradient(
        circle at 84% 78%,
        rgba(154, 31, 31, 0.05),
        transparent 46%
      ),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='1' cy='1' r='0.55' fill='%23bda06f' opacity='0.22'/%3E%3C/svg%3E");
    display: flex;
    justify-content: center;
  }

  .app {
    width: 100%;
    max-width: 720px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
      linear-gradient(
        to bottom,
        rgba(255, 253, 248, 0.35),
        rgba(255, 253, 248, 0)
      );
  }
}

@layer components {
  @media (min-width: 760px) {
    :root {
      --fs-day: 25px;
      --fs-rokuyou: 13px;
      --fs-badge: 11px;
    }
    .app {
      max-width: 1040px;
      margin: 22px 0;
      min-height: auto;
      border-radius: 22px;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(154, 123, 42, 0.25);
    }
    /* overflow:hidden を使うと sticky が効かなくなるため、角丸は端の要素側で持つ */
    .app > header.site-header {
      border-radius: 22px 22px 0 0;
    }
    .app > footer.site-footer {
      border-radius: 0 0 22px 22px;
    }
    .calendar {
      padding: 18px 24px 30px;
    }
    .weekday-row,
    .days-grid {
      gap: 8px;
    }
    .weekday-row span {
      font-size: 14px;
      padding: 6px 0;
    }
    .day-cell {
      min-height: 134px;
      border-radius: 11px;
      padding: 10px 10px 9px;
    }
    .day-badges {
      gap: 3px;
    }
    .badge {
      padding: 1px 6px;
    }
    /* PCでは角の帯を大きく目立たせる
       （.day-cell を付けて詳細度を上げ、後方にある基本定義に勝たせる） */
    .day-cell .saikyo-ribbon,
    .day-cell .kyou-ribbon {
      font-size: 12px;
      width: 94px;
      padding: 2px 0;
      top: 15px;
      right: -23px;
      letter-spacing: 0.08em;
    }
    .ad-placeholder {
      height: 90px;
      margin: 6px 24px 4px;
    }
  }
  @media (min-width: 1100px) {
    .app {
      max-width: 1100px;
    }
  }

  /* ---------- Header ---------- */
  /* タイトル帯はスクロールで流れる（月ナビが上部に固定される） */
  header.site-header {
    position: relative;
    z-index: 100;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
    text-align: center;
    background:
      linear-gradient(160deg, #20100a 0%, #3e2212 52%, #1c0d07 100%);
    box-shadow: 0 3px 16px rgba(28, 13, 7, 0.55);
    overflow: hidden;
  }
  header.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23e7c971' stroke-width='0.4' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
  }
  .site-title {
    position: relative;
    font-size: clamp(19px, 5.6vw, 26px);
    font-weight: 800;
    letter-spacing: 0.14em;
    background: linear-gradient(
      100deg,
      #c9a234 0%,
      #f4dd97 28%,
      #fff6d8 42%,
      #f4dd97 56%,
      #c9a234 100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: foilShimmer 7s linear infinite;
  }
  @keyframes foilShimmer {
    to {
      background-position: 250% center;
    }
  }
  .site-subtitle {
    position: relative;
    font-size: clamp(10px, 2.8vw, 12px);
    color: #b59669;
    letter-spacing: 0.26em;
    margin-top: 5px;
  }

  /* ---------- Nav ---------- */
  /* 月ナビはスクロール時に画面上部へ固定する */
  .nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(to bottom, var(--washi-2), var(--washi));
    border-bottom: 1px solid var(--line);
    box-shadow: 0 3px 10px rgba(42, 24, 14, 0.07);
  }
  .nav-btn {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--gold-3);
    background:
      radial-gradient(circle at 35% 30%, #fffdf6, #efe2c9);
    color: var(--sumi);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition:
      transform 0.18s var(--ease-spring),
      box-shadow 0.18s,
      background 0.18s;
    box-shadow: 0 2px 6px rgba(122, 92, 32, 0.18);
  }
  .nav-btn:hover {
    background: radial-gradient(circle at 35% 30%, #fffef9, #f4e8d2);
  }
  .nav-btn:active {
    transform: scale(0.9);
    box-shadow: 0 1px 3px rgba(122, 92, 32, 0.22);
  }
  .nav-btn:focus-visible {
    outline: 2px solid var(--gold-2);
    outline-offset: 2px;
  }
  .nav-month {
    flex: 1;
    text-align: center;
    line-height: 1.05;
  }
  .nav-year {
    font-size: clamp(11px, 3vw, 13px);
    color: var(--sumi-4);
    letter-spacing: 0.12em;
  }
  .nav-m {
    font-size: clamp(26px, 8vw, 34px);
    font-weight: 800;
    color: var(--sumi);
    letter-spacing: 0.05em;
  }
  .nav-m .m-unit {
    font-size: 0.5em;
    margin-left: 2px;
    color: var(--sumi-3);
  }
  .today-btn {
    display: block;
    margin: 0 auto 2px;
    padding: 2px 12px;
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: 0.08em;
    color: var(--gold-4);
    background: rgba(201, 162, 52, 0.12);
    border: 1px solid var(--gold-3);
    border-radius: 20px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s var(--ease-spring);
  }
  .today-btn.show {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .today-btn:active {
    transform: scale(0.94);
  }

  /* ---------- Ad ---------- */
  .ad-placeholder {
    margin: 6px 12px 2px;
    height: 56px;
    border: 1px dashed #c4ab80;
    border-radius: var(--radius);
    background:
      repeating-linear-gradient(
        45deg,
        rgba(228, 216, 191, 0.5) 0 10px,
        rgba(244, 236, 222, 0.5) 10px 20px
      );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a9906a;
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  /* ---------- Calendar ---------- */
  .calendar {
    padding: 10px clamp(6px, 2vw, 14px) 18px;
  }
  .weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(3px, 1.2vw, 7px);
    margin-bottom: 6px;
  }
  .weekday-row span {
    text-align: center;
    font-size: clamp(10px, 3vw, 13px);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 0;
    color: var(--sumi-3);
  }
  .weekday-row span:first-child {
    color: var(--aka);
  }
  .weekday-row span:last-child {
    color: var(--ai);
  }

  .days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(3px, 1.2vw, 7px);
  }
  .days-grid.anim-next {
    animation: gridNext 0.34s var(--ease-out);
  }
  .days-grid.anim-prev {
    animation: gridPrev 0.34s var(--ease-out);
  }
  .days-grid.anim-fade {
    animation: gridFade 0.3s var(--ease-out);
  }
  @keyframes gridNext {
    from { opacity: 0.25; transform: translateX(26px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes gridPrev {
    from { opacity: 0.25; transform: translateX(-26px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes gridFade {
    from { opacity: 0.3; }
    to { opacity: 1; }
  }

  .day-cell {
    position: relative;
    min-height: clamp(72px, 19vw, 124px);
    padding: clamp(4px, 1.4vw, 8px) clamp(3px, 1.2vw, 7px);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    background: rgba(255, 254, 250, 0.72);
    cursor: pointer;
    overflow: hidden;
    touch-action: manipulation;
    display: flex;
    flex-direction: column;
    animation: cellIn 0.4s var(--ease-out) both;
    transition:
      transform 0.15s var(--ease-spring),
      border-color 0.15s,
      box-shadow 0.15s;
  }
  @keyframes cellIn {
    from { opacity: 0; transform: translateY(7px) scale(0.97); }
    to { opacity: 1; transform: none; }
  }
  @media (hover: hover) {
    .day-cell:hover {
      border-color: var(--gold-2);
      box-shadow: 0 4px 14px rgba(122, 92, 32, 0.16);
      transform: translateY(-2px);
      z-index: 2;
    }
  }
  .day-cell:active {
    transform: scale(0.96);
  }
  .day-cell:focus-visible {
    outline: 2px solid var(--gold-2);
    outline-offset: 1px;
    z-index: 3;
  }
  .day-cell.empty {
    background: transparent;
    border-color: transparent;
    pointer-events: none;
    animation: none;
  }

  /* スコアによる地色 */
  .day-cell.sc-kichi {
    background: linear-gradient(
      165deg,
      rgba(201, 162, 52, 0.08),
      rgba(255, 254, 248, 0.85)
    );
  }
  .day-cell.sc-daikichi {
    background: linear-gradient(
      165deg,
      rgba(201, 162, 52, 0.25),
      rgba(255, 252, 242, 0.93)
    );
    border-color: rgba(201, 162, 52, 0.65);
  }
  .day-cell.sc-saikyo {
    background: linear-gradient(
      155deg,
      rgba(231, 201, 113, 0.58),
      rgba(255, 249, 222, 0.96)
    );
    border: 2px solid var(--gold-2);
    box-shadow:
      0 0 0 1px rgba(231, 201, 113, 0.6) inset,
      0 5px 20px rgba(201, 162, 52, 0.42);
    animation:
      cellIn 0.4s var(--ease-out) both,
      saikyoGlow 2.6s ease-in-out infinite;
  }
  /* 最強開運日: 斜めの光が流れるシマー */
  .day-cell.sc-saikyo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      115deg,
      transparent 32%,
      rgba(255, 248, 214, 0.72) 48%,
      transparent 64%
    );
    background-size: 250% 100%;
    animation: goldSweep 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes goldSweep {
    0% { background-position: 175% 0; }
    100% { background-position: -75% 0; }
  }
  .day-cell.sc-saikyo .day-head,
  .day-cell.sc-saikyo .day-badges {
    position: relative;
    z-index: 1;
  }
  @keyframes saikyoGlow {
    0%, 100% {
      box-shadow:
        0 0 0 1px rgba(201, 162, 52, 0.5) inset,
        0 4px 14px rgba(201, 162, 52, 0.32);
    }
    50% {
      box-shadow:
        0 0 0 1px rgba(231, 201, 113, 0.95) inset,
        0 6px 26px rgba(231, 201, 113, 0.72);
    }
  }
  .day-cell.sc-chui {
    background: linear-gradient(
      165deg,
      rgba(54, 48, 43, 0.14),
      rgba(248, 244, 238, 0.8)
    );
    border-color: rgba(54, 48, 43, 0.4);
  }
  /* 大凶: くすんだ朱の細枠＋淡いグレー地で控えめに警告（主役は吉日） */
  .day-cell.sc-daikyo {
    background: linear-gradient(
      165deg,
      rgba(86, 58, 52, 0.12),
      rgba(247, 242, 235, 0.82)
    );
    border-color: rgba(112, 52, 46, 0.5);
  }
  .day-cell.today {
    border-color: rgba(154, 31, 31, 0.55);
    box-shadow:
      0 0 0 2px rgba(154, 31, 31, 0.16),
      0 4px 14px rgba(154, 31, 31, 0.16);
  }

  .day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
  }
  .day-num {
    font-size: var(--fs-day);
    font-weight: 800;
    line-height: 1;
    color: var(--sumi);
  }
  .day-cell.sunday .day-num {
    color: var(--aka);
  }
  .day-cell.saturday .day-num {
    color: var(--ai);
  }
  /* 今日は数字を朱色の丸で囲んで一目で分かるように（曜日色より優先） */
  .day-cell.today .day-head {
    align-items: center;
  }
  .day-cell.today .day-num {
    color: #fff;
    background: var(--aka);
    min-width: 1.7em;
    height: 1.7em;
    padding: 0 0.2em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(154, 31, 31, 0.4);
  }
  .day-rokuyou {
    font-size: var(--fs-rokuyou);
    color: var(--sumi-4);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  /* スマホは六曜を日付の下に置き、その分マスを高く（全マス均一）。PCはそのまま */
  @media (max-width: 759px) {
    .day-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
    }
    .day-cell.today .day-head {
      align-items: flex-start;
    }
    .day-cell {
      min-height: clamp(98px, 26vw, 132px);
    }
  }

  .day-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: auto;
    padding-top: 3px;
  }
  .badge {
    font-size: var(--fs-badge);
    line-height: 1.45;
    padding: 0.5px 4px;
    border-radius: 4px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  /* 吉 */
  .b-tensha {
    background: linear-gradient(135deg, #c9a234, #f4dd97);
    color: #3a2400;
    box-shadow: 0 1px 3px rgba(201, 162, 52, 0.4);
  }
  .b-ichi {
    background: linear-gradient(135deg, #a82b2b, #c75151);
    color: #fff;
  }
  .b-kishuku {
    background: linear-gradient(135deg, #5c3a86, #8059b0);
    color: #fff;
  }
  .b-kishi { background: #3a6e3a; color: #fff; }
  .b-mi { background: #4a7a48; color: #fff; }
  .b-tora { background: #c0791f; color: #fff; }
  .b-koushi { background: #2b5183; color: #fff; }
  .b-yoshi {
    background: rgba(201, 162, 52, 0.16);
    color: var(--gold-4);
    border: 1px solid rgba(154, 123, 42, 0.45);
  }
  /* 凶 */
  .b-kyou {
    background: rgba(54, 48, 43, 0.82);
    color: #e7ddd2;
  }
  .b-more {
    background: transparent;
    color: var(--sumi-4);
    border: 1px dashed var(--sumi-4);
  }

  .day-seal {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: clamp(8px, 2.3vw, 10px);
    color: var(--gold-2);
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 1px 1px rgba(255, 250, 235, 0.8);
    pointer-events: none;
  }
  /* 角の帯（最強＝金、大凶＝朱）。右上をたすき掛けする。
     固定幅＋text-align:center で、文字を帯の中央に置く */
  .saikyo-ribbon,
  .kyou-ribbon {
    position: absolute;
    top: 5px;
    right: -16px;
    width: 54px;
    padding: 1px 0;
    text-align: center;
    transform: rotate(45deg);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    pointer-events: none;
  }
  .saikyo-ribbon {
    background: linear-gradient(135deg, #c9a234, #f4dd97);
    color: #3a2400;
    box-shadow: 0 1px 4px rgba(122, 92, 32, 0.45);
  }
  .kyou-ribbon {
    background: linear-gradient(135deg, #6e2626, #8a3030);
    color: #f4e3df;
    box-shadow: 0 1px 4px rgba(60, 20, 18, 0.4);
  }

  /* ---------- Footer ---------- */
  footer.site-footer {
    text-align: center;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
    color: var(--sumi-4);
    font-size: 11px;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--line-soft);
    margin-top: auto;
  }

  /* ---------- Detail Panel ---------- */
  .panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 12, 5, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .detail-panel {
    position: fixed;
    z-index: 201;
    background: var(--paper-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23c7ad7d' opacity='0.18'/%3E%3C/svg%3E");
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    /* 閉じている間はクリックを奪わず、キーボード/AT からも隠す */
    pointer-events: none;
    visibility: hidden;
  }
  /* モバイル: ボトムシート */
  .detail-panel {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86dvh;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 40px rgba(26, 12, 5, 0.4);
    transform: translateY(101%);
    transition:
      transform 0.42s var(--ease-spring),
      visibility 0s linear 0.42s;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  }
  .detail-panel.open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.42s var(--ease-spring);
  }
  /* PC: 中央モーダル */
  @media (min-width: 720px) {
    .detail-panel {
      left: 50%;
      right: auto;
      bottom: auto;
      top: 50%;
      width: min(560px, 92vw);
      max-height: 86dvh;
      border-radius: 18px;
      box-shadow: var(--shadow-card);
      transform: translate(-50%, -46%) scale(0.96);
      opacity: 0;
      transition:
        transform 0.34s var(--ease-spring),
        opacity 0.34s ease,
        visibility 0s linear 0.34s;
      padding-bottom: 22px;
    }
    .detail-panel.open {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      transition:
        transform 0.34s var(--ease-spring),
        opacity 0.34s ease;
    }
  }

  .panel-handle {
    width: 42px;
    height: 4px;
    background: #cdb78f;
    border-radius: 3px;
    margin: 11px auto 6px;
  }
  .panel-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(54, 48, 43, 0.08);
    color: var(--sumi-3);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, transform 0.18s;
  }
  .panel-close:hover {
    background: rgba(54, 48, 43, 0.16);
  }
  .panel-close:active {
    transform: scale(0.9);
  }

  .panel-head {
    padding: 4px 22px 16px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
  }
  .panel-date-text {
    font-size: clamp(20px, 5.6vw, 24px);
    font-weight: 800;
    color: var(--sumi);
    letter-spacing: 0.03em;
  }
  .panel-meta {
    font-size: clamp(11px, 3vw, 13px);
    color: var(--sumi-4);
    margin-top: 5px;
    letter-spacing: 0.04em;
  }
  .panel-score-wrap {
    margin-top: 12px;
  }
  .score-pill {
    display: inline-block;
    padding: 5px 22px;
    border-radius: 26px;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 800;
    letter-spacing: 0.06em;
    animation: pillPop 0.4s var(--ease-spring) both;
  }
  @keyframes pillPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }
  .s-saikyo {
    background: linear-gradient(120deg, #c9a234, #f6e3a3, #c9a234);
    background-size: 200% auto;
    color: #3a2200;
    box-shadow: 0 3px 14px rgba(201, 162, 52, 0.5);
    animation:
      pillPop 0.4s var(--ease-spring) both,
      foilShimmer 4s linear infinite;
  }
  .s-daikichi { background: #7a1414; color: #fff; }
  .s-kichi { background: #8a4010; color: #fff; }
  .s-futsu { background: #7a7060; color: #fff; }
  .s-chui { background: #443c38; color: #e6dcd2; }
  .s-daikyo {
    background: linear-gradient(120deg, #1c1712, #473a31, #1c1712);
    color: #f2cccc;
    box-shadow: 0 3px 14px rgba(18, 11, 7, 0.55);
  }

  .panel-note {
    display: none;
    margin: 9px auto 0;
    max-width: 30em;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.55;
    color: var(--sumi-4);
    background: rgba(201, 162, 52, 0.1);
    border: 1px solid rgba(201, 162, 52, 0.28);
    border-radius: 8px;
    padding: 6px 10px;
  }
  /* 最悪日の注記は朱系で */
  .panel-note.is-bad {
    color: var(--sumi-3);
    background: rgba(154, 31, 31, 0.08);
    border-color: rgba(154, 31, 31, 0.28);
  }

  .panel-body {
    padding: 16px clamp(16px, 5vw, 24px) 8px;
  }

  /* 階級イラスト枠（画像が無い間は和風の印章を表示） */
  .panel-illust {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    margin: 2px auto 16px;
    animation: sectionIn 0.4s var(--ease-out) both;
  }
  .illust-img {
    width: clamp(150px, 56%, 280px);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(42, 24, 14, 0.28));
    animation: illustPop 0.5s var(--ease-spring) both;
  }
  @keyframes illustPop {
    from { opacity: 0; transform: scale(0.82) translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .panel-illust.has-img .illust-seal {
    display: none;
  }
  .illust-seal {
    width: clamp(82px, 24vw, 108px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(34px, 11vw, 48px);
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(42, 24, 14, 0.18);
    animation: illustPop 0.5s var(--ease-spring) both;
  }
  .illust-seal.is-gold {
    color: #4a2e00;
    background: radial-gradient(circle at 36% 30%, #fbe6b0, #d9b35a 60%, #b8912f);
    border: 2px solid #9a7b2a;
  }
  .illust-seal.is-kichi {
    color: #2f5230;
    background: radial-gradient(circle at 36% 30%, #fdfaf0, #e3ddc4);
    border: 2px solid #7d8a5a;
  }
  .illust-seal.is-futsu {
    color: var(--sumi-2);
    background: radial-gradient(circle at 36% 30%, #fdfaf3, #e7ddca);
    border: 2px solid #c2ad88;
  }
  .illust-seal.is-chui {
    color: #5a4a44;
    background: radial-gradient(circle at 36% 30%, #f6f1ea, #ddd2c6);
    border: 2px solid #9a8b80;
  }
  .illust-seal.is-kyou {
    color: #fff;
    background: radial-gradient(circle at 36% 30%, #b2453f, #8a3030 60%, #6e2626);
    border: 2px solid #5a2020;
  }
  .p-section {
    margin-bottom: 18px;
    animation: sectionIn 0.4s var(--ease-out) both;
  }
  .p-section:nth-child(2) { animation-delay: 0.05s; }
  .p-section:nth-child(3) { animation-delay: 0.1s; }
  @keyframes sectionIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .p-section-title {
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: 0.2em;
    color: var(--gold-3);
    border-bottom: 1px solid var(--line);
    padding-bottom: 5px;
    margin-bottom: 12px;
  }
  .rokuyou-block {
    background: rgba(201, 162, 52, 0.1);
    border: 1px solid rgba(201, 162, 52, 0.22);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
  }
  .rokuyou-name {
    font-size: clamp(22px, 6vw, 26px);
    font-weight: 800;
    color: var(--sumi);
    letter-spacing: 0.08em;
  }
  .rokuyou-desc {
    font-size: clamp(11px, 3vw, 13px);
    color: var(--sumi-3);
    margin-top: 5px;
    line-height: 1.65;
  }
  .p-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 11px;
  }
  .p-item-label {
    flex-shrink: 0;
    min-width: 74px;
    font-size: clamp(11px, 3.2vw, 13px);
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 6px;
    text-align: center;
  }
  .p-item-label.lucky {
    background: linear-gradient(135deg, #c9a234, #f0d784);
    color: #3a2400;
  }
  .p-item-label.unlucky {
    background: #463232;
    color: #f0dcd4;
  }
  .p-item-desc {
    flex: 1;
    font-size: clamp(11px, 3.2vw, 13px);
    color: var(--sumi-2);
    line-height: 1.66;
  }
  .p-empty {
    font-size: clamp(11px, 3vw, 13px);
    color: #a99272;
    padding: 4px 2px;
  }

  /* ---------- Toolbar ---------- */
  .toolbar {
    display: flex;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(to bottom, var(--washi), var(--washi));
  }
  .tool-btn {
    flex: 1;
    padding: 8px 10px;
    font-family: inherit;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--sumi-2);
    background: rgba(255, 254, 250, 0.8);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, transform 0.15s var(--ease-spring);
  }
  .tool-btn:hover {
    background: rgba(201, 162, 52, 0.12);
    border-color: var(--gold-3);
  }
  .tool-btn:active {
    transform: scale(0.97);
  }
  .tool-btn.is-member {
    color: var(--gold-4);
    background: rgba(201, 162, 52, 0.14);
    border-color: var(--gold-3);
  }

  /* ---------- Sheet (filter / auth) ---------- */
  .sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(26, 12, 5, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .sheet-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  .sheet {
    position: fixed;
    z-index: 211;
    background: var(--paper-card);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='%23c7ad7d' opacity='0.18'/%3E%3C/svg%3E");
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86dvh;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 40px rgba(26, 12, 5, 0.4);
    transform: translateY(101%);
    transition:
      transform 0.42s var(--ease-spring),
      visibility 0s linear 0.42s;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
    /* 閉じている間はクリックを奪わず、キーボード/AT からも隠す */
    pointer-events: none;
    visibility: hidden;
  }
  .sheet.open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.42s var(--ease-spring);
  }
  @media (min-width: 720px) {
    .sheet {
      left: 50%;
      right: auto;
      bottom: auto;
      top: 50%;
      width: min(520px, 92vw);
      border-radius: 18px;
      box-shadow: var(--shadow-card);
      transform: translate(-50%, -46%) scale(0.96);
      opacity: 0;
      transition:
        transform 0.34s var(--ease-spring),
        opacity 0.34s ease,
        visibility 0s linear 0.34s;
      padding-bottom: 22px;
    }
    .sheet.open {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      transition:
        transform 0.34s var(--ease-spring),
        opacity 0.34s ease;
    }
  }
  .sheet-head {
    padding: 4px 22px 14px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
  }
  .sheet-title {
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 800;
    color: var(--sumi);
    letter-spacing: 0.08em;
  }
  .sheet-sub {
    font-size: clamp(11px, 3vw, 12px);
    color: var(--sumi-4);
    margin-top: 6px;
    line-height: 1.5;
  }
  .sheet-body {
    padding: 16px clamp(16px, 5vw, 22px) 4px;
  }

  /* ---------- Filter ---------- */
  .filter-quick {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .chip {
    font-family: inherit;
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--gold-3);
    background: rgba(201, 162, 52, 0.1);
    color: var(--gold-4);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s var(--ease-spring);
  }
  .chip:hover { background: rgba(201, 162, 52, 0.2); }
  .chip:active { transform: scale(0.95); }

  .filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
  .filter-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 254, 250, 0.6);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  }
  .filter-item.off {
    opacity: 0.45;
    background: rgba(120, 110, 95, 0.06);
  }
  .filter-item:active { transform: scale(0.98); }
  .filter-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--gold-3);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    transition: background 0.15s, border-color 0.15s;
  }
  .filter-item:not(.off) .filter-check {
    background: linear-gradient(135deg, #c9a234, #e6c46a);
    border-color: var(--gold-3);
  }
  .filter-item.off .filter-check {
    background: #fff;
    border-color: #c2b298;
  }
  .filter-name {
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    color: var(--sumi-2);
  }
  .filter-foot {
    font-size: clamp(10px, 2.6vw, 11px);
    color: var(--sumi-4);
    margin-top: 14px;
    line-height: 1.55;
  }

  /* ---------- Auth ---------- */
  .field {
    display: block;
    margin-bottom: 14px;
  }
  .field-label {
    display: block;
    font-size: clamp(11px, 3vw, 12px);
    font-weight: 700;
    color: var(--sumi-3);
    margin-bottom: 6px;
    letter-spacing: 0.04em;
  }
  .field input {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px; /* iOSズーム防止 */
    color: var(--sumi);
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .field input:focus {
    outline: none;
    border-color: var(--gold-2);
    box-shadow: 0 0 0 3px rgba(201, 162, 52, 0.18);
  }
  .auth-error {
    min-height: 1.2em;
    font-size: clamp(11px, 3vw, 12px);
    color: var(--aka);
    margin: -4px 0 10px;
  }
  .btn-primary {
    width: 100%;
    padding: 13px;
    font-family: inherit;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #3a2200;
    background: linear-gradient(135deg, #c9a234, #f0d784, #c9a234);
    background-size: 180% auto;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(201, 162, 52, 0.4);
    transition: transform 0.15s var(--ease-spring), background-position 0.4s;
  }
  .btn-primary:hover { background-position: right center; }
  .btn-primary:active { transform: scale(0.97); }
  .btn-secondary {
    width: 100%;
    padding: 12px;
    font-family: inherit;
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 700;
    color: var(--sumi-2);
    background: rgba(54, 48, 43, 0.06);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
  }
  .btn-secondary:hover { background: rgba(54, 48, 43, 0.12); }
  .btn-secondary:active { transform: scale(0.97); }
  .auth-switch {
    text-align: center;
    font-size: clamp(11px, 3vw, 12px);
    color: var(--sumi-4);
    margin-top: 14px;
  }
  .link-btn {
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    color: var(--gold-4);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 2px 4px;
  }
  .account-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(201, 162, 52, 0.3);
    background: rgba(201, 162, 52, 0.1);
    border-radius: 14px;
    margin-bottom: 16px;
  }
  .account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fbe6b0, #d9b35a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
  }
  .account-name {
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 800;
    color: var(--sumi);
    word-break: break-all;
  }
  .account-status {
    font-size: clamp(10px, 2.8vw, 12px);
    color: var(--gold-4);
    margin-top: 3px;
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .site-title {
      animation: none;
      background-position: center;
    }
  }
}