/* S-02 is scoped to its booking route; existing pages and S-01A keep their styles. */
#s02-root { position: fixed; inset: 0; z-index: 10000; background: #f7f8fa; color: #292d31; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
#s02-root *, #s02-root *::before, #s02-root *::after { box-sizing: border-box; }
#s02-root button, #s02-root select, #s02-root input { font: inherit; }
#s02-root button { cursor: pointer; }
#s02-root .s02-page { height: 100%; display: flex; flex-direction: column; background: #f7f8fa; }
#s02-root .s02-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; -webkit-overflow-scrolling: touch; }
#s02-root .s02-hero { background: linear-gradient(138deg, #fff8f0, #fff 70%); padding: calc(16px + env(safe-area-inset-top)) 20px 20px; border-bottom: 1px solid #ffebdb; }
#s02-root .s02-kicker { display: inline-block; color: #e8822b; font-size: 12px; font-weight: 650; margin-bottom: 4px; }
#s02-root h1 { font-size: 25px; line-height: 1.28; letter-spacing: -.4px; margin: 0 0 5px; font-weight: 750; }
#s02-root .s02-hero p { margin: 0; color: #858183; font-size: 13px; line-height: 1.5; }
#s02-root .s02-preview-note { margin: 9px 14px -3px; padding: 8px 10px; border-radius: 8px; background: #fff4e7; color: #966029; font-size: 11px; line-height: 1.5; }
#s02-root section { margin: 12px 14px 0; }
#s02-root .s02-filter { border: 1px solid #f2e9df; border-radius: 18px; background: #fff; box-shadow: 0 4px 18px rgba(82,55,31,.05); padding: 17px 14px 15px; }
#s02-root .s02-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
#s02-root .s02-section-title h2 { font-size: 16px; line-height: 1.3; font-weight: 720; margin: 0; }
#s02-root .s02-section-title > span { font-size: 11px; color: #a09a96; white-space: nowrap; }
#s02-root .s02-clear { padding: 3px 0; border: 0; background: transparent; color: #d97320; font-size: 12px; font-weight: 650; }
#s02-root .s02-kinds { display: flex; gap: 9px; }
#s02-root .s02-kinds button { border: 1px solid #efeeed; border-radius: 11px; background: #fafafa; color: #686366; flex: 1; min-width: 0; height: 39px; font-size: 12px; font-weight: 620; white-space: nowrap; }
#s02-root .s02-kinds button.active { border-color: #f8bb79; background: #fff1e1; color: #e66b0c; }
#s02-root .s02-time-head { margin-top: 21px; }
#s02-root .s02-dates { display: flex; overflow-x: auto; gap: 8px; padding: 0 0 5px; scrollbar-width: none; }
#s02-root .s02-dates::-webkit-scrollbar, #s02-root .s02-quick-row::-webkit-scrollbar { display: none; }
#s02-root .s02-dates button { border-radius: 11px; background: #f8f8f8; border: 1px solid #f0efef; min-width: 74px; height: 58px; color: #797473; flex: 0 0 auto; }
#s02-root .s02-dates button small { display: block; font-size: 11px; font-weight: 550; margin-bottom: 4px; }
#s02-root .s02-dates button strong { display: block; font-size: 12px; white-space: nowrap; font-weight: 660; }
#s02-root .s02-dates button.active { color: #e66b0c; border-color: #ffc893; background: #fff5e9; }
#s02-root .s02-periods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 13px; }
#s02-root .s02-periods button { min-height: 51px; padding: 6px 4px; border: 1px solid #efebe7; border-radius: 10px; color: #69615c; background: #fbfaf9; font-size: 11px; font-weight: 650; line-height: 1.45; white-space: normal; }
#s02-root .s02-periods button.active { background: #fff1e1; border-color: #f5b46f; color: #d96812; box-shadow: 0 2px 9px rgba(225,117,32,.09); }
#s02-root .s02-time-row { display: flex; align-items: end; gap: 8px; margin-top: 13px; }
#s02-root .s02-time-row label { min-width: 0; flex: 1; font-size: 12px; color: #777270; }
#s02-root .s02-time-row label:first-child { font-weight: 610; }
#s02-root .s02-time-row span { color: #b5adab; padding-bottom: 12px; }
#s02-root .s02-time-row select { width: 100%; display: block; height: 39px; margin-top: 5px; padding: 0 8px; border: 1px solid #efebe7; background: #fbfaf9; border-radius: 9px; color: #3c3835; font-size: 13px; }
#s02-root .s02-time-row select[aria-invalid="true"] { border-color: #cc4530; }
#s02-root .s02-filter-note { margin: 11px 0 0; color: #a09b96; font-size: 11px; line-height: 1.5; }
#s02-root .s02-search { margin-top: 14px; }
#s02-root .s02-search-row { display: flex; gap: 8px; }
#s02-root .s02-search-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 11px; height: 42px; background: #fff; border: 1px solid #ece9e6; border-radius: 11px; color: #999; }
#s02-root .s02-search-box span { font-size: 23px; line-height: 1; }
#s02-root .s02-search-box input { width: 100%; outline: none; border: 0; background: transparent; color: #333; font-size: 13px; }
#s02-root .s02-country { display: flex; width: 102px; border: 1px solid #ece9e6; border-radius: 11px; background: #fff; }
#s02-root .s02-country select { max-width: 100%; border: 0; background: transparent; padding: 0 6px; color: #5d5550; font-size: 12px; }
#s02-root .s02-quick, #s02-root .s02-results { background: #fff; border-radius: 16px; border: 1px solid #f0eeec; padding: 16px 13px; }
#s02-root .s02-quick-row { display: flex; gap: 14px; overflow-x: auto; padding: 1px 2px 4px; scrollbar-width: none; }
#s02-root .s02-quick-teacher { flex: 0 0 auto; width: 63px; text-align: center; color: #46403e; border: 0; padding: 0; background: none; }
#s02-root .s02-quick-teacher > span { display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; width: 53px; height: 53px; border: 2px solid #ffdfc1; border-radius: 50%; overflow: hidden; background: #fff6ed; }
#s02-root .s02-quick-teacher img { width: 100%; height: 100%; object-fit: cover; }
#s02-root .s02-quick-teacher strong { display: block; font-size: 11px; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#s02-root .s02-result-hint { color: #a49b94; font-size: 11px; margin: -6px 0 16px; }
#s02-root .s02-results .s02-section-title h2 em { font-style: normal; color: #e77719; font-size: 13px; margin-left: 4px; }
#s02-root .s02-error { color: #a73320; background: #fff2ed; border: 1px solid #ffe1d6; border-radius: 9px; padding: 10px; font-size: 12px; line-height: 1.5; }
#s02-root .s02-loading { text-align: center; color: #86807b; font-size: 13px; padding: 24px 8px; }
#s02-root .s02-loader { display: inline-block; vertical-align: -3px; width: 14px; height: 14px; margin-right: 8px; border: 2px solid #f9dfc3; border-top-color: #ed842b; border-radius: 50%; animation: s02-spin .8s linear infinite; }
@keyframes s02-spin { to { transform: rotate(360deg); } }
#s02-root .s02-teacher-card { border-radius: 14px; border: 1px solid #f0eae5; background: #fff; padding: 14px; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(50,37,24,.045); }
#s02-root .s02-teacher-top { display: flex; justify-content: space-between; }
#s02-root .s02-person { display: flex; text-align: left; align-items: center; gap: 12px; border: 0; background: none; padding: 0; color: #312f2f; }
#s02-root .s02-avatar { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 13px; object-fit: cover; background: #fff1e2; }
#s02-root .s02-person strong { display: block; font-size: 17px; line-height: 1.32; font-weight: 760; }
#s02-root .s02-person small { display: block; font-size: 11px; color: #8c8580; margin-top: 6px; }
#s02-root .s02-person small b { display: inline-block; font-weight: 640; color: #d9721e; background: #fff1e3; padding: 3px 7px; border-radius: 6px; margin-right: 5px; }
#s02-root .s02-teacher-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#s02-root .s02-detail { display: inline-flex; align-items: center; gap: 3px; padding: 7px 0 3px; color: #d47428; border: 0; background: none; font-size: 12px; font-weight: 610; }
#s02-root .s02-detail span { font-size: 18px; line-height: 10px; }
#s02-root .s02-contact { min-height: 33px; padding: 5px 12px; border: 1px solid #f4c89f; border-radius: 8px; background: #fff4e9; color: #cc6d20; font-size: 12px; font-weight: 680; }
#s02-root .s02-skills { margin: 8px 0 13px; color: #6f6966; font-size: 12px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#s02-root .s02-slots { padding: 10px; background: #faf8f5; border-radius: 10px; }
#s02-root .s02-slots > span { font-size: 11px; font-weight: 630; color: #81746a; }
#s02-root .s02-slots > div { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
#s02-root .s02-slots button { border: 1px solid #ffca9d; background: #fff; color: #dd7620; border-radius: 7px; padding: 5px 8px; font-size: 11px; font-weight: 650; }
#s02-root .s02-slots small { color: #a19b96; font-size: 11px; }
#s02-root .s02-actions { display: grid; grid-template-columns: 1.13fr 1fr 1fr; gap: 7px; margin-top: 13px; }
#s02-root .s02-actions button { min-width: 0; min-height: 38px; border-radius: 8px; border: 1px solid #ffbd82; color: #d47626; background: #fff; font-size: 11px; font-weight: 670; white-space: nowrap; }
#s02-root .s02-actions button:first-child { border-color: #f1872b; background: #f48323; color: #fff; }
#s02-root .s02-empty { padding: 26px 18px 32px; text-align: center; color: #98908b; }
#s02-root .s02-empty > span { display: block; color: #efa862; font-size: 34px; margin-bottom: 5px; }
#s02-root .s02-empty h3 { color: #453b33; font-size: 15px; margin: 0 0 8px; }
#s02-root .s02-empty p { font-size: 12px; line-height: 1.5; }
#s02-root .s02-empty button { border: 0; background: #f2852a; color: white; padding: 9px 18px; border-radius: 9px; margin-top: 9px; font-size: 12px; }
#s02-root .s02-bottom { display: flex; justify-content: space-around; align-items: center; flex: 0 0 auto; min-height: calc(61px + env(safe-area-inset-bottom)); padding: 4px 0 env(safe-area-inset-bottom); border-top: 1px solid #eeecea; background: #fff; box-shadow: 0 -3px 12px rgba(34,30,26,.03); }
#s02-root .s02-bottom button { flex: 1; border: 0; background: none; color: #aaa5a2; font-size: 11px; font-weight: 610; display: flex; flex-direction: column; align-items: center; gap: 1px; }
#s02-root .s02-bottom button > span { font-size: 23px; line-height: 24px; font-weight: 500; }
#s02-root .s02-bottom button > img { display: block; width: 22px; height: 22px; object-fit: contain; }
#s02-root .s02-bottom button.active { color: #ef8025; font-weight: 750; }
#s02-return { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 9px; z-index: 9998; background: rgba(255,255,255,.95); border: 1px solid #eee5dd; color: #dc7726; box-shadow: 0 2px 12px rgba(30,20,10,.09); border-radius: 18px; padding: 7px 10px; font-size: 12px; }
@media (min-width: 640px) { #s02-root .s02-page { max-width: 440px; margin: 0 auto; border-inline: 1px solid #eae5df; box-shadow: 0 0 25px rgba(24,20,16,.09); } }