/* ===========================================================
手書き風フレーム / ボタン — CSS
使い方:
1. 下の「SVGフィルタ定義」をHTMLの 直下に1回だけ貼る
2. このCSSを読み込む
3. 要素に class="sk-frame" / "sk-btn" などを付ける
※ 枠線は ::before に描いて filter で歪ませています。
中身のテキストには filter がかからないのでボケません。
=========================================================== */
/* ---- SVGフィルタ定義（HTMLに貼る） --------------------------
------------------------------------------------------------ */
:root {
--sk-ink: #2b2724; /* 鉛筆の線の色 */
--sk-paper: #efe4cf; /* 紙の地色 */
--sk-card: #fdf6e8; /* カードの地色 */
--sk-accent: #e0568c; /* アクセント（ピンク） */
--sk-line: 3px; /* 枠線の太さ */
--sk-radius: 20px;
}
/* ---- 基本のフレーム ---- */
.sk-frame {
position: relative;
padding: 24px;
background: none;
transform: rotate(-0.3deg); /* わずかな傾きが手書き感の要 */
}
.sk-frame::before {
content: "";
position: absolute;
inset: 0;
border: var(--sk-line) solid var(--sk-ink);
border-radius: var(--sk-radius);
background: var(--sk-card);
filter: url(#rough1);
pointer-events: none;
}
.sk-frame > * { position: relative; } /* 中身を枠より前面に */
/* 傾きのバリエーション（隣り合う要素で交互に使う） */
.sk-tilt-r { transform: rotate(0.35deg); }
.sk-tilt-l { transform: rotate(-0.45deg); }
.sk-tilt-0 { transform: none; }
/* 二重線（鉛筆でなぞり書きした感じ） */
.sk-frame.sk-double::after {
content: "";
position: absolute;
inset: 5px;
border: 1.5px solid var(--sk-ink);
border-radius: calc(var(--sk-radius) - 2px);
filter: url(#rough2);
opacity: 0.35;
pointer-events: none;
}
/* 地色なしの枠だけ */
.sk-frame.sk-plain::before { background: none; }
/* 破線フレーム */
.sk-frame.sk-dashed::before { border-style: dashed; filter: url(#rough2); }
/* ---- ボタン ---- */
.sk-btn {
position: relative;
display: inline-block;
padding: 12px 22px;
font: inherit;
font-weight: 700;
color: var(--sk-ink);
background: none;
border: 0;
cursor: pointer;
transform: rotate(-0.6deg);
transition: transform 0.12s ease;
}
.sk-btn::before {
content: "";
position: absolute;
inset: 0;
border: 2.5px solid var(--sk-ink);
border-radius: 999px;
filter: url(#rough2);
pointer-events: none;
}
.sk-btn > span,
.sk-btn .sk-label { position: relative; }
.sk-btn:hover { transform: rotate(-0.6deg) translateY(-2px); }
.sk-btn:active { transform: rotate(-0.6deg) translateY(1px); }
.sk-btn:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 4px; }
/* 塗りつぶしボタン */
.sk-btn-primary { color: #fff; }
.sk-btn-primary::before { background: var(--sk-accent); }
.sk-btn-dark { color: #f6ecd9; }
.sk-btn-dark::before { background: var(--sk-ink); }
/* ---- 小さいタグ / ピル ---- */
.sk-tag {
position: relative;
display: inline-block;
padding: 4px 13px;
font-size: 12px;
}
.sk-tag::before {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--sk-ink);
border-radius: 999px;
filter: url(#rough3);
pointer-events: none;
}
.sk-tag > span { position: relative; }
/* ---- 紙の質感オーバーレイ ---- */
.sk-paper {
position: relative;
background: var(--sk-paper);
}
.sk-paper::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---- 手書き風の下線（見出しの下に置くSVG） ------------------
------------------------------------------------------------ */
.sk-underline { display: block; width: min(420px, 80%); height: 18px; margin: 6px auto 0; }
.sk-underline path { fill: none; stroke: var(--sk-accent); stroke-width: 3.2; stroke-linecap: round; }
.sk-underline path.sk-underline-2 { stroke: var(--sk-ink); stroke-width: 1.6; opacity: 0.45; }