/* =================================================================
   こよみのがくしゅう（kids-calendar）ツール固有スタイル
   すべて #app-kids-calendar でスコープする
   ================================================================= */

#app-kids-calendar {
    --kc-accent: #7c5ac3;
    --kc-sun: #e14b4b;
    --kc-sat: #3b82f6;
}

/* ---------- せいせきバナー ---------- */
#app-kids-calendar .kc-score-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;          /* 入りきらないときは「まとまり」単位で折り返す */
    gap: .2rem .4rem;
    max-width: 100%;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-primary);
    font-weight: 700;
    /* 狭い画面では自動で小さくして、折り返し自体が起きにくいようにする */
    font-size: clamp(.85rem, 3.4vw, 1.05rem);
}

/* 「せいかい 3もん」のような1かたまりは、途中で改行させない */
#app-kids-calendar .kc-score-item {
    white-space: nowrap;
}

#app-kids-calendar .kc-score-star {
    font-size: 1.2rem;
}

#app-kids-calendar .kc-score-sep {
    color: var(--bs-secondary-color);
    margin: 0 .1rem;
}

/* ---------- モードえらび ---------- */
#app-kids-calendar .kc-modebar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

#app-kids-calendar .kc-modebtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 96px;
    padding: .6rem .3rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}

@media (hover: hover) { #app-kids-calendar .kc-modebtn:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary);
} }

#app-kids-calendar .kc-modebtn.active {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 14%, var(--bs-body-bg));
    box-shadow: 0 4px 12px rgba(124, 90, 195, .2);
}

#app-kids-calendar .kc-modebtn-emoji {
    font-size: 2rem;
    line-height: 1.25;
}

#app-kids-calendar .kc-modebtn-title {
    font-size: .92rem;
}

/* ---------- パネル共通 ---------- */
#app-kids-calendar .kc-panel {
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- カレンダー ---------- */
#app-kids-calendar .kc-calwrap {
    max-width: 520px;
    margin: 0 auto;
}

#app-kids-calendar .kc-calwrap-sm {
    max-width: 420px;
}

#app-kids-calendar table.kc-cal {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed;
}

#app-kids-calendar table.kc-cal th {
    padding: .35rem 0;
    font-size: .95rem;
    font-weight: 700;
    text-align: center;
    color: var(--bs-secondary-color);
}

#app-kids-calendar table.kc-cal th.kc-sun,
#app-kids-calendar table.kc-cal td.kc-sun .kc-daynum {
    color: var(--kc-sun);
}

#app-kids-calendar table.kc-cal th.kc-sat,
#app-kids-calendar table.kc-cal td.kc-sat .kc-daynum {
    color: var(--kc-sat);
}

#app-kids-calendar table.kc-cal td {
    height: 46px;
    text-align: center;
    vertical-align: middle;
    border-radius: .6rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

#app-kids-calendar table.kc-cal td.kc-empty {
    background: transparent;
    border: none;
}

#app-kids-calendar table.kc-cal td .kc-daynum {
    font-weight: 700;
    font-size: 1.05rem;
}

/* 今日ハイライト */
#app-kids-calendar table.kc-cal td.kc-today {
    background: color-mix(in srgb, var(--bs-warning) 30%, var(--bs-body-bg));
    border: 3px solid var(--bs-warning);
    position: relative;
    animation: kc-today-pulse 1.8s ease-in-out infinite;
}

#app-kids-calendar table.kc-cal td.kc-today::after {
    content: "⭐";
    position: absolute;
    top: -10px;
    right: -6px;
    font-size: .9rem;
}

@keyframes kc-today-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 199, 0, .5); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 199, 0, 0); }
}

/* クイズで注目させる日 */
#app-kids-calendar table.kc-cal td.kc-mark {
    background: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-body-bg));
    border: 3px solid var(--bs-primary);
    position: relative;
}

#app-kids-calendar table.kc-cal td.kc-mark::after {
    content: "👀";
    position: absolute;
    top: -12px;
    right: -6px;
    font-size: 1rem;
}

