/* =============================================================
   りらみゅ / 歌声診断（template-shindan.php）
   色・書体は tokens.css の変数。.btn .chip .eyebrow .mascot は app.css のもの。
   ============================================================= */

.shindan-guest { max-width: 820px; }
.shindan-col { min-width: 0; }
.shindan .sd-screen { display: none; }
.shindan .sd-screen.is-active { display: block; }
.shindan .sd-screen.is-enter { animation: fade-up .5s var(--ease-out) both; }
.shindan h2, .shindan h3, .shindan h4 { font-family: var(--font-body); }
.sd-textlink { color: var(--sky-700); font-weight: 700; border-bottom: 1.5px solid var(--sky-200); }
.sd-textlink:hover { border-color: var(--sky-600); }
.sd-sub { color: var(--ink-700); font-size: var(--fs-sm); }
.sd-btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.sd-btnrow--left { justify-content: flex-start; }
@media (max-width: 560px) { .sd-btnrow .btn { width: 100%; white-space: normal; } }

/* ---------- イントロ ---------- */
.sd-hero { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 8px 0 20px; }
.sd-hero__art { position: relative; margin-inline: auto; }
.sd-hero__art::before { content: ""; position: absolute; inset: 10% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(205,189,249,0) 70%); z-index: -1; }
.sd-hero h1 { font-family: var(--font-body); font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem); line-height: 1.35; font-weight: 700; margin: 4px 0 12px; }
.sd-hero h1 em { font-style: normal; color: var(--sky-600); background: linear-gradient(transparent 62%, var(--lemon-200) 62%); padding: 0 2px; }
.sd-lead { color: var(--ink-700); font-size: var(--fs-base); }
.sd-buddy { margin-top: 10px; font-weight: 700; color: var(--sky-700); font-size: var(--fs-sm); }
.sd-hero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 18px; }
.sd-hero__time { font-family: var(--font-display); font-weight: 600; color: var(--ink-500); font-size: var(--fs-sm); letter-spacing: .06em; }
.sd-facts { display: flex; gap: 20px; flex-wrap: wrap; }
.sd-facts li { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-xs); color: var(--ink-500); }
.sd-facts b { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); font-weight: 600; line-height: 1; }
@media (max-width: 760px) {
  .sd-hero { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .sd-hero__art { width: min(210px, 64%); }
  .sd-hero__cta, .sd-facts { justify-content: center; }
  .sd-lead br { display: none; }
}
.sd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 28px; }
.sd-step { background: var(--grad-card); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-lg); padding: 20px 18px 16px; box-shadow: var(--sh-sm); }
.sd-step__no { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--sky-600); }
.sd-step h3 { font-size: var(--fs-base); font-weight: 700; margin: 4px 0 6px; }
.sd-step p { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.7; }
@media (max-width: 760px) { .sd-steps { grid-template-columns: 1fr; gap: 10px; } }
.sd-family-wrap { text-align: center; margin-bottom: 26px; }
.sd-family { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.sd-fam { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: fade-up .6s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.sd-fam .mascot { width: 64px; height: 64px; transition: transform .3s var(--ease-back); }
.sd-fam:hover .mascot { transform: translateY(-6px) rotate(-4deg); }
.sd-fam small { font-size: 11px; color: var(--ink-500); font-weight: 700; }
.sd-intro-foot { text-align: center; font-size: var(--fs-sm); color: var(--ink-700); display: grid; gap: 10px; justify-items: center; }

/* ---------- 質問 ---------- */
.sd-progress { margin-bottom: 18px; }
.sd-progress__bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.sd-progress__bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad-candy); transition: width .5s var(--ease-out); }
.sd-progress__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-500); margin-top: 8px; font-weight: 700; }
.sd-progress__step { font-family: var(--font-display); font-size: var(--fs-base); color: var(--sky-700); }
.sd-progress__step small { font-size: 12px; color: var(--ink-300); }
.sd-guide { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.sd-guide__art { flex: none; width: 104px; }
.sd-guide__art .mascot { width: 104px; height: auto; }
.sd-bubble { position: relative; background: #fff; border-radius: var(--r-md); padding: 12px 18px; font-weight: 700; color: var(--ink-900); box-shadow: var(--sh-sm); font-size: var(--fs-sm); animation: pop-in .5s var(--ease-back) both; animation-delay: .15s; }
.sd-bubble::before { content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; background: #fff; transform: translateY(-50%) rotate(45deg); border-radius: 4px; }
.sd-qhead { margin-bottom: 16px; }
.sd-qhead h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight: 700; line-height: 1.4; }
.sd-qnote { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 6px; }

.sd-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sd-cat { --c: var(--sky-600); --bg: var(--sky-100);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; border-radius: var(--r-lg); padding: 18px 18px 16px;
  box-shadow: var(--sh-sm); border: 2px solid transparent; cursor: pointer; transition: transform .24s var(--ease-back), box-shadow .24s, border-color .24s; animation: fade-up .5s var(--ease-out) both; }
.sd-cat:nth-child(2){animation-delay:.04s}.sd-cat:nth-child(3){animation-delay:.08s}.sd-cat:nth-child(4){animation-delay:.12s}.sd-cat:nth-child(5){animation-delay:.16s}.sd-cat:nth-child(6){animation-delay:.2s}.sd-cat:nth-child(7){animation-delay:.24s}.sd-cat:nth-child(8){animation-delay:.28s}
.sd-cat:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c); }
.sd-cat:active { transform: scale(.98); }
.sd-cat__ic { width: 46px; height: 46px; border-radius: 14px; background: var(--bg); color: var(--c); display: grid; place-items: center; margin-bottom: 6px; }
.sd-cat__ic svg { width: 28px; height: 28px; }
.sd-cat__t { font-weight: 700; font-size: var(--fs-base); line-height: 1.35; }
.sd-cat__s { font-size: 12.5px; color: var(--ink-500); }
.is-lemon { --c: var(--lemon-700); --bg: var(--lemon-100); }
.is-sky { --c: var(--sky-600); --bg: var(--sky-100); }
.is-blue { --c: var(--sky-800); --bg: var(--sky-200); }
.is-mint { --c: var(--mint-600); --bg: var(--mint-100); }
.is-lav { --c: var(--lav-500); --bg: var(--lav-100); }
.is-rainbow { --c: #4E9FDD; --bg: linear-gradient(120deg, #FFEAF1, #FFF9E3 40%, #EAFBF5 70%, #E6F3FF); }
.is-rose { --c: var(--rose-600); --bg: var(--rose-100); }
.is-peach { --c: #D96A45; --bg: #FFF1E8; }
@media (max-width: 480px) { .sd-cats { gap: 10px; } .sd-cat { padding: 14px 14px 12px; } .sd-cat__t { font-size: var(--fs-sm); } .sd-cat__ic { width: 40px; height: 40px; } }

.sd-opts { display: grid; gap: 10px; }
.sd-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--sh-sm); border: 2px solid transparent; cursor: pointer; transition: transform .22s var(--ease-back), border-color .2s, box-shadow .2s; animation: fade-up .45s var(--ease-out) both; }
.sd-opt:nth-child(2){animation-delay:.05s}.sd-opt:nth-child(3){animation-delay:.1s}.sd-opt:nth-child(4){animation-delay:.15s}.sd-opt:nth-child(5){animation-delay:.2s}.sd-opt:nth-child(6){animation-delay:.25s}
.sd-opt:hover { border-color: var(--sky-300); transform: translateX(4px); box-shadow: var(--sh-md); }
.sd-opt__ic { font-size: 24px; flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--sky-50); border-radius: 12px; }
.sd-opt__tx { flex: 1; display: flex; flex-direction: column; }
.sd-opt__t { font-weight: 700; font-size: var(--fs-base); line-height: 1.4; }
.sd-opt__s { font-size: var(--fs-xs); color: var(--ink-500); }
.sd-ar { flex: none; color: var(--sky-400); }
.sd-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-500); padding: 8px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; transition: background .18s, color .18s; }
.sd-back:hover { background: rgba(255,255,255,.8); color: var(--sky-700); }
.sd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

