.participate-page { background: #e8edf2; }
.guide-hero { position: relative; overflow: hidden; background: #14294f; color: #f6f4ee; }
.guide-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, #14294f 9%, rgba(20,41,79,.82) 60%, rgba(20,41,79,.4)), url('/graphics/academy-night-2026.webp') center 54% / cover no-repeat; opacity: .8; content: ''; }
.guide-hero::after { position: absolute; right: -7%; bottom: -116px; width: 53%; height: 210px; border: 1px solid rgba(202,222,239,.26); border-radius: 50%; box-shadow: 0 0 0 28px rgba(192,216,235,.035), 0 0 0 57px rgba(192,216,235,.025); content: ''; pointer-events: none; }
.guide-hero-inner { position: relative; min-height: 405px; padding-top: 134px; padding-bottom: 68px; }
.guide-hero .detail-back { display: inline-block; margin-bottom: 29px; }
.guide-hero h1 { margin: 21px 0 19px; font-family: 'Maru Buri', serif; font-size: clamp(52px, 6.7vw, 86px); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; }
.guide-title-dot { color: #9ac6e1; }
.guide-hero-inner > p:last-of-type { position: relative; z-index: 1; margin: 0; color: #dbe6ef; font-size: 16px; line-height: 1.85; word-break: keep-all; }
.guide-hero-glyph { position: absolute; right: 7%; bottom: -65px; color: rgba(223,238,249,.09); font-family: 'Maru Buri', serif; font-size: clamp(170px, 22vw, 320px); line-height: 1; pointer-events: none; }
.guide-body { padding: 48px 0 94px; }
.guide-notice { display: flex; align-items: flex-start; gap: 17px; padding: 20px 27px; border-left: 3px solid #345f89; border-radius: 0 24px 0 16px; background: #d9e5ee; }
.guide-notice-icon { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid #6b90ae; border-radius: 50%; color: #335c81; font-family: 'Pretendard Variable', sans-serif; font-size: 15px; font-weight: 700; }
.guide-notice p { margin: 0; color: #4b6480; font-size: 13px; line-height: 1.8; word-break: keep-all; }
.guide-notice strong { margin-right: 8px; color: #183b62; }
.guide-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 33px 0 66px; }
.guide-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 118px; align-content: center; padding: 20px 25px; border: 1px solid #afc2d1; border-radius: 2px 27px 2px 21px; background: #f7f6f1; color: #1b3558; transition: background .2s, transform .2s; }
.guide-index a:first-child { border-color: #315b85; background: #284d7b; color: #f7f6f1; }
.guide-index a:hover { transform: translateY(-3px); background: #e0ebf3; }
.guide-index a:first-child:hover { background: #345f8e; }
.guide-index span { grid-column: 1 / 3; margin-bottom: 10px; color: #6c88a4; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.guide-index a:first-child span { color: #bad4e5; }
.guide-index strong { font-family: 'Maru Buri', serif; font-size: 25px; font-weight: 600; letter-spacing: -.05em; }
.guide-index b { align-self: end; color: #6e8daa; font-size: 21px; font-weight: 400; }
.guide-index a:first-child b { color: #bed7e8; }
.guide-event { overflow: hidden; margin-top: 42px; border: 1px solid #b6c8d6; border-top: 3px solid #406b95; border-radius: 3px 42px 3px 31px; background: #f7f6f1; scroll-margin-top: 95px; }
.guide-event-next { border-top-color: #8ab6d2; background: #f1f5f6; }
.guide-event-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 39px 45px 32px; border-bottom: 1px solid #c5d2dc; background: linear-gradient(110deg, rgba(212,230,240,.6), rgba(243,247,248,0) 70%); }
.guide-kicker { margin: 0 0 17px; color: #597a99; font-family: 'Pretendard Variable', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.guide-event-heading h2 { margin: 0; color: #1c365b; font-family: 'Maru Buri', serif; font-size: clamp(35px, 4vw, 52px); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; }
.guide-event-heading h2 span { margin-left: 13px; color: #87a4bc; font-size: .37em; letter-spacing: .02em; vertical-align: middle; }
.guide-event-heading div > p:last-child { margin: 13px 0 0; color: #506985; font-size: 14px; line-height: 1.7; }
.guide-status { flex: 0 0 auto; padding: 9px 14px; border: 1px solid #a6bacb; border-radius: 15px 2px 15px 2px; color: #315878; font-size: 12px; font-weight: 700; }
.guide-status[data-state="recruiting"] { border-color: #255b84; background: #255b84; color: white; }
.guide-content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
.guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 11px 26px 21px 45px; }
.guide-facts > div { min-width: 0; padding: 22px 17px 18px 0; border-bottom: 1px solid #d0dbe3; }
.guide-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.guide-facts span { display: block; margin-bottom: 8px; color: #6c8399; font-size: 12px; }
.guide-facts strong { display: block; color: #203b5a; font-size: 15px; font-weight: 600; line-height: 1.6; word-break: keep-all; }
.guide-side { padding: 36px 37px; border-left: 1px solid #c5d2dc; background: #e8f0f3; }
.guide-side h3, .guide-bottom h3 { margin: 0 0 22px; color: #1d3a5f; font-family: 'Maru Buri', serif; font-size: 22px; font-weight: 600; letter-spacing: -.05em; }
.guide-side > p { margin: 14px 0 0; color: #526c82; font-size: 13px; line-height: 1.8; word-break: keep-all; }
.guide-source { display: inline-block; margin-top: 19px; padding-bottom: 3px; border-bottom: 1px solid #6d8aa2; color: #2b5579; font-size: 12px; font-weight: 700; }
.guide-route { margin: 0; padding: 0 0 0 20px; color: #274c70; font-size: 14px; line-height: 1.8; }
.guide-route li + li { margin-top: 8px; }
.guide-bottom { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); border-top: 1px solid #c5d2dc; }
.guide-bottom > div:first-child { padding: 37px 45px 42px; }
.guide-bottom details { border-top: 1px solid #c5d2dc; }
.guide-bottom details:last-child { border-bottom: 1px solid #c5d2dc; }
.guide-bottom summary { position: relative; padding: 18px 30px 18px 0; color: #284c70; font-size: 14px; font-weight: 700; line-height: 1.5; cursor: pointer; list-style: none; }
.guide-bottom summary::-webkit-details-marker { display: none; }
.guide-bottom summary::after { position: absolute; right: 4px; top: 17px; content: '+'; color: #6789a5; font-size: 19px; font-weight: 400; }
.guide-bottom details[open] summary::after { content: '−'; }
.guide-bottom details p { margin: 0 0 20px; color: #5b7186; font-size: 13px; line-height: 1.8; word-break: keep-all; }
.guide-actions { display: flex; flex-direction: column; justify-content: center; padding: 35px 37px; border-left: 1px solid #c5d2dc; }
.guide-actions p { margin: 0 0 14px; color: #59738c; font-size: 12px; font-weight: 700; }
.guide-actions .button-dark { min-height: 55px; border-radius: 3px 18px 3px 14px; font-size: 13px; }
.guide-detail-link { width: fit-content; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid #7894aa; color: #315b80; font-size: 13px; font-weight: 700; }
.guide-update { margin: 28px 0 0; color: #71869b; font-size: 12px; line-height: 1.7; }
@media (max-width: 900px) { .guide-content, .guide-bottom { grid-template-columns: 1fr; } .guide-side, .guide-actions { border-left: 0; border-top: 1px solid #c5d2dc; } .guide-side { padding: 28px 36px; } .guide-actions { padding: 28px 36px; } }
@media (max-width: 680px) { .guide-hero-inner { min-height: 380px; padding-top: 110px; padding-bottom: 55px; } .guide-hero h1 { font-size: 51px; } .guide-hero-inner > p:last-of-type { font-size: 14px; } .guide-hero-inner > p:last-of-type br { display: none; } .guide-hero-glyph { right: -5%; bottom: -42px; font-size: 165px; } .guide-body { padding-top: 27px; padding-bottom: 75px; } .guide-notice { padding: 17px; } .guide-index { gap: 8px; margin: 24px 0 45px; } .guide-index a { min-height: 94px; padding: 13px 10px; border-radius: 2px 17px 2px 13px; } .guide-index span { font-size: 9px; line-height: 1.3; } .guide-index strong { font-size: 17px; } .guide-index b { font-size: 15px; } .guide-event { margin-top: 29px; border-radius: 3px 29px 3px 23px; scroll-margin-top: 82px; } .guide-event-heading { display: block; padding: 27px 22px 24px; } .guide-event-heading h2 { font-size: 36px; } .guide-event-heading h2 span { display: inline-block; margin-left: 6px; font-size: 13px; } .guide-event-heading div > p:last-child { font-size: 13px; } .guide-status { display: inline-block; margin-top: 16px; font-size: 11px; } .guide-facts { padding: 5px 13px 16px 22px; } .guide-facts > div { padding: 17px 9px 16px 0; } .guide-facts span { font-size: 11px; } .guide-facts strong { font-size: 13px; } .guide-side { padding: 26px 22px; } .guide-bottom > div:first-child { padding: 27px 22px 30px; } .guide-actions { padding: 26px 22px 31px; } .guide-side h3, .guide-bottom h3 { font-size: 20px; } }