.teacher-page { container-type: inline-size; }
.teacher-profile { --profile-unit: calc(100vw / 1200); color: #2a2a2a; background: #fff; font-family: Inter, sans-serif; padding-top: 60px; }
.teacher-profile *, .teacher-gallery__dialog * { box-sizing: border-box; }
.teacher-profile__navigation { max-width: 100%; padding: calc(20 * 100cqw / 1200) 0 calc(10 * 100cqw / 1200) calc(120 * 100cqw / 1200); }
.teacher-profile__back { display: inline-flex; align-items: center; gap: calc(10 * 100cqw / 1200); width: calc(200 * 100cqw / 1200); height: calc(55 * 100cqw / 1200); color: #999; text-decoration: none; font-size: calc(14 * 100cqw / 1200); }
.teacher-profile__back svg { width: calc(20 * 100cqw / 1200); height: calc(20 * 100cqw / 1200); }
.teacher-profile__layout { display: grid; grid-template-columns: repeat(2, calc(460 * var(--profile-unit))); gap: calc(40 * var(--profile-unit)); width: 100%; max-width: calc(1200 * var(--profile-unit)); margin: auto; padding: 0 calc(120 * var(--profile-unit)) calc(75 * var(--profile-unit)); }
.teacher-gallery { min-width: 0; }
.teacher-gallery__open { display: block; color: inherit; cursor: zoom-in; }
.teacher-gallery__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.teacher-gallery__thumbnails { display: flex; flex-wrap: wrap; gap: calc(4 * var(--profile-unit)) calc(5 * var(--profile-unit)); padding-top: calc(4 * var(--profile-unit)); }
.teacher-gallery__thumbnail { position: relative; display: block; width: calc(60 * var(--profile-unit)); height: calc(60 * var(--profile-unit)); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.teacher-gallery__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teacher-gallery__thumbnail[aria-current="true"]::after { content: ''; position: absolute; inset: 0; border: 1px solid #222; }
.teacher-profile__info { min-width: 0; }
.teacher-profile h1 { margin: 0; font-size: calc(46 * var(--profile-unit)); line-height: 1.35; font-weight: 500; letter-spacing: calc(-1 * var(--profile-unit)); }
.teacher-profile__biography { margin-top: calc(20 * var(--profile-unit)); font-size: calc(16 * var(--profile-unit)); line-height: 1.55; letter-spacing: calc(-.5 * var(--profile-unit)); }
.teacher-profile__biography p { margin: 0; }
.teacher-profile__biography p + p { margin-top: 1.55em; }
.teacher-profile__biography b { font-weight: 500; }
.teacher-profile__biography strong { font-weight: 700; }
.teacher-profile__biography h2 { margin: calc(24.8 * var(--profile-unit)) 0; font-size: calc(34 * var(--profile-unit)); font-weight: 500; line-height: 1.55; letter-spacing: inherit; }
.teacher-profile__schedule { display: flex; align-items: center; justify-content: center; min-height: calc(58 * var(--profile-unit) + 2px); margin-top: calc(60 * var(--profile-unit)); padding: calc(18.5 * var(--profile-unit)) calc(40 * var(--profile-unit)); border: 1px solid #2a2a2a; background: #cfd8be; color: #2a2a2a; font-size: calc(15 * var(--profile-unit)); line-height: 1.4; letter-spacing: calc(-.5 * var(--profile-unit)); text-align: center; text-decoration: none; }
.teacher-profile__schedule:hover { background: #bcc8a7; }
.teacher-gallery__dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: #333; }
.teacher-gallery__dialog::backdrop { background: #fff; }
.teacher-gallery__enlarged { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: pan-y pinch-zoom; }
.teacher-gallery__dialog button { position: absolute; z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; color: #333; background: #ffffffb3; font: 300 42px/1 Arial, sans-serif; cursor: pointer; }
.teacher-gallery__dialog button[hidden] { display: none; }
.teacher-gallery__close { top: 10px; right: 10px; }
.teacher-gallery__previous { top: calc(50% - 25px); left: 10px; }
.teacher-gallery__next { top: calc(50% - 25px); right: 10px; }
.teacher-gallery__status { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 6px 12px; background: #ffffffb3; font: 14px/1.5 Inter, sans-serif; }

@media (min-width: 1900px) {
    .teacher-profile { padding-top: 80px; }
    .teacher-profile__navigation { padding: calc(20 * 100cqw / 1900) 0 calc(10 * 100cqw / 1900) calc(230 * 100cqw / 1900); }
    .teacher-profile__back { width: calc(200 * 100cqw / 1900); height: calc(55 * 100cqw / 1900); gap: calc(10 * 100cqw / 1900); font-size: calc(20 * 100cqw / 1900); }
    .teacher-profile__back svg { width: calc(20 * 100cqw / 1900); height: calc(20 * 100cqw / 1900); }
}
@media (min-width: 1920px) and (max-width: 2559px) {
    .teacher-profile { --profile-unit: calc(100vw / 1200 - .08px); }
}
@media (min-width: 960px) and (max-width: 1199px) {
    .teacher-profile { --profile-unit: calc(100vw / 960); }
    .teacher-profile__navigation { padding: calc(10 * 100cqw / 960) 0 calc(10 * 100cqw / 960) calc(10 * 100cqw / 960); }
    .teacher-profile__back { width: calc(200 * 100cqw / 960); height: calc(55 * 100cqw / 960); gap: calc(10 * 100cqw / 960); font-size: calc(14 * 100cqw / 960); }
    .teacher-profile__back svg { width: calc(20 * 100cqw / 960); height: calc(20 * 100cqw / 960); }
    .teacher-profile__layout { grid-template-columns: repeat(2, calc(380 * var(--profile-unit))); gap: calc(20 * var(--profile-unit)); max-width: calc(960 * var(--profile-unit)); padding-inline: calc(90 * var(--profile-unit)); }
}
@media (max-width: 959px) {
    .teacher-profile { --profile-unit: 1px; padding-top: calc(50 * 100cqw / 640); }
    .teacher-profile__navigation { padding: 0 0 calc(10 * 100cqw / 640) calc(10 * 100cqw / 640); }
    .teacher-profile__back { width: calc(200 * 100cqw / 640); height: calc(55 * 100cqw / 640); gap: calc(10 * 100cqw / 640); font-size: calc(14 * 100cqw / 640); }
    .teacher-profile__back svg { width: calc(20 * 100cqw / 640); height: calc(20 * 100cqw / 640); }
    .teacher-profile__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 640px; padding-inline: 20px; }
    .teacher-profile h1 { font-size: 26px; }
}
@media (min-width: 900px) and (max-width: 959px) {
    .teacher-profile h1 { font-size: 46px; }
}
@media (max-width: 639px) {
    .teacher-profile { padding-top: 0; }
    .teacher-profile__navigation { padding: calc(20 * 100cqw / 320 - 1px) 0 calc(10 * 100cqw / 320) calc(15 * 100cqw / 320); }
    .teacher-profile__back { width: calc(200 * 100cqw / 320); height: calc(40 * 100cqw / 320); gap: calc(10 * 100cqw / 320); font-size: calc(12 * 100cqw / 320); }
    .teacher-profile__back svg { width: calc(20 * 100cqw / 320); height: calc(20 * 100cqw / 320); }
    .teacher-gallery__thumbnails { gap: 3px 4px; padding-top: 3px; }
    .teacher-gallery__thumbnail { width: 40px; height: 40px; }
}
@media (max-width: 480px), (orientation: landscape) and (max-height: 480px) {
    .teacher-profile h1 { font-size: calc(26 * var(--profile-unit)); }
    .teacher-profile__biography { font-size: calc(15 * var(--profile-unit)); }
    .teacher-profile__biography h2 { margin-block: calc(23.25 * var(--profile-unit)); }
}
