/* =========================================================================
   pointnote デザイン v2  (2026-08-01)
   D案 = ヘッダー:クリーンモダン / 科目カード・Point:ソフトポップ
   UI配色 = スカイ（章ごとの --accent はそのまま活かす）
   マーク  = 案1 角丸ジオメトリ(SVG化は design-v2.js が行う)

   【重要】これは検証用の追加スタイルシート。既存の style.css の後に
   読み込むことで上書きする方式にしてあり、link を外せば完全に元へ戻る。
   確認が取れたら style.css 本体へ畳み込む予定。
   ========================================================================= */

:root{
  /* UIクローム(ヘッダー・アイコン・検索など)の色。章の色 --accent とは別系統 */
  /* 2026-08-01: スカイの文字・アイコン色が薄く感じるとの指摘で、
     --v2-ui だけ一段濃くした(#3f79b8 → #33628f)。面の色(-bg)は据え置きなので
     ヘッダーの淡さは変わらず、文字とアイコンだけがはっきりする。 */
  --v2-ui:      #33628f;
  --v2-ui-bg:   #eaf2fb;
  --v2-ui-bg-hi:#d8e8f8;
  --v2-line:    #e3e7ec;
  --v2-ink:     #2b3440;
  --v2-ink-soft:#5c6672;
  --v2-radius:  20px;

  /* ---- 濃さのつまみ(2026-08-01) ----------------------------------------
     淡くしすぎて見づらいという指摘を受けて、章色をどれくらい効かせるかを
     変数に集約した。ここの数字を上下させるだけで全体の濃さが変わる。
     数字を下げれば淡く、上げれば濃くなる。 */
  --v2-tint:        19%;  /* Pointタイトル帯・カードの面の濃さ (初期値13%) */
  --v2-tint-soft:   16%;  /* ボタンなど小さい面           (初期値11%) */
  --v2-tint-strong: 24%;  /* IDバッジ・図のグリフ台       (初期値15%) */
  --v2-edge:        27%;  /* 段差シャドウなど輪郭         (初期値20%) */
  --v2-title-ink:   58%;  /* タイトル文字に章色を混ぜる割合 (初期値42%) */
}

/* =========================================================================
   1. ヘッダー（クリーンモダン）
   ========================================================================= */
.site-header{
  background:#fff;
  border-bottom:2px solid color-mix(in srgb, var(--accent) 34%, var(--v2-line));
  gap:.7rem;
  padding:.55rem 1rem;
}

.brand{
  color:var(--v2-ink);
  font-weight:800;
  letter-spacing:-.01em;
}