/* ---------- 見出し・きょうのひ ---------- */
#app-kids-calendar .kc-today-headline {
    font-size: clamp(1.2rem, 4.5vw, 1.7rem);
    font-weight: 800;
    line-height: 1.5;
}

#app-kids-calendar .kc-today-headline .kc-hl {
    color: var(--kids-accent-text, var(--bs-primary));
}

/* 日付の読み（よっか 等）。主役は数字なので、そえがきとして控えめに出す */
#app-kids-calendar .kc-today-headline .kc-yomi {
    font-size: .7em;
    color: var(--bs-secondary-color);
    margin-left: .1em;
}

#app-kids-calendar .kc-today-headline .kc-hl-sun { color: var(--kc-sun); }
#app-kids-calendar .kc-today-headline .kc-hl-sat { color: var(--kc-sat); }

#app-kids-calendar .kc-monthlabel {
    min-width: 190px;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 800;
}

#app-kids-calendar .kc-monthlabel .kc-wafu {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* ---------- しつもん ---------- */
#app-kids-calendar .kc-question {
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-weight: 800;
    line-height: 1.5;
}

#app-kids-calendar .kc-question .kc-hl {
    color: var(--kids-accent-text, var(--bs-primary));
}

/* ---------- せんたくし（ボタングリッド） ---------- */
#app-kids-calendar .kc-choicegrid {
    display: grid;
    gap: .6rem;
}

#app-kids-calendar .kc-wd-choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#app-kids-calendar .kc-mq-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#app-kids-calendar .kc-choice {
    min-height: 60px;
    padding: .5rem;
    border: 2px solid var(--bs-border-color);
    border-radius: .8rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 800;
    font-size: 1.15rem;
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, background-color .1s ease;
}

@media (hover: hover) { #app-kids-calendar .kc-choice:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--bs-primary);
} }

#app-kids-calendar .kc-choice:disabled {
    cursor: default;
    opacity: 1;
}

#app-kids-calendar .kc-choice.kc-correct {
    border-color: var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 22%, var(--bs-body-bg));
    animation: kc-pop .4s ease;
}

#app-kids-calendar .kc-choice.kc-wrong {
    border-color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 18%, var(--bs-body-bg));
}

/* 曜日ボタンの日・土に色 */
#app-kids-calendar .kc-choice.kc-c-sun { color: var(--kc-sun); }
#app-kids-calendar .kc-choice.kc-c-sat { color: var(--kc-sat); }

/* ---------- つきカード ---------- */
#app-kids-calendar .kc-monthcards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

#app-kids-calendar .kc-monthcard {
    aspect-ratio: 3 / 4;
    border: 2px solid var(--bs-border-color);
    border-radius: .8rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    perspective: 600px;
}

#app-kids-calendar .kc-monthcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .5s;
    transform-style: preserve-3d;
}

#app-kids-calendar .kc-monthcard.flipped .kc-monthcard-inner {
    transform: rotateY(180deg);
}

#app-kids-calendar .kc-monthcard-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .3rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: .7rem;
    text-align: center;
}

#app-kids-calendar .kc-monthcard-front .kc-mc-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--kids-accent-text, var(--bs-primary));
}

#app-kids-calendar .kc-monthcard-front .kc-mc-emoji {
    font-size: 1.7rem;
}

#app-kids-calendar .kc-monthcard-back {
    transform: rotateY(180deg);
    background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
}

#app-kids-calendar .kc-monthcard-back .kc-mc-en {
    font-size: .95rem;
    font-weight: 800;
}

#app-kids-calendar .kc-monthcard-back .kc-mc-wafu,
#app-kids-calendar .kc-monthcard-back .kc-mc-season {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

/* ---------- きせつわけ ---------- */
#app-kids-calendar .kc-se-item {
    font-size: 4.5rem;
    line-height: 1;
}

#app-kids-calendar .kc-se-item .kc-se-name {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    margin-top: .4rem;
}

#app-kids-calendar .kc-se-item.kc-shake {
    animation: kc-shake .4s ease;
}

#app-kids-calendar .kc-seasongrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

