/* Local-only supplier-management collection draft. It reuses the established compact collection layout without changing shared styles. */
@import url('/course-collection/ai-agent-workflow-training-courses/style.css');

.smc-page { --smc-red: #ad0800; --smc-line: #dedfe1; --smc-soft: #fff7f6; }
.smc-page .smt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; max-width: none; gap: 28px; align-items: start; }
.smc-page .smt-hero-grid > :first-child { display: flex; min-width: 0; max-width: 700px; flex-direction: column; justify-content: center; }
.smc-hero-aside { padding: 20px; border: 1px solid var(--smc-line); border-radius: 6px; background: #fff; }
.smc-hero-aside h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; }
.smc-hero-aside dl { margin: 0; }
.smc-hero-aside dl > div { padding: 10px 0; border-top: 1px solid #eceeef; }
.smc-hero-aside dt { color: #777; font-size: 12px; }
.smc-hero-aside dd { margin: 3px 0 0; color: #2f3337; font-size: 14px; }
.smc-scenario-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.smc-scenario-card { min-height: 202px; }
.smc-scenario-card > span { display: inline-flex; width: fit-content; margin-bottom: 16px; padding: 3px 8px; border: 1px solid #efcfcc; border-radius: 4px; color: var(--smc-red); background: var(--smc-soft); font-size: 12px; font-weight: 700; }
.smc-course-list { display: grid; width: min(100%, 900px); margin-inline: auto; gap: 10px; }
.smc-course-card { position: relative; display: block; box-sizing: border-box; min-height: 260px; overflow: hidden; padding: 10px 11px 15px; border: 0; border-radius: 15px; background: linear-gradient(106.2deg, rgba(255, 216, 195, .2666666667) 0%, rgba(255, 218, 213, .3607843137) 100%); }
.smc-course-card::before { position: absolute; z-index: 0; top: 46px; right: 2px; bottom: 2px; left: 2px; border-radius: 14px; background: rgba(254, 254, 255, .8); content: ''; pointer-events: none; }
.smc-course-card > * { position: relative; z-index: 1; }
.smc-course-card:has(:focus-visible) { box-shadow: 0 0 0 3px rgba(173, 8, 0, .08); }
.smc-course-main { padding: 0; }
.smc-course-main h3 { margin: 0; font-size: 22px; font-weight: 650; line-height: 30px; }
.smc-course-main h3 a { color: #333; text-decoration: none; }
.smc-course-main h3 a:hover { color: var(--smc-red); text-decoration: underline; }
.smc-course-main > p { margin: 22px 0 0; color: #333; font-size: 15px; line-height: 1.4; }
.smc-course-expert { display: flex; min-width: 0; align-items: center; gap: 0; margin-top: 6px; padding: 8px 0 10px; border-bottom: 1px solid #ffe4db; }
.smc-course-expert img { display: block; width: 30px; height: 30px; flex: 0 0 30px; margin-right: 9px; border-radius: 8px; object-fit: cover; }
.smc-course-expert strong { position: relative; top: .5px; margin-right: 8px; color: #000; font-size: 15px; font-weight: 500; line-height: 1.4; }
.smc-course-expert-link { color: inherit; text-decoration: none; }
.smc-course-expert-link:hover { color: var(--smc-red); text-decoration: underline; }
.smc-course-expert span { position: relative; top: .8px; min-width: 0; overflow: hidden; color: #626262; font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.smc-course-facts { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "audience" "selection" "modules"; row-gap: 7px; margin: 12px 0 0; padding: 0; border: 0; background: transparent; }
.smc-course-facts > div { min-width: 0; padding: 0; line-height: 20px; }
.smc-course-audience { grid-area: audience; }
.smc-course-selection { grid-area: selection; }
.smc-course-modules { grid-area: modules; }
.smc-course-facts dt, .smc-course-facts dd { display: inline; margin: 0; font-size: 14px; line-height: 20px; }
.smc-course-facts dt { color: #333; }
.smc-course-facts dt::after { content: '：'; }
.smc-course-facts dd { color: #333; }
.smc-selection-example { margin-top: 16px; padding: 20px 22px; border-left: 3px solid var(--smc-red); background: var(--smc-soft); }
.smc-selection-example h3 { margin: 0 0 8px; font-size: 17px; }
.smc-selection-example p { max-width: 920px; margin: 0; color: #555c61; font-size: 14px; line-height: 1.85; }
.smc-preparation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.smc-preparation-grid article { padding: 22px; border: 1px solid var(--smc-line); border-radius: 6px; background: #fff; }
.smc-preparation-grid h3 { margin: 0 0 10px; font-size: 17px; }
.smc-preparation-grid p { margin: 0; color: #555c61; font-size: 14px; line-height: 1.8; }
.smc-related-links { display: flex; flex-wrap: wrap; gap: 12px; }
.smc-related-links a { display: inline-flex; min-height: 42px; align-items: center; padding: 8px 14px; border: 1px solid #e7c4be; border-radius: 6px; color: var(--smc-red); font-size: 14px; font-weight: 700; text-decoration: none; }
.smc-related-links a:hover { border-color: var(--smc-red); background: var(--smc-soft); }
.smc-related-links a:focus-visible, .smc-modal-close:focus-visible { outline: 3px solid rgba(173, 8, 0, .35); outline-offset: 2px; }
.smc-modal { position: fixed; z-index: 2000; inset: 0; display: none; place-items: center; padding: 20px; }
.smc-modal:target { display: grid; }
.smc-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .48); }
.smc-modal-panel { position: relative; z-index: 1; width: min(265px, 100%); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 18px 48px rgba(0, 0, 0, .24); text-align: center; }
.smc-modal-close { position: absolute; z-index: 2; top: 8px; right: 10px; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff !important; background: rgba(255, 255, 255, .3); font-size: 19px; line-height: 1; text-decoration: none; }
.smc-wechat-top { position: relative; height: 128px; overflow: hidden; padding: 18px 18px 0; color: #fff; text-align: left; }
.smc-wechat-top > img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.smc-wechat-top > div { font-size: 20px; font-weight: 700; }
.smc-wechat-top p { margin: 4px 0 0; font-size: 12px; }
.smc-wechat-qr { width: 190px; height: 189px; margin: -14px auto 0; border-radius: 10px; background: #fff; object-fit: contain; }
.smc-wechat-bottom { margin: 0; padding: 12px 18px 18px; color: #2d3033; font-size: 13px; font-weight: 700; }
@media (max-width: 900px) { .smc-page .smt-hero-grid, .smc-scenario-grid, .smc-preparation-grid { grid-template-columns: 1fr; }.smc-scenario-card { min-height: auto; }.smc-course-facts { grid-template-columns: 1fr; grid-template-areas: "audience" "selection" "modules"; } }
@media (max-width: 640px) { .smc-hero-aside, .smc-preparation-grid article, .smc-selection-example { padding: 18px; }.smc-course-card { padding: 12px 10px; }.smc-course-main h3 { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }.smc-course-main > p { margin-top: 14px; font-size: 14px; }.smc-course-expert { align-items: flex-start; }.smc-course-expert span { overflow: visible; text-overflow: clip; white-space: normal; }.smc-related-links { display: grid; }.smc-related-links a { width: 100%; }.smc-modal { padding: 14px; } }