/* ---------- 結果 ---------- */
#sd-result { display: grid; gap: 16px; }
#sd-result.is-active { display: grid; }
.sd-box, .sd-karte, .sd-quote { background: var(--grad-card); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--sh-md); }
.sd-box h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 12px; }
.sd-box h3 small { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }
.sd-hic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--grad-candy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 17px; text-shadow: 0 1px 2px rgba(46,61,87,.25); }
@media (max-width: 640px) { .sd-box, .sd-karte, .sd-quote { padding: 20px 16px; border-radius: var(--r-lg); } }

.sd-karte { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; align-items: center; overflow: hidden; position: relative; }
.sd-karte::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 20% 50%, rgba(205,216,255,.45), transparent 70%); pointer-events: none; }
.sd-karte__art { position: relative; text-align: center; margin-inline: auto; }
.sd-karte__glow { position: absolute; inset: 4% 8% 18%; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,227,143,0) 70%); animation: aura-pulse 4.5s var(--ease-soft) infinite; }
.sd-karte__art .mascot { position: relative; margin-inline: auto; width: 240px; height: auto; max-width: 100%; }
.sd-karte__crname { position: relative; margin-top: -6px; display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.sd-karte__crname b { font-size: var(--fs-lg); font-weight: 700; }
.sd-karte__crname span { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 700; }
.sd-karte__body { position: relative; }
.sd-karte__path { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 700; }
.sd-karte__path i { font-style: normal; color: var(--sky-400); margin: 0 4px; }
.sd-karte__type { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem); font-weight: 700; line-height: 1.3; margin: 4px 0 8px; background: linear-gradient(120deg, var(--sky-700), var(--rose-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-karte__line { font-size: var(--fs-md); font-weight: 700; color: var(--ink-700); }
.sd-karte__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sd-karte__meta li { font-size: 12.5px; font-weight: 700; color: var(--sky-800); background: var(--sky-100); padding: 4px 12px; border-radius: 999px; }
.sd-karte__art.is-evolving .mascot { animation: evolve-pop .9s var(--ease-back) both; }
@media (max-width: 760px) { .sd-karte { grid-template-columns: 1fr; text-align: center; } .sd-karte__art { width: min(220px, 80%); } .sd-karte__meta { justify-content: center; } }

.sd-quote { background: linear-gradient(160deg, #FFFDF5, #FFF6DD); border-color: #FFF0B8; }
.sd-quote .eyebrow { color: var(--lemon-700); }
.sd-quote blockquote { font-size: var(--fs-md); font-weight: 700; line-height: 1.7; position: relative; padding-left: 22px; margin-top: 6px; }
.sd-quote blockquote::before { content: "“"; position: absolute; left: -4px; top: -14px; font-family: var(--font-display); font-size: 56px; color: var(--lemon-300); line-height: 1; }
.sd-quote__src { display: inline-block; margin-top: 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--lemon-700); border-bottom: 1.5px solid #F2DF9A; }
.sd-cause p { color: var(--ink-700); font-size: var(--fs-base); }
.sd-cause p + p { margin-top: 12px; }

.sd-plan__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sd-plan__sum { font-family: var(--font-display); font-weight: 600; color: var(--sky-700); font-size: var(--fs-sm); letter-spacing: .04em; margin-bottom: 12px; }
.sd-plan-bar { height: 8px; border-radius: 999px; background: var(--surface-sunk); overflow: hidden; margin-bottom: 16px; }
.sd-plan-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint-200), var(--mint-600)); border-radius: 999px; transition: width .6s var(--ease-out); }
.sd-plan__note { font-size: var(--fs-sm); color: var(--ink-500); margin-top: 4px; text-align: center; }

.sd-ex { background: #fff; border: 2px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 12px; transition: border-color .3s, box-shadow .3s; }
.sd-ex.is-done { border-color: var(--mint-200); background: linear-gradient(160deg, #fff, var(--mint-100)); }
.sd-ex.pop { animation: pop .5s var(--ease-back); }
.sd-ex__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sd-ex__no { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-blue); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 16px; box-shadow: 0 4px 10px rgba(42,115,175,.25); }
.sd-ex.is-done .sd-ex__no { background: linear-gradient(135deg, #5BD1A6, var(--mint-600)); }
.sd-ex__title { flex: 1; min-width: 0; }
.sd-ex__title h4 { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
.sd-ex__min { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-500); letter-spacing: .06em; }
.sd-done { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--border-strong); font-weight: 700; font-size: var(--fs-xs); color: var(--ink-700); background: #fff; cursor: pointer; transition: all .2s var(--ease-out); }
.sd-done:hover { border-color: var(--mint-600); color: var(--mint-600); }
.sd-done[aria-pressed="true"] { background: var(--mint-600); border-color: var(--mint-600); color: #fff; }
.sd-steps-list { display: grid; gap: 8px; counter-reset: st; margin: 0 0 12px; padding: 0; list-style: none; }
.sd-steps-list li { position: relative; padding-left: 30px; font-size: var(--fs-sm); line-height: 1.65; counter-increment: st; }
.sd-steps-list li::before { content: counter(st); position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--sky-100); color: var(--sky-700); font-family: var(--font-display); font-weight: 600; font-size: 12px; display: grid; place-items: center; }
.sd-why, .sd-care, .sd-fun { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-700); padding: 10px 14px; border-radius: 14px; margin-top: 8px; background: var(--sky-50); }
.sd-why b, .sd-care b, .sd-fun b { display: inline-block; font-size: 11px; letter-spacing: .08em; padding: 1px 8px; border-radius: 999px; margin-right: 8px; background: var(--sky-200); color: var(--sky-800); vertical-align: 1px; }
.sd-care { background: var(--rose-100); } .sd-care b { background: var(--rose-200); color: var(--rose-700); }
.sd-fun { background: var(--lemon-100); } .sd-fun b { background: var(--lemon-200); color: var(--lemon-700); }
.sd-ex__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.sd-exlink { font-size: var(--fs-xs); font-weight: 700; color: var(--sky-700); border-bottom: 1.5px solid var(--sky-200); line-height: 1.5; }
.sd-timer { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: 7px 14px; border-radius: 999px; background: var(--surface-sunk); color: var(--sky-800); border: 0; cursor: pointer; transition: background .2s; letter-spacing: .04em; min-width: 96px; justify-content: center; }
.sd-timer:hover { background: var(--sky-200); }
.sd-timer.is-on { background: var(--grad-blue); color: #fff; animation: pulse-ring 1.6s infinite; }
.sd-timer.is-end { background: var(--mint-600); color: #fff; font-family: var(--font-body); }
@media (max-width: 560px) { .sd-ex { padding: 16px 14px; } .sd-ex__head { display: grid; grid-template-columns: 34px 1fr; gap: 8px 12px; } .sd-done { grid-column: 2; justify-self: start; } }

.sd-more-list { display: grid; gap: 8px; }
.sd-more { background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 0 18px; margin-bottom: 8px; transition: border-color .2s; }
.sd-more[open] { border-color: var(--sky-300); }
.sd-more summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; font-weight: 700; font-size: var(--fs-base); cursor: pointer; list-style: none; }
.sd-more summary::-webkit-details-marker { display: none; }
.sd-more summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid var(--sky-400); border-bottom: 2.5px solid var(--sky-400); transform: rotate(45deg); transition: transform .25s; flex: none; margin-left: 6px; }
.sd-more[open] summary::after { transform: rotate(-135deg); }
.sd-more summary small { margin-left: auto; flex: none; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-500); }
.sd-more .sd-steps-list { margin-top: 4px; }
.sd-more .sd-exlink { display: inline-block; margin: 10px 0 16px; }

.sd-songs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sd-song { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 2px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; color: inherit; transition: transform .24s var(--ease-back), border-color .2s, box-shadow .2s; }
.sd-song:hover { transform: translateY(-4px); border-color: var(--lav-300); box-shadow: var(--sh-md); color: inherit; }
.sd-song__artist { font-size: 12px; font-weight: 700; color: var(--lav-500); letter-spacing: .04em; }
.sd-song__title { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
.sd-song__pts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sd-song__pts i { font-style: normal; font-size: 11.5px; color: var(--ink-700); background: var(--lav-100); padding: 2px 9px; border-radius: 999px; }

.sd-challenge { background: linear-gradient(160deg, #fff, #F3EEFF); border-color: var(--lav-200); text-align: center; }
.sd-challenge h3 { justify-content: center; }
.sd-challenge .sd-hic { background: linear-gradient(135deg, var(--lav-300), var(--lav-500)); }
.sd-challenge.is-full { background: linear-gradient(160deg, #FFFDF5, #FFF0B8); border-color: var(--lemon-300); }
.sd-stamps { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 18px; }
.sd-stamp { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2.5px dashed var(--lav-300); display: grid; place-items: center; color: var(--lav-300); font-family: var(--font-display); font-weight: 600; font-size: 15px; transition: all .3s var(--ease-back); }
.sd-stamp i { font-style: normal; }
.sd-stamp.is-on { background: linear-gradient(135deg, var(--lav-300), var(--lav-500)); border-style: solid; border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(142,111,216,.3); }
.sd-stamp.pop { animation: pop .6s var(--ease-back); }
.sd-stamped { font-weight: 700; color: var(--lav-500); }
.sd-challenge__note { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 14px; }
.sd-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.sd-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); animation: sd-burst 1.4s var(--ease-out) both; }

.sd-cta { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 20px; align-items: center; background: linear-gradient(160deg, #FFF6F9, #FFEAF1); border-color: var(--rose-200); }
.sd-cta h3 { margin-bottom: 8px; }
.sd-cta p { font-size: var(--fs-sm); color: var(--ink-700); }
.sd-cta p + p { margin-top: 8px; }
.sd-cta .sd-btnrow { margin-top: 14px; }
.sd-cta__art .mascot { width: 140px; height: auto; }
@media (max-width: 640px) { .sd-cta { grid-template-columns: 1fr; text-align: center; } .sd-cta__art { width: 120px; margin-inline: auto; } .sd-btnrow--left { justify-content: center; } }

.sd-reading { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sd-reading a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm); color: inherit; transition: background .18s; }
.sd-reading a:hover { background: var(--sky-50); color: var(--sky-700); }
.sd-reading__sec { flex: none; font-size: 11px; font-weight: 700; color: var(--sky-700); background: var(--sky-100); padding: 2px 9px; border-radius: 999px; max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-share { text-align: center; }
.sd-share p { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: 12px; font-weight: 700; }
.sd-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 4px; }
@media (max-width: 560px) { .sd-foot { flex-direction: column; } }

/* ---------- ライブラリ ---------- */
#sd-library.is-active { display: grid; gap: 16px; }
.sd-libhead { text-align: center; }
.sd-libhead h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); font-weight: 700; margin-bottom: 8px; }
.sd-tabs { display: inline-flex; gap: 6px; background: rgba(255,255,255,.8); padding: 6px; border-radius: 999px; margin-top: 16px; box-shadow: var(--sh-sm); }
.sd-tab { padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-700); background: none; border: 0; cursor: pointer; transition: all .2s; }
.sd-tab small { font-family: var(--font-display); font-size: 12px; color: var(--ink-300); margin-left: 4px; }
.sd-tab[aria-selected="true"] { background: var(--grad-blue); color: #fff; box-shadow: 0 6px 14px rgba(42,115,175,.25); }
.sd-tab[aria-selected="true"] small { color: rgba(255,255,255,.8); }
.sd-panel { display: none; }
.sd-panel.is-active { display: grid; gap: 16px; animation: fade-up .4s var(--ease-out); }
.sd-libgroup h3 .sd-cat__ic { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
.sd-libgroup h3 .sd-cat__ic svg { width: 22px; height: 22px; }

/* ---------- 練習きろくの上の一行 ---------- */
.shindan-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.9); border-radius: var(--r-md); padding: 10px 16px; margin-bottom: var(--space-4); font-size: var(--fs-sm); color: var(--ink-700); box-shadow: var(--sh-sm); transition: transform .24s var(--ease-back), box-shadow .24s; }
.shindan-line:hover { transform: translateY(-2px); box-shadow: var(--sh-md); color: var(--ink-700); }
.shindan-line__icon { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--grad-candy); color: #fff; display: grid; place-items: center; }
.shindan-line b { margin-left: auto; color: var(--sky-700); font-weight: 700; white-space: nowrap; }

/* ---------- motion ---------- */
@keyframes pop-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sd-burst { 0% { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shindan * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }