.tixi-page { --red: #b51b32; --ink: #222; min-width: 320px; background: #fff; }
.tixi-page .site-header { position: relative; height: 80px; background: #fff; box-shadow: 0 3px 12px rgba(138,74,59,.1); }
.tixi-page .header-inner { width: min(1700px, calc(100% - 64px)); height: 80px; }
.tixi-page .main-nav { gap: 60px; }
.tixi-page .main-nav a { font-size: 20px; }
.tixi-page .chevron { width: 0; height: 0; margin-left: 7px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.tixi-page .container { width: min(1400px, calc(100% - 64px)); }
.breadcrumb { height: 80px; display: flex; align-items: center; gap: 12px; color: rgba(34,34,34,.5); font-size: 16px; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb strong { color: var(--ink); font-weight: 400; }
.course-detail { display: grid; grid-template-columns: 680px 680px; gap: 40px; min-height: 584px; }
.course-gallery { width: 680px; }
.course-main-swiper { width: 680px; height: 456px; overflow: hidden; border-radius: 16px; }
.course-main-swiper .swiper-slide { height: 456px; }
.course-slide-image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.course-main-swiper .course-slide-image { border-radius: 16px; }
.course-thumb-swiper { width: 680px; height: 108px; margin-top: 20px; }
.course-thumb-swiper .swiper-slide { height: 108px; padding: 0; border: 1px solid transparent; border-radius: 16px; overflow: hidden; cursor: pointer; opacity: .78; }
.course-thumb-swiper .course-slide-image { border-radius: 16px; }
.course-thumb-swiper .swiper-slide-thumb-active { border-color: var(--red); opacity: 1; }
.course-visual { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f9e2d0; }
.course-main-swiper .course-visual { border-radius: 16px; }
.course-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 12%, rgba(255,255,255,.65), transparent 28%), linear-gradient(135deg,#fbe8d7 0%,#f0c59d 64%,#dc8b3f 100%); }
.course-visual::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -5%; height: 28%; background: linear-gradient(8deg,#8b461d 0%,#bd6d27 53%,#e29d54 100%); transform: perspective(500px) rotateX(8deg); box-shadow: 0 -8px 20px rgba(102,52,24,.15); }
.visual-script { position: absolute; z-index: 1; left: 3%; top: 10%; color: #a34f1c; font: 700 clamp(38px,6vw,84px)/1 var(--serif); letter-spacing: 2px; white-space: nowrap; transform: rotate(-4deg); }
.visual-subtitle { position: absolute; z-index: 3; left: 4%; top: 40%; padding: 8px 24px; color: #fff7e9; background: #9b4e25; font: 700 24px/1.3 var(--serif); }
.course-visual img { position: absolute; z-index: 2; right: 2%; bottom: 8%; height: 74%; width: auto; max-width: 62%; object-fit: contain; object-position: bottom; }
.visual-name { position: absolute; z-index: 4; right: 1%; top: 42%; padding: 5px 8px; color: #fff; background: #ad642c; font: 700 25px/1.05 var(--serif); text-align: center; }
.visual-book { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(4deg,#a85d20,#d88a39); clip-path: polygon(0 20%,48% 50%,100% 10%,100% 100%,0 100%); opacity: .92; }
.visual-two::before { background: radial-gradient(circle at 80% 6%,#fff8e6,transparent 22%), linear-gradient(130deg,#f8dfcc,#ecb888 70%,#bd6c36); }
.visual-three::before { background: linear-gradient(130deg,#f6ded1,#edbdac 60%,#bd6d42); }
.visual-four::before { background: radial-gradient(circle at 17% 20%,#fff9ec,transparent 24%), linear-gradient(120deg,#f9e8d4,#e8bd8f 65%,#bc7132); }
.course-thumb-swiper .visual-script { font-size: 22px; left: 2%; top: 14%; letter-spacing: 0; }
.course-thumb-swiper .visual-subtitle { left: 3%; top: 47%; padding: 2px 5px; font-size: 8px; }
.course-thumb-swiper .course-visual img { right: -2%; bottom: 12%; height: 86%; max-width: 60%; }
.course-thumb-swiper .visual-name, .course-thumb-swiper .visual-book { display: none; }
.course-copy { padding-top: 0; }
.course-copy h1 { position: relative; z-index: 1; margin: 0; color: var(--red); font: 700 44px/1.42 var(--serif); letter-spacing: 1px; white-space: nowrap; }
.title-underline { width: 414px; height: 21px; margin: -19px 0 35px; background: linear-gradient(180deg,transparent 20%,#eab4bc 21%,#eab4bc 80%,transparent 81%); opacity: .75; }
.course-intros { list-style: none; margin: 0; padding: 0; }
.course-intros li { position: relative; margin: 0 0 24px; padding-left: 29px; font-size: 20px; line-height: 1.75; }
.course-intros li::before { content: '•'; position: absolute; left: 3px; top: 0; color: var(--red); font-size: 27px; line-height: 1.1; }
.course-intros strong { color: var(--red); font-weight: 700; }
.course-intros span { color: var(--ink); }
.tixi-page .site-footer { margin-top: 43px; }
.tixi-page .footer-main { min-height: 281px; }


@media (max-width: 1450px) { .tixi-page .main-nav { gap: 24px; } .tixi-page .main-nav a { font-size: 17px; } .course-detail { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; } .course-gallery,.course-main-swiper,.course-thumb-swiper { width: 100%; } .course-main-swiper,.course-main-swiper .swiper-slide { height: auto; aspect-ratio: 680/456; } .course-thumb-swiper { height: auto; aspect-ratio: 680/108; } .course-thumb-swiper .swiper-slide { height: auto; } .course-copy h1 { font-size: 38px; } .course-intros li { font-size: 18px; } }
@media (max-width: 1100px) { .tixi-page .site-header,.tixi-page .header-inner { height: 72px; } .tixi-page .header-inner { width: calc(100% - 40px); } .tixi-page .main-nav { gap: 0; } .course-detail { display: block; min-height: 0; } .course-gallery { max-width: 760px; margin: 0 auto 42px; } .course-copy { max-width: 760px; margin: 0 auto; } .course-copy h1 { font-size: 36px; } .tixi-page .site-footer { margin-top: 64px; } }
@media (max-width: 700px) { .tixi-page .container { width: calc(100% - 40px); } .breadcrumb { height: 56px; gap: 8px; font-size: 13px; } .course-main-swiper,.course-main-swiper .swiper-slide { aspect-ratio: 1/0.67; } .course-thumb-swiper { margin-top: 12px; aspect-ratio: 4/0.95; } .course-thumb-swiper .swiper-slide { border-radius: 8px; } .course-copy h1 { font-size: 28px; line-height: 1.45; white-space: normal; } .title-underline { width: 250px; height: 15px; margin-top: -13px; margin-bottom: 24px; } .course-intros li { margin-bottom: 18px; padding-left: 20px; font-size: 15px; line-height: 1.8; } .course-intros li::before { left: 0; font-size: 21px; } .visual-subtitle { font-size: 13px; padding: 4px 9px; } .visual-script { font-size: 42px; } .visual-name { font-size: 16px; } .tixi-page .site-footer { margin-top: 42px; } }

/* Scope the restored course detail layout against shared page styles. */
.tixi-page .breadcrumb { height: 80px; }
.tixi-page .course-gallery, .tixi-page .course-copy { min-width: 0; }
.tixi-page .course-copy h1 { white-space: normal; overflow-wrap: anywhere; }
.tixi-page .title-underline { max-width: 100%; }
.tixi-page .course-intros ul, .tixi-page .course-intros ol { list-style: none; margin: 0; padding: 0; }
.tixi-page .course-intros p { font-size: 20px; line-height: 1.75; margin-bottom: 24px; }
.tixi-page .course-intros img { max-width: 100%; height: auto; }
@media (min-width: 1101px) {
  .tixi-page .header-actions { display: flex; }
  .tixi-page .main-nav { position: static; transform: none; gap: clamp(20px, 3vw, 50px); }
}
@media (max-width: 1450px) {
  .tixi-page .course-intros p { font-size: 18px; }
}
@media (max-width: 700px) {
  .tixi-page .breadcrumb { height: 56px; }
  .tixi-page .course-intros p { font-size: 15px; }
}