:root { color-scheme: light; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-height: 100vh; margin: 0; color: #253650; background: #f3f7fc; }
button, input { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
.class-page { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 22px calc(36px + env(safe-area-inset-bottom)); }
.class-header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 16px; }
.class-header a { display: inline-flex; align-items: center; gap: 7px; color: #4b6592; font-size: 13px; font-weight: 750; text-decoration: none; }
.class-header__actions { display: flex; min-width: 0; gap: 9px; align-items: center; }
.class-header strong { max-width: 220px; overflow: hidden; color: #7a8799; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.class-share-button { flex: 0 0 auto; height: 30px; padding: 0 10px; border: 1px solid #cfdcf1; border-radius: 8px; color: #3f639b; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.class-share-button:hover, .class-share-button:focus-visible { border-color: #6088dc; outline: none; background: #f4f7ff; }
.class-intro { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 22px; padding: 24px; border: 1px solid #dbe5f2; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(39, 67, 111, .06); }
.class-intro__mark { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 16px; color: #fff; background: #315ed1; font-size: 23px; font-weight: 900; }
.class-intro p { margin: 0; color: #5579c8; font-size: 11px; font-weight: 850; }
.class-intro h1 { margin: 4px 0; color: #243754; font-size: 27px; line-height: 1.15; }
.class-intro div > span { display: block; color: #718199; font-size: 13px; line-height: 1.6; }
.class-intro__meta { display: inline-flex; margin-top: 10px; padding: 5px 8px; border-radius: 999px; color: #5978ba; background: #edf3ff; font-size: 10px; font-weight: 800; }
.class-feature-carousel { overflow: hidden; margin-top: 12px; border: 1px solid #dbe5f2; border-radius: 14px; background: #fff; box-shadow: 0 9px 22px rgba(39, 67, 111, .05); }
.class-feature-carousel__viewport { overflow: hidden; aspect-ratio: 4 / 1; background: #edf2fa; }
.class-feature-carousel__track { display: flex; width: 100%; height: 100%; transition: transform .42s ease; }
.class-feature-carousel__track img { display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.class-feature-carousel__dots { display: flex; justify-content: center; gap: 5px; min-height: 24px; padding: 8px 12px; }
.class-feature-carousel__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #d4dce9; transition: width .2s, background .2s; }
.class-feature-carousel__dots button.is-active { width: 18px; background: #315ed1; }
.class-search-card { margin-top: 16px; padding: 22px; border: 1px solid #dce5f1; border-radius: 18px; background: #fff; }
.class-search-card form { display: grid; gap: 9px; }
.class-search-card label { display: grid; gap: 4px; color: #3b4f6c; font-size: 13px; font-weight: 800; }
.class-search-card label small { color: #8995a7; font-size: 10px; font-weight: 650; }
.class-major-select { position: relative; margin-bottom: 5px; }
.class-major-select select { width: 100%; height: 48px; padding: 0 42px 0 14px; border: 1px solid #cfd9e8; border-radius: 11px; outline: none; appearance: none; color: #263a58; background: #fbfcfe; font-size: 15px; font-weight: 750; }
.class-major-select select:invalid { color: #8995a7; font-weight: 650; }
.class-major-select select:focus { border-color: #527be1; box-shadow: 0 0 0 3px rgba(82, 123, 225, .12); }
.class-major-select > span { position: absolute; top: 50%; right: 15px; color: #6881b6; font-size: 18px; line-height: 1; pointer-events: none; transform: translateY(-58%); }
.class-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; }
.class-search-row input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #cfd9e8; border-radius: 11px; outline: none; color: #263a58; background: #fbfcfe; font-size: 15px; }
.class-search-row input:focus { border-color: #527be1; box-shadow: 0 0 0 3px rgba(82, 123, 225, .12); }
.class-search-row button { height: 48px; border: 0; border-radius: 11px; color: #fff; background: #315ed1; font-size: 14px; font-weight: 850; cursor: pointer; }
.class-search-row button:disabled { opacity: .55; cursor: not-allowed; }
.class-notice { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #edf0f5; color: #7b8799; font-size: 11px; line-height: 1.6; }
.class-result { margin-top: 16px; padding: 22px; border: 1px solid #cfe4d9; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(37, 101, 74, .06); }
.class-result__head { display: flex; gap: 11px; align-items: center; }
.class-result__head > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: #2d8a62; font-weight: 900; }
.class-result__head p, .class-result__head h2 { margin: 0; }
.class-result__head p { color: #5d8d75; font-size: 10px; font-weight: 850; }
.class-result__head h2 { margin-top: 2px; color: #29493a; font-size: 18px; }
.class-result dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.class-result dl > div { min-width: 0; padding: 14px; border: 1px solid #deebe4; border-radius: 11px; background: #f8fcfa; }
.class-result dt { color: #779183; font-size: 10px; font-weight: 800; }
.class-result dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #274638; font-size: 17px; font-weight: 900; }
.class-group-qr { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; align-items: center; margin-top: 12px; padding: 14px; border: 1px solid #d9e4f5; border-radius: 12px; background: #f7faff; }
.class-group-qr span, .class-group-qr strong, .class-group-qr p { display: block; }
.class-group-qr span { color: #5c79ba; font-size: 10px; font-weight: 850; }
.class-group-qr strong { margin-top: 4px; color: #304b78; font-size: 15px; }
.class-group-qr p { margin: 6px 0 0; color: #71819b; font-size: 11px; line-height: 1.55; }
.class-group-qr img { display: block; width: 96px; height: 96px; border: 1px solid #d5dfef; border-radius: 9px; background: #fff; object-fit: contain; }
.class-result > p { margin: 11px 0 0; color: #829087; font-size: 10px; }
.class-roommate-next { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 16px; padding: 15px; border: 1px solid #d5e3fa; border-radius: 16px; color: inherit; background: #f7faff; box-shadow: 0 10px 24px rgba(40, 82, 147, .05); text-decoration: none; }
.class-roommate-next__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #315ed1; background: #e8efff; font-size: 18px; font-weight: 900; }
.class-roommate-next__copy { display: grid; min-width: 0; gap: 2px; }
.class-roommate-next small { color: #6d86b9; font-size: 10px; font-weight: 850; }
.class-roommate-next strong { color: #29466e; font-size: 15px; }
.class-roommate-next em { overflow: hidden; color: #74839b; font-size: 11px; font-style: normal; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.class-roommate-next__arrow { color: #315ed1; font-size: 22px; font-weight: 900; }
.class-help { margin-top: 16px; padding: 16px 18px; border: 1px solid #dfe7f2; border-radius: 16px; color: #75839a; background: #fff; }
.class-help strong { display: block; color: #405675; font-size: 13px; }
.class-help p { margin: 7px 0 0; font-size: 11px; line-height: 1.6; }
.class-status { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; margin-top: 16px; padding: 18px; border: 1px solid #eadfbf; border-radius: 16px; background: #fffaf0; }
.class-status > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #876820; background: #ffefbd; font-weight: 900; }
.class-status h2 { margin: 0; color: #574c35; font-size: 15px; }
.class-status p { margin: 5px 0 0; color: #82745c; font-size: 12px; line-height: 1.6; }
.class-unavailable { display: grid; justify-items: center; margin-top: 16px; padding: 62px 22px; border: 1px solid #dce5f1; border-radius: 18px; background: #fff; text-align: center; }
.class-unavailable > span { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 17px; color: #5574b8; background: #edf3ff; font-size: 22px; font-weight: 900; }
.class-unavailable h2 { margin: 18px 0 0; color: #344863; font-size: 19px; }
.class-unavailable p { margin: 8px 0 0; color: #7b899b; font-size: 12px; line-height: 1.6; }
.class-unavailable a { min-width: 180px; margin-top: 20px; padding: 12px 18px; border-radius: 11px; color: #fff; background: #315ed1; font-size: 13px; font-weight: 850; text-decoration: none; }
footer { margin-top: 30px; color: #95a0af; font-size: 10px; text-align: center; }
@media (max-width: 560px) { .class-page { padding-right: 16px; padding-left: 16px; } .class-header { gap: 9px; } .class-header strong { max-width: 108px; } .class-share-button { padding: 0 8px; } .class-intro { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 18px; border-radius: 15px; } .class-intro__mark { width: 48px; height: 48px; border-radius: 14px; font-size: 20px; } .class-intro h1 { font-size: 23px; } .class-search-card, .class-result { padding: 17px; border-radius: 15px; } .class-search-row { grid-template-columns: minmax(0, 1fr); gap: 8px; } .class-search-row input, .class-search-row button { height: 46px; } .class-result dl { grid-template-columns: 1fr; } .class-group-qr { grid-template-columns: minmax(0, 1fr) 82px; } .class-group-qr img { width: 82px; height: 82px; } }