/* --- 丸アイコン3種(テーマ切替・PC版切替・お気に入り)を角丸の四角に --- */
.pn-theme-toggle-btn,
.pn-view-toggle-btn,
.pn-fav-link{
  width:2.25rem;
  height:2.25rem;
  border-radius:10px;
  border:1px solid var(--v2-line);
  background:#fff;
  color:var(--v2-ink-soft);
  position:relative;
  transition:background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.pn-fav-link{ color:#d9647f; }

.pn-theme-toggle-btn:hover,
.pn-view-toggle-btn:hover,
.pn-fav-link:hover{
  background:#f2f5f8;
  border-color:#c9d2dc;
  transform:translateY(-1px);
  color:var(--v2-ui);
}
.pn-fav-link:hover{ background:#fff0f3; border-color:#f0c3ce; color:#d9647f; }

/* ホバー時に下から出る小さなバー(C案の要素) */
.pn-theme-toggle-btn::after,
.pn-view-toggle-btn::after,
.pn-fav-link::after{
  content:"";
  position:absolute;
  bottom:4px; left:50%;
  transform:translateX(-50%);
  width:0; height:2px;
  background:currentColor;
  border-radius:2px;
  transition:width .22s ease;
}
.pn-theme-toggle-btn:hover::after,
.pn-view-toggle-btn:hover::after,
.pn-fav-link:hover::after{ width:14px; }

/* JSが入れたSVGのサイズ */
.pn-theme-toggle-btn .v2-icon,
.pn-view-toggle-btn .v2-icon,
.pn-fav-link .v2-icon{ width:19px; height:19px; display:block; }

/* --- 検索ボックス --- */
.pn-search-input{
  height:2.25rem;
  border-radius:10px;
  border:1px solid var(--v2-line);
  background:#fff;
  padding:.35rem .85rem;
  transition:width .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pn-search-input:focus{
  border-color:color-mix(in srgb, var(--v2-ui) 55%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--v2-ui) 15%, transparent);
}
.pn-search-results{
  border:1px solid var(--v2-line);
  border-radius:14px;
  box-shadow:0 18px 40px -22px rgba(40,60,90,.55);
}

/* --- ログインボタン --- */
.pn-login-btn{
  height:2.25rem;
  border-radius:10px;
  border:1px solid var(--v2-line);
  box-shadow:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.pn-login-btn:hover{
  background:#f2f5f8;
  border-color:#c9d2dc;
  box-shadow:none;
  transform:translateY(-1px);
}
.pn-user-chip{
  border-radius:10px;
  background:var(--v2-ui-bg);
  border:1px solid color-mix(in srgb, var(--v2-ui) 22%, #fff);
}

/* --- 科目タブ --- */
.subject-nav{
  border-radius:12px;
  border-color:var(--v2-line);
  background:#fff;
}
.subject-nav a{ border-radius:9px; transition:background .18s ease, color .18s ease; }
.subject-nav a:hover{ background:var(--v2-ui-bg); }
.subject-nav a.current{ background:var(--v2-ui); color:#fff; }

/* =========================================================================
   1-b. ヘッダー（ソフトポップ版・A案）
   <html data-v2-header="pop"> のときだけ有効。design-v2.js が付ける。
   URLに ?hdr=clean を付けると上のクリーンモダン版に戻せる(比較用)。
   ========================================================================= */
html[data-v2-header="pop"] .site-header{
  background:linear-gradient(180deg, color-mix(in srgb, var(--v2-ui) 7%, #fff), #fff 78%);
  border-bottom:1px solid color-mix(in srgb, var(--v2-ui) 12%, #fff);
}

html[data-v2-header="pop"] .brand{ color:var(--v2-ui); }

html[data-v2-header="pop"] .pn-theme-toggle-btn,
html[data-v2-header="pop"] .pn-view-toggle-btn,
html[data-v2-header="pop"] .pn-fav-link{
  border:0;
  border-radius:50%;
  background:var(--v2-ui-bg);
  color:var(--v2-ui);
}
html[data-v2-header="pop"] .pn-fav-link{ background:#fdeaf0; color:#e0507a; }

html[data-v2-header="pop"] .pn-theme-toggle-btn:hover,
html[data-v2-header="pop"] .pn-view-toggle-btn:hover{
  background:var(--v2-ui-bg-hi);
  transform:translateY(-2px) scale(1.06);
  color:var(--v2-ui);
}
html[data-v2-header="pop"] .pn-fav-link:hover{
  background:#fbd9e5;
  transform:translateY(-2px) scale(1.06);
  color:#e0507a;
}
html[data-v2-header="pop"] .pn-theme-toggle-btn:active,
html[data-v2-header="pop"] .pn-view-toggle-btn:active,
html[data-v2-header="pop"] .pn-fav-link:active{ transform:scale(.92); }

/* クリーンモダン版のホバーバーはポップ版では出さない */
html[data-v2-header="pop"] .pn-theme-toggle-btn::after,
html[data-v2-header="pop"] .pn-view-toggle-btn::after,
html[data-v2-header="pop"] .pn-fav-link::after{ content:none; }

html[data-v2-header="pop"] .pn-search-input{
  border:0;
  border-radius:999px;
  background:var(--v2-ui-bg);
}
html[data-v2-header="pop"] .pn-search-input:focus{
  background:var(--v2-ui-bg-hi);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--v2-ui) 20%, transparent);
}
html[data-v2-header="pop"] .pn-search-results{
  border:0;
  border-radius:18px;
  box-shadow:0 20px 44px -24px rgba(40,60,90,.6), 0 0 0 1px color-mix(in srgb, var(--v2-ui) 14%, #fff);
}

html[data-v2-header="pop"] .pn-login-btn{
  border:0;
  border-radius:999px;
  background:var(--v2-ui-bg);
  color:#33404f;
}
html[data-v2-header="pop"] .pn-login-btn:hover{
  background:var(--v2-ui-bg-hi);
  transform:translateY(-2px);
}
html[data-v2-header="pop"] .pn-user-chip{
  border:0;
  border-radius:999px;
  background:var(--v2-ui-bg);
}

html[data-v2-header="pop"] .subject-nav{
  border:0;
  border-radius:999px;
  background:var(--v2-ui-bg);
}
html[data-v2-header="pop"] .subject-nav a{ border-radius:999px; }
html[data-v2-header="pop"] .subject-nav a:hover{ background:var(--v2-ui-bg-hi); }
html[data-v2-header="pop"] .subject-nav a.current{ background:var(--v2-ui); color:#fff; }

/* =========================================================================
   2. 科目カード / 章カード（ソフトポップ）
   ========================================================================= */
.chapter-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:.9rem;
}

.chapter-list a{
  position:relative;
  overflow:hidden;
  border:0;
  border-radius:22px;
  padding:1.15rem 1.25rem;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) var(--v2-tint), #fff), #fff 74%);
  box-shadow:0 3px 0 color-mix(in srgb, var(--accent) var(--v2-edge), #fff),
             0 10px 22px -14px var(--accent);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease;
}
.chapter-list a:hover{
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) calc(var(--v2-tint) + 4%), #fff), #fff 74%);
  transform:translateY(-5px);
  box-shadow:0 7px 0 color-mix(in srgb, var(--accent) calc(var(--v2-edge) + 6%), #fff),
             0 20px 34px -16px var(--accent);
}
.chapter-list a:active{ transform:translateY(-1px); }

/* 準備中カードも同じ形に揃える(押せないことは色の薄さで表す) */
.chapter-soon{
  border:0;
  border-radius:22px;
  padding:1.15rem 1.25rem;
  background:color-mix(in srgb, var(--accent) 5%, #fff);
  box-shadow:0 2px 0 color-mix(in srgb, var(--accent) 10%, #fff);
}
.chapter-soon small{ border-radius:999px; }

/* --- JSが差し込む科目グリフと説明文 --- */
.v2-card-glyph{
  position:absolute;
  right:1rem; top:1rem;
  width:2.6rem; height:2.6rem;
  padding:.55rem;
  border-radius:14px;
  background:color-mix(in srgb, var(--accent) var(--v2-tint-strong), #fff);
  color:var(--accent);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.v2-card-glyph svg{ width:100%; height:100%; display:block; }
.chapter-list a:hover .v2-card-glyph{ transform:rotate(-8deg) scale(1.1); }

.v2-card-cap{
  display:block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  color:color-mix(in srgb, var(--accent) 55%, var(--v2-ink-soft));
  margin-bottom:.05rem;
}
.v2-card-sub{
  display:block;
  margin-top:.3rem;
  font-size:.78rem;
  font-weight:600;
  color:var(--v2-ink-soft);
  line-height:1.55;
}
.chapter-list a.v2-subject-card{ padding-right:4.2rem; }
.chapter-list a.v2-subject-card .v2-card-title{
  display:block;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--accent);
  line-height:1.25;
}

/* EXカードは金テーマを維持しつつ角丸だけ合わせる */
.chapter-list a.chapter-ex{ border-radius:22px; }

/* =========================================================================
   3. Point ボックス（ソフトポップ）
   ========================================================================= */
/* 2026-08-01: 章カードと同じ配色ロジックで Point も組む。
   すなわち「白い紙 + 章色の淡いグラデーション + 章色の段差シャドウ」。
   カードと Point が同じ言語で並ぶので、目次から本文へ移っても違和感がない。 */
.point-box{
  border:0;
  border-radius:22px;
  background:#fff;
  box-shadow:0 3px 0 color-mix(in srgb, var(--accent) var(--v2-edge), #fff),
             0 10px 22px -16px var(--accent);
  transition:box-shadow .22s ease;
}
.point-box:hover{
  box-shadow:0 4px 0 color-mix(in srgb, var(--accent) calc(var(--v2-edge) + 6%), #fff),
             0 16px 30px -18px var(--accent);
}

/* タイトルは帯のベタ塗りをやめ、カードと同じ斜めグラデーションに */
.point-title{
  padding:.7rem .95rem .6rem;
  gap:.5rem;
  align-items:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) var(--v2-tint), #fff), #fff 80%);
  color:color-mix(in srgb, var(--accent) var(--v2-title-ink), #1f2a36);
  border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, #fff);
}

/* Point ID は章カードの "MATH" キャプションと同じピルバッジにする */
.point-title-id{
  display:inline-block;
  background:color-mix(in srgb, var(--accent) var(--v2-tint-strong), #fff);
  color:color-mix(in srgb, var(--accent) 82%, #1f2a36);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.03em;
  padding:.12rem .6rem;
  border-radius:999px;
  /* HTML側で ID の直後に全角スペースが入っているため、右マージンは最小限に */
  margin-right:.1rem;
  vertical-align:.08em;
  white-space:nowrap;
}

/* 理解度マークが付いたら、同じグラデーションのまま色相だけ差し替える */
.point-box[data-mark="soso"]{
  box-shadow:0 3px 0 #f0dcae, 0 10px 22px -16px #d99a2b;
}
.point-box[data-mark="bad"]{
  box-shadow:0 3px 0 #f2c6cf, 0 10px 22px -16px #d1495b;
}
.point-box[data-mark="soso"] > .point-title{
  background:linear-gradient(160deg, #fdf1dd, #fff 78%);
  color:#7a5510;
  border-bottom-color:#f4e6cb;
}
.point-box[data-mark="bad"] > .point-title{
  background:linear-gradient(160deg, #fdeaee, #fff 78%);
  color:#8a2f43;
  border-bottom-color:#f6d8de;
}
.point-box[data-mark="soso"] > .point-title .point-title-id{
  background:#f9e7c8; color:#7a5510;
}
.point-box[data-mark="bad"] > .point-title .point-title-id{
  background:#fadbe1; color:#8a2f43;
}

/* =========================================================================
   4. 理解度マーク・ハート・メモ（案1 角丸ジオメトリ）
   ========================================================================= */
/* タイトルが白に近いグラデーションになったので、ボタンは白ではなく
   「章色の淡い面 + 濃いめの線画」にする(2026-08-01) */
.pn-mark-btn,
.pn-heart-btn,
.pn-note-btn{
  width:1.9rem;
  height:1.9rem;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) var(--v2-tint-soft), #fff);
  color:color-mix(in srgb, var(--accent) 45%, #46505c);
  transition:background .18s ease, transform .18s ease, color .18s ease;
}
.pn-mark-btn:hover,
.pn-heart-btn:hover,
.pn-note-btn:hover{
  background:color-mix(in srgb, var(--accent) var(--v2-edge), #fff);
  color:color-mix(in srgb, var(--accent) 70%, #1f2a36);
  transform:translateY(-1px);
}
.pn-mark-btn:active,
.pn-heart-btn:active{
  animation:v2-pop .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes v2-pop{
  0%{transform:scale(1)} 45%{transform:scale(1.32)} 100%{transform:scale(1)}
}

/* JSが差し込むSVG */
.pn-mark-btn .v2-icon,
.pn-heart-btn .v2-icon{ width:16px; height:16px; display:block; }
.pn-mark-btn[data-state="none"] .v2-icon{ opacity:.5; }

/* 状態色 */
.pn-mark-btn[data-state="soso"]{ background:#fbeed3; color:#b8790a; }
.pn-mark-btn[data-state="soso"]:hover{ background:#f7e3ba; color:#8f5d05; }
.pn-mark-btn[data-state="bad"] { background:#fbdde3; color:#c0455e; }
.pn-mark-btn[data-state="bad"]:hover{ background:#f7cbd4; color:#9c3348; }

.pn-heart-btn.hearted{
  background:#fdeaf0;
  border:0;
  color:#e0507a;
}
.pn-heart-btn.hearted:hover{ background:#fbd9e5; color:#cc3f68; }
.pn-heart-btn.hearted .v2-icon{ fill:currentColor; }

/* =========================================================================
   5. 配色テーマの整理（2026-08-01）
   ・マカロンは廃止（design-v2.js が切替候補から外す。CSSは残置）
   ・オリジナル（章ごとのカラフル）とウォーター（青1色）は別テーマのまま
   ・どのテーマも従来より淡いトーンに寄せる
   style.css 側が !important で色を固定しているので、こちらも !important で
   後勝ちさせる（design-v2.css は style.css より後に読み込まれる）。
   ========================================================================= */
html[data-theme="dark"] body,
html[data-theme="dark"] .chapter-list a,
html[data-theme="dark"] .chapter-soon,
html[data-theme="dark"] .point-box{ --accent:#6E7480 !important; }   /* 淡いチャコール */

html[data-theme="mizuiro"] body,
html[data-theme="mizuiro"] .chapter-list a,
html[data-theme="mizuiro"] .chapter-soon,
html[data-theme="mizuiro"] .point-box{ --accent:#5A9BC4 !important; } /* 淡いウォーター */

html[data-theme="dark"] .brand--logo{ color:#6E7480; }
html[data-theme="mizuiro"] .brand--logo{ color:#3E7CA6; }

/* 2026-08-01: ウォーターは章色を1色(淡い水色)に統一するテーマなので、
   その色をそのまま文字に使うと薄すぎて読みにくい。面の色はそのまま淡く保ち、
   文字だけ濃くする。--v2-title-ink は「章色をどれだけ混ぜるか」なので、
   数字を下げるほど濃い墨色に寄る。 */
html[data-theme="mizuiro"]{ --v2-title-ink:42%; }

html[data-theme="mizuiro"] .point-title{
  color:color-mix(in srgb, var(--accent) 62%, #12222e);
}
html[data-theme="mizuiro"] .point-title-id{
  color:color-mix(in srgb, var(--accent) 55%, #12222e);
}
html[data-theme="mizuiro"] .chapter-list a.v2-subject-card .v2-card-title,
html[data-theme="mizuiro"] .v2-card-glyph{
  color:color-mix(in srgb, var(--accent) 70%, #12222e);
}
html[data-theme="mizuiro"] .v2-card-cap{
  color:color-mix(in srgb, var(--accent) 50%, #3c4855);
}

/* --- 章タイトル(h1)と節見出し(h2) ---
   style.css では色をそのまま var(--accent) にしているため、淡いテーマだと
   見出しが薄くなる。見出しは可読性が最優先なので、どのテーマでも少し墨を
   混ぜて締める。装飾の下線・左バーは章色のまま残す。 */
.chapter-main h1,
.chapter-main h2{
  color:color-mix(in srgb, var(--accent) 86%, #12222e);
}
html[data-theme="mizuiro"] .chapter-main h1,
html[data-theme="mizuiro"] .chapter-main h2,
html[data-theme="dark"] .chapter-main h1,
html[data-theme="dark"] .chapter-main h2{
  color:color-mix(in srgb, var(--accent) 58%, #12222e);
}
/* 本文中の強調語(\kyouchou)。style.css は色を var(--accent) そのままにして
   いるが、本文サイズの文字なので見出しより薄さが響く。見出しと同じ比率で締める。 */
strong.kyouchou{
  color:color-mix(in srgb, var(--accent) 86%, #12222e);
}
html[data-theme="mizuiro"] strong.kyouchou,
html[data-theme="dark"] strong.kyouchou{
  color:color-mix(in srgb, var(--accent) 55%, #12222e);
}

/* 見出しの下線・左バーも、淡いテーマでは少しだけ濃くする */
html[data-theme="mizuiro"] .chapter-main h1,
html[data-theme="dark"] .chapter-main h1{
  border-bottom-color:color-mix(in srgb, var(--accent) 78%, #12222e);
}
html[data-theme="mizuiro"] .chapter-main h2,
html[data-theme="dark"] .chapter-main h2{
  border-left-color:color-mix(in srgb, var(--accent) 78%, #12222e);
}

/* 理解度の縁取りもテーマ側の指定を淡いものに揃える */
html[data-theme="dark"] .point-box[data-mark="soso"],
html[data-theme="mizuiro"] .point-box[data-mark="soso"]{ border-color:#ecc98a; }
html[data-theme="dark"] .point-box[data-mark="bad"],
html[data-theme="mizuiro"] .point-box[data-mark="bad"]{ border-color:#ecacb8; }

/* =========================================================================
   6. 動き
   ========================================================================= */
/* Pointが画面に入ってきたときのフェードイン(design-v2.jsが付け外し) */
.v2-reveal{
  opacity:0;
  transform:translateY(14px);
}
.v2-reveal.v2-in{
  opacity:1;
  transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}

/* ページ遷移のクロスフェード(対応ブラウザのみ。非対応でも無害) */
@view-transition{ navigation:auto; }

@media (max-width:640px){
  .chapter-list{ grid-template-columns:1fr; }

  /* モバイルの検索アイコン。style.css では絵文字 🔍(content:"\1F50D") を
     使っていて、端末ごとに形も色も変わってしまう。ヘッダーの他のアイコンと
     同じ線画に揃えるため、SVGをマスクとして敷き currentColor 相当で塗る
     (2026-08-01)。 */
  .pn-search-wrap::before{
    content:"";
    width:17px;
    height:17px;
    left:.75rem;
    background-color:var(--v2-ui);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") center / contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") center / contain no-repeat;
  }

  /* アイコンぶんの幅を確保する(絵文字より少し大きいため) */
  .pn-search-input{ width:2.5rem; }

  .pn-theme-toggle-btn,
  .pn-view-toggle-btn,
  .pn-fav-link{ width:2.1rem; height:2.1rem; }
}

@media (prefers-reduced-motion:reduce){
  .chapter-list a,
  .point-box,
  .v2-reveal,
  .v2-card-glyph,
  .pn-mark-btn,
  .pn-heart-btn{ transition:none !important; animation:none !important; transform:none !important; }
  .v2-reveal{ opacity:1; }
}

/* ---- 使い方ページの機能紹介アイコン(2026-08-07) ------------------------
   guide.html の .feat-icon と地の文の記号を、ヘッダーやPointのボタンと
   同じ線画に揃える。♥ や ○ は環境によって絵文字として描かれ、CSSの色が
   効かずに「墨塗り」に見えていた。 */
.feat-icon .v2-icon{ width:19px; height:19px; display:block; }
.feat-icon{ display:inline-flex; align-items:center; justify-content:center; }
.v2-inline-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05em; height:1.05em; vertical-align:-0.16em;
  margin:0 .12em; color:var(--feat, var(--accent));
}
.v2-inline-icon .v2-icon{ width:100%; height:100%; display:block; }
.pn-note-btn .v2-icon{ width:16px; height:16px; display:block; }