#app-kids-calendar .kc-seasonbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 84px;
    border: 3px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 800;
    font-size: 1.7rem;
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease;
}

#app-kids-calendar .kc-seasonbtn span {
    font-size: .95rem;
}

@media (hover: hover) { #app-kids-calendar .kc-seasonbtn:hover:not(:disabled) {
    transform: translateY(-2px);
} }

#app-kids-calendar .kc-seasonbtn.kc-correct.kc-season-haru { border-color: #ec6ea3; }

@media (hover: hover) { #app-kids-calendar .kc-season-haru:hover:not(:disabled) { border-color: #ec6ea3; } }
#app-kids-calendar .kc-seasonbtn.kc-correct.kc-season-natsu { border-color: #2fb3d1; }

@media (hover: hover) { #app-kids-calendar .kc-season-natsu:hover:not(:disabled) { border-color: #2fb3d1; } }
#app-kids-calendar .kc-seasonbtn.kc-correct.kc-season-aki { border-color: #e0842f; }

@media (hover: hover) { #app-kids-calendar .kc-season-aki:hover:not(:disabled) { border-color: #e0842f; } }
#app-kids-calendar .kc-seasonbtn.kc-correct.kc-season-fuyu { border-color: #6aa9e0; }

@media (hover: hover) { #app-kids-calendar .kc-season-fuyu:hover:not(:disabled) { border-color: #6aa9e0; } }

#app-kids-calendar .kc-seasonbtn.kc-correct {
    background: color-mix(in srgb, var(--bs-success) 20%, var(--bs-body-bg));
    animation: kc-pop .4s ease;
}

#app-kids-calendar .kc-seasonbtn.kc-wrong {
    border-color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 16%, var(--bs-body-bg));
}

/* ---------- フィードバック ---------- */
#app-kids-calendar .kc-feedback {
    min-height: 2.2rem;
    font-size: 1.4rem;
    font-weight: 800;
    /* 親の揃え方に引きずられて左寄りになっていた。演出は必ず画面の中央に出す */
    text-align: center;
}

#app-kids-calendar .kc-feedback.kc-ng {
    color: var(--bs-danger);
}

/* こたえは必ず次の行に、かつ語の途中で折り返さない */
#app-kids-calendar .kc-fb-answer {
    display: block;
    white-space: nowrap;
    font-size: .85em;
    margin-top: .15rem;
}

/* ---------- アニメーション ---------- */
@keyframes kc-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes kc-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

/* ---------- モバイル ---------- */
@media (max-width: 480px) {
    #app-kids-calendar .kc-modebtn { min-height: 84px; }
    #app-kids-calendar .kc-modebtn-emoji { font-size: 1.6rem; }
    #app-kids-calendar .kc-modebtn-title { font-size: .8rem; }
    #app-kids-calendar table.kc-cal td { height: 40px; }
    #app-kids-calendar table.kc-cal th { font-size: .82rem; }
    #app-kids-calendar .kc-monthcards { gap: .4rem; }
    #app-kids-calendar .kc-se-item { font-size: 3.6rem; }
}

/* ---------- がんばりきろく（details） ---------- */
#app-kids-calendar .kc-stats {
    max-width: 420px;
    border: 2px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    padding: .3rem .9rem;
}

#app-kids-calendar .kc-stats > summary {
    cursor: pointer;
    font-weight: 700;
    padding: .35rem 0;
    list-style: none;
    color: var(--bs-body-color);
}

#app-kids-calendar .kc-stats > summary::-webkit-details-marker {
    display: none;
}

#app-kids-calendar .kc-stats-body {
    padding: .4rem 0 .6rem;
    border-top: 1px solid var(--bs-border-color);
}

#app-kids-calendar .kc-stats-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .18rem 0;
    font-weight: 600;
}

#app-kids-calendar .kc-stats-row span:first-child {
    flex: 1;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

#app-kids-calendar .kc-stats-row strong {
    color: var(--kids-accent-text, var(--bs-primary));
}

#app-kids-calendar .kc-stats-levels {
    margin-top: .5rem;
    padding-top: .4rem;
    border-top: 1px dashed var(--bs-border-color);
    font-size: .82rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

