/* ============================================================ 프로그램 상세 페이지 공통 스타일 (2-2~2-6 공유) 원본 9-4 "공통 - Program Template" 레이아웃을 CSS 클래스로 이식. 콘텐츠(문구/features/faq)는 각 페이지 HTML에 직접 작성하고, 여기서는 구조/스타일만 공유합니다. 프로그램 컬러는 각 페이지에서 또는 배너 요소에 style="--accent: var(--gi)" 처럼 지정합니다. ============================================================ */ .program-banner { position: relative; width: 100%; height: 160px; overflow: hidden; display: flex; align-items: center; } @media (min-width: 768px) { .program-banner { height: 220px; } } .program-banner__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, color-mix(in oklch, var(--accent) 88%, transparent) 0%, color-mix(in oklch, var(--accent) 70%, transparent) 100%); pointer-events: none; } .program-banner__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 20px var(--container-pad); } @media (min-width: 768px) { .program-banner__row { gap: 16px; padding: 28px var(--container-pad); } } .program-banner__icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } @media (min-width: 768px) { .program-banner__icon { width: 48px; height: 48px; } } .program-banner__title { color: var(--paper); font-size: 26px; font-weight: 800; margin: 0; } @media (min-width: 768px) { .program-banner__title { font-size: 38px; } } .program-banner__en { font-size: 15px; font-weight: 500; margin-left: 10px; opacity: 0.85; } @media (min-width: 768px) { .program-banner__en { font-size: 18px; } } .program-overview { max-width: var(--container-max); margin: 0 auto; padding: 32px var(--container-pad); } @media (min-width: 768px) { .program-overview { padding: 64px var(--container-pad); } } .program-overview__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; } @media (min-width: 768px) { .program-overview__head { margin-bottom: 40px; } } .program-overview__icon { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; } .program-overview__heading { font-size: 20px; font-weight: 800; color: var(--ink); } @media (min-width: 768px) { .program-overview__heading { font-size: 24px; } } .program-overview__intro { font-size: 14px; line-height: 1.7; color: var(--ink-soft); flex-basis: 100%; max-width: 820px; } @media (min-width: 768px) { .program-overview__intro { font-size: 15.5px; } } .program-overview__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } @media (min-width: 1080px) { .program-overview__grid { grid-template-columns: 1.3fr 1fr; gap: 48px; } } .program-features { display: flex; flex-direction: column; gap: 4px; } .program-feature { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hair); align-items: flex-start; } .program-feature__icon { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 800; font-size: 15px; } .program-feature__title { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; } .program-feature__desc { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); } .program-gallery { display: flex; flex-direction: column; gap: 8px; } .program-gallery > * { aspect-ratio: 4/3; } .program-gallery > *:last-child { aspect-ratio: 16/9; } .program-season { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) 32px; } @media (min-width: 768px) { .program-season { padding: 0 var(--container-pad) 64px; } } .program-season__head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } @media (min-width: 768px) { .program-season__head { margin-bottom: 36px; } } .program-season__badge { font-size: 12px; font-weight: 800; color: var(--paper); background: var(--accent); padding: 5px 12px; border-radius: 20px; } .program-season__heading { font-size: 19px; font-weight: 800; color: var(--ink); } @media (min-width: 768px) { .program-season__heading { font-size: 23px; } } .program-timeline { position: relative; display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; } @media (min-width: 768px) { .program-timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 40px; } .program-timeline::before { content: ''; position: absolute; top: 9px; left: 12.5%; right: 12.5%; height: 2px; background: oklch(88% 0.01 90); z-index: 0; } } .program-timeline__stage { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; text-align: left; } @media (min-width: 768px) { .program-timeline__stage { flex-direction: column; gap: 8px; text-align: center; } } .program-timeline__dot { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--accent); } .program-timeline__label { font-size: 14px; font-weight: 800; color: var(--ink); } .program-timeline__sub { font-size: 12px; color: var(--ink-soft); font-weight: 600; } .program-topics { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 768px) { .program-topics { grid-template-columns: repeat(2,1fr); } } @media (min-width: 1080px) { .program-topics { grid-template-columns: repeat(4,1fr); } } .program-topic-card { background: var(--paper); border: 1px solid var(--hair); border-top: 3px solid var(--accent); border-radius: 6px; padding: 18px; } .program-topic-card__tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); padding: 4px 9px; border-radius: 4px; margin-bottom: 10px; } .program-topic-card__title { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.4; } .program-faq { background: var(--surface-soft); padding: 32px var(--container-pad); } @media (min-width: 768px) { .program-faq { padding: 64px var(--container-pad); } } .program-faq__heading { max-width: 900px; margin: 0 auto 24px; font-size: 20px; font-weight: 800; color: var(--ink); border-bottom: 3px solid var(--accent); padding-bottom: 10px; width: fit-content; } @media (min-width: 768px) { .program-faq__heading { font-size: 24px; } } .program-faq__list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--paper); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; } .faq-item__q { width: 100%; text-align: left; background: none; border: none; padding: 18px 20px; font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: inherit; } .faq-item__icon { font-size: 20px; font-weight: 400; color: var(--accent); transition: transform 200ms ease; } .faq-item.is-open .faq-item__icon { transform: rotate(45deg); } .faq-item__a { margin: 0; padding: 0 20px 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); display: none; } .faq-item.is-open .faq-item__a { display: block; } .program-cta { background: var(--blue-deep); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } @media (min-width: 768px) { .program-cta { padding: 64px; } } .program-cta__text { font-size: 18px; font-weight: 800; color: var(--paper); } @media (min-width: 768px) { .program-cta__text { font-size: 22px; } } .program-cta__btn { background: var(--accent); color: var(--paper); font-size: 15px; font-weight: 700; padding: 15px 32px; border-radius: 4px; }