/* 情境任務公開試玩頁（/scenarios）
   templates/scenarios/index.html、try.html、use.html 共用；.claude/logs/scenario-trial-page.md */

.sc-page { --sc-blue: #3C6F9A; --sc-teal: #3C938A; --sc-green: #00b297; --sc-ink: #1f2d3d; --sc-muted: #475569;
           --sc-line: #dfe6ee; --sc-soft: #f4f8fb; background: #f7f9fb; padding-top: 0; padding-bottom: 48px; color: var(--sc-ink); }
.sc-hero { background: linear-gradient(149deg, #3C6F9A 0%, #3C938A 100%); color: #fff; padding: 44px 0 40px; }
.sc-hero .sc-kicker { font-size: .85rem; letter-spacing: 1px; font-weight: 700; opacity: .9; }
.sc-hero h1 { color: #fff; font-size: 1.9rem; font-weight: 700; margin: 8px 0 12px; line-height: 1.35; }
.sc-hero p { font-size: 1.05rem; max-width: 760px; opacity: .95; margin: 0; line-height: 1.7; }
.sc-hero.sc-hero-compact { padding: 26px 0 22px; }
.sc-hero.sc-hero-compact h1 { font-size: 1.5rem; margin: 6px 0 8px; }
.sc-hero a.sc-back { color: #fff; opacity: .9; font-size: .95rem; }
.sc-hero a.sc-back:hover { opacity: 1; text-decoration: underline; }

.sc-section-title { font-size: 1.25rem; font-weight: 700; margin: 34px 0 14px; color: var(--sc-ink); }
.sc-hint { font-size: .95rem; color: var(--sc-muted); line-height: 1.7; }

/* 情境卡：hover 只變色，不位移 */
.sc-card { background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; padding: 22px; height: 100%;
           display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.sc-card:hover { border-color: var(--sc-teal); box-shadow: 0 0 0 3px rgba(60, 147, 138, .15); }
.sc-card .sc-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(60, 111, 154, .1); color: var(--sc-blue);
                    display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 12px; }
.sc-tag { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--sc-teal); background: rgba(60, 147, 138, .1);
          border-radius: 50rem; padding: 2px 10px; margin-bottom: 8px; }
.sc-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; color: var(--sc-ink); }
.sc-roles { list-style: none; padding: 0; margin: 0 0 10px; font-size: .95rem; color: var(--sc-ink); }
.sc-roles li { margin-bottom: 4px; }
.sc-roles i { color: var(--sc-teal); width: 18px; }
.sc-card .sc-practice { font-size: .95rem; color: var(--sc-muted); line-height: 1.65; flex: 1; }
.sc-card .sc-note { font-size: .85rem; color: #8a5a00; background: #fff8e6; border-radius: 8px; padding: 6px 10px; margin-top: 10px; }
.sc-card .sc-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* 主要 CTA：pill */
.sc-btn-primary { display: inline-block; border: 0; border-radius: 50rem; padding: 9px 22px; font-weight: 700; color: #fff !important;
                  background: #3C6F9A; background: linear-gradient(149deg, #3C6F9A 0%, #3C938A 100%); cursor: pointer; }
.sc-btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.sc-btn-primary[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.sc-btn-ghost { display: inline-block; border-radius: 50rem; padding: 8px 20px; font-weight: 600; color: var(--sc-blue) !important;
                background: rgba(60, 111, 154, .08); border: 1px solid rgba(60, 111, 154, .4); cursor: pointer; }
.sc-btn-ghost:hover { background: rgba(60, 111, 154, .18); text-decoration: none; }
.sc-link { font-weight: 600; color: var(--sc-blue); }

/* 老師怎麼用：步驟 */
.sc-step { background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; padding: 18px 20px; height: 100%; }
.sc-num { width: 30px; height: 30px; border-radius: 50%; background: var(--sc-blue); color: #fff; font-weight: 700;
                   display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sc-step h4 { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; color: var(--sc-ink); }
.sc-step p { font-size: .95rem; color: var(--sc-muted); margin: 0; line-height: 1.65; }
.sc-box { background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; padding: 18px 22px; }
.sc-box ul { margin: 0; padding-left: 20px; }
.sc-box li { font-size: .95rem; color: var(--sc-muted); line-height: 1.75; }

/* 試玩頁 */
.sc-panel { background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; }
.sc-task { padding: 20px; }
.sc-task h5 { font-size: .9rem; font-weight: 700; color: var(--sc-teal); margin: 0 0 6px; letter-spacing: .5px; }
.sc-task .sc-task-text { font-size: .98rem; line-height: 1.75; color: var(--sc-ink); white-space: pre-wrap; margin-bottom: 16px; }
.sc-chat { display: flex; flex-direction: column; min-height: 520px; }
.sc-chat-head { padding: 12px 18px; border-bottom: 1px solid var(--sc-line); display: flex; justify-content: space-between;
                align-items: center; gap: 10px; }
.sc-chat-head .sc-who { font-weight: 700; }
.sc-chat-head .sc-turns { font-size: .9rem; color: var(--sc-muted); white-space: nowrap; }
.sc-msgs { flex: 1; overflow-y: auto; padding: 18px; max-height: 58vh; min-height: 320px; background: var(--sc-soft); }
.sc-msg { display: flex; margin-bottom: 12px; }
.sc-msg .sc-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: .98rem; line-height: 1.65;
                     white-space: pre-wrap; word-break: break-word; }
.sc-msg.sc-ai .sc-bubble { background: #fff; border: 1px solid var(--sc-line); border-top-left-radius: 4px; }
.sc-msg.sc-me { justify-content: flex-end; }
.sc-msg.sc-me .sc-bubble { background: #3C6F9A; color: #fff; border-top-right-radius: 4px; }
.sc-msg .sc-name { font-size: .8rem; color: var(--sc-muted); margin-bottom: 3px; }
.sc-typing { color: var(--sc-muted); font-size: .9rem; padding: 0 18px 10px; background: var(--sc-soft); }
.sc-start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
            padding: 30px 20px; background: var(--sc-soft); }
.sc-start p { color: var(--sc-muted); max-width: 420px; }
.sc-input { border-top: 1px solid var(--sc-line); padding: 12px 14px; }
.sc-input textarea { width: 100%; resize: vertical; min-height: 64px; border: 1px solid var(--sc-line); border-radius: 10px;
                     padding: 10px 12px; font-size: 1rem; }
.sc-input textarea:focus { outline: none; border-color: var(--sc-teal); box-shadow: 0 0 0 3px rgba(60, 147, 138, .15); }
.sc-input-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sc-input-row .sc-hint { font-size: .9rem; }
.sc-disclaimer { font-size: .9rem; color: var(--sc-muted); margin-top: 10px; }

/* 回饋 */
.sc-feedback { padding: 24px; margin-top: 24px; }
.sc-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sc-score .sc-score-num { font-size: 2.4rem; font-weight: 700; color: var(--sc-blue); line-height: 1; }
.sc-score .sc-score-max { color: var(--sc-muted); }
.sc-crit { border-top: 1px solid var(--sc-line); padding: 14px 0; }
.sc-crit-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.sc-bar { height: 8px; background: #e8eef4; border-radius: 50rem; margin: 8px 0; overflow: hidden; }
.sc-bar > span { display: block; height: 100%; background: #3C938A; border-radius: 50rem; }
.sc-crit .sc-comment { font-size: .95rem; color: var(--sc-muted); line-height: 1.65; }
.sc-overall { background: var(--sc-soft); border-radius: 10px; padding: 14px 16px; font-size: .98rem; line-height: 1.75; margin: 14px 0; }
.sc-reveal { border: 1px dashed var(--sc-teal); border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.sc-reveal h5 { font-size: 1rem; font-weight: 700; color: var(--sc-teal); margin: 0 0 6px; }
.sc-reveal .sc-task-text { white-space: pre-wrap; font-size: .95rem; line-height: 1.75; margin: 0; }
.sc-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }

/* 用在我的課 */
.sc-course { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0;
             border-top: 1px solid var(--sc-line); }
.sc-course:first-child { border-top: 0; }
.sc-course .sc-course-name { font-weight: 600; }
.sc-course .sc-course-meta { font-size: .9rem; color: var(--sc-muted); }

/* 介紹頁（index.html） */
.sc-hero-cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sc-btn-light { display: inline-block; border-radius: 50rem; padding: 10px 24px; font-weight: 700; background: #fff; color: #3C6F9A !important; }
.sc-btn-light:hover { background: #eef5f9; text-decoration: none; }
.sc-hero-note { font-size: .95rem; opacity: .95; }
.sc-pain-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(60, 147, 138, .12); color: var(--sc-teal);
                display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 10px; }
.sc-flow { display: flex; align-items: stretch; gap: 10px; margin-bottom: 8px; }
.sc-flow-item { flex: 1; background: #fff; border: 1px solid var(--sc-line); border-radius: 12px; padding: 18px 20px; }
.sc-flow-item h4 { font-size: 1.02rem; font-weight: 700; margin: 0 0 6px; color: var(--sc-ink); }
.sc-flow-item p { font-size: .95rem; color: var(--sc-muted); margin: 0; line-height: 1.65; }
.sc-flow-arrow { display: flex; align-items: center; color: var(--sc-teal); font-size: 1.6rem; }
.sc-compare-wrap { padding: 6px 12px; overflow-x: auto; }
.sc-compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sc-compare th, .sc-compare td { padding: 11px 12px; border-bottom: 1px solid var(--sc-line); text-align: left; vertical-align: top; line-height: 1.6; }
.sc-compare tbody tr:last-child th, .sc-compare tbody tr:last-child td { border-bottom: 0; }
.sc-compare thead th { font-weight: 700; color: var(--sc-muted); }
.sc-compare tbody th { font-weight: 700; color: var(--sc-ink); white-space: nowrap; }
.sc-compare td { color: var(--sc-muted); }
.sc-compare .sc-compare-ours { background: rgba(60, 147, 138, .07); color: var(--sc-ink); font-weight: 600; }
.sc-compare thead .sc-compare-ours { color: var(--sc-teal); }
.sc-faq details { background: #fff; border: 1px solid var(--sc-line); border-radius: 10px; margin-bottom: 10px; padding: 0 18px; }
.sc-faq details[open] { border-color: rgba(60, 147, 138, .5); }
.sc-faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; color: var(--sc-ink); }
.sc-faq details p { font-size: .95rem; color: var(--sc-muted); line-height: 1.75; margin: 0 0 14px; }
.sc-closing { margin-top: 36px; text-align: center; background: #fff; border: 1px solid var(--sc-line); border-radius: 14px; padding: 32px 20px; }
.sc-closing h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; color: var(--sc-ink); }
.sc-closing p { color: var(--sc-muted); max-width: 620px; margin: 0 auto 18px; line-height: 1.7; }

@media (max-width: 767px) {
    .sc-flow { flex-direction: column; }
    .sc-flow-arrow { justify-content: center; transform: rotate(90deg); font-size: 1.3rem; }
    .sc-compare tbody th { white-space: normal; }
}

@media (max-width: 767px) {
    .sc-hero h1 { font-size: 1.45rem; }
    .sc-msg .sc-bubble { max-width: 92%; }
    .sc-msgs { max-height: 60vh; }
}