/* ---------- レベルえらび ---------- */
#app-kids-calendar .kc-levelbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
}

#app-kids-calendar .kc-levelbar-label {
    font-weight: 700;
    color: var(--bs-secondary-color);
}

/* サブタブ（「これ なんの きせつ？」等）。ラベルが長いので、折り返さず幅なりに字を縮める。
   btn-group の子は内容の幅ぶんだけ広がろうとするので、flex を効かせないと画面からはみ出す。 */
#app-kids-calendar .kc-subtab {
    width: 100%;
    max-width: 100%;
}

#app-kids-calendar .kc-subtab .btn {
    flex: 1 1 0;
    min-width: 0;        /* これが無いと内容幅で膨らんで はみ出す */
    white-space: nowrap;
    font-size: clamp(.62rem, 2.5vw, 1.05rem);
    --bs-btn-padding-x: .25rem;
}

/* スマホでは飾りのアイコンを消して、その分の幅を文字に回す。
   ラベルが切れて読めないより、アイコンが無いほうがよい。 */
@media (max-width: 480px) {
    #app-kids-calendar .kc-subtab .btn i {
        display: none;
    }
    #app-kids-calendar .kc-subtab .btn {
        font-size: clamp(.62rem, 3.1vw, .95rem);
    }
}

#app-kids-calendar .kc-levelgroup .btn {
    font-weight: 700;
    /* 「むずかしい」「チャレンジ」が2行に割れていた。iPhone 17 Pro（横402px）で
       4つ並べても1行に収まるよう、折り返しを禁止して幅なりに字を縮める */
    white-space: nowrap;
    font-size: clamp(.72rem, 3.1vw, 1rem);
    --bs-btn-padding-x: .5rem;
}

@media (max-width: 420px) {
    /* 端末の横幅いっぱいまで使う（左右の余白で潰されないように） */
    #app-kids-calendar .kc-levelgroup {
        width: 100%;
    }
    #app-kids-calendar .kc-levelgroup .btn {
        --bs-btn-padding-x: .25rem;
    }
}

/* ---------- 解説（なぜ？） ---------- */
#app-kids-calendar .kc-explain {
    max-width: 560px;
    margin: .2rem auto 0;
    min-height: 0;
    padding: 0 .8rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bs-secondary-color);
    opacity: 0;
    transition: opacity .2s ease;
}

#app-kids-calendar .kc-explain.show {
    opacity: 1;
    padding: .6rem .8rem;
}

#app-kids-calendar .kc-explain b {
    color: var(--kids-accent-text, var(--bs-primary));
    font-weight: 800;
}

#app-kids-calendar .kc-explain .fa-lightbulb {
    color: var(--bs-warning);
}

/* ---------- 数字・日付の選択肢（2列） ---------- */
#app-kids-calendar .kc-num-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- きせつ「なかまさがし」の選択肢 ---------- */
#app-kids-calendar .kc-sr-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 420px;
    margin: 0 auto;
}

#app-kids-calendar .kc-sr-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 絵文字と名前がくっついて読みにくかったので離す（Noto Color Emoji は字形が下まで詰まっている） */
    gap: .45rem;
    min-height: 104px;
    padding: .6rem .5rem;
}

#app-kids-calendar .kc-sr-emoji {
    font-size: 2.6rem;
    line-height: 1.25;
}

#app-kids-calendar .kc-sr-cname {
    font-size: .95rem;
    font-weight: 800;
}

/* 逆問題の見出しに出す季節色 */
#app-kids-calendar .kc-question .kc-se-haru { color: #ec6ea3; }
#app-kids-calendar .kc-question .kc-se-natsu { color: #2fb3d1; }
#app-kids-calendar .kc-question .kc-se-aki { color: #e0842f; }
#app-kids-calendar .kc-question .kc-se-fuyu { color: #6aa9e0; }

/* アニメーションを控える設定 */
@media (prefers-reduced-motion: reduce) {
    #app-kids-calendar * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* スマホ: カレンダーのパネルを画面内に収める */