/* N수정규반 소개 페이지 (2026-10-29 원장님)
   pearlabyss.com/ko-KR/Company/About 의 흐름(큰 문장 → 세 칸 가치 → 연표 → 마무리 질문)만 참고하고,
   부품은 iBEX 식으로 새로 만들었다. brand.css(pb-*) 위에 얹어 쓴다. */

.rg-kicker {
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  color: var(--pb-accent);
  text-align: center;
}

/* 세 가지 원칙 — 사진 + 번호 + 키워드 */
.rg-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  padding-block: var(--space-9);
}

.rg-pillar figure {
  margin: 0 0 var(--space-5);
  overflow: hidden;
}

.rg-pillar img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.rg-pillar:hover img {
  transform: scale(1.04);
}

.rg-pillar__no {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--pb-accent);
}

.rg-pillar h3 {
  margin-top: var(--space-2);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.rg-pillar__meta {
  margin-top: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--pb-ink);
  font-size: 0.9375rem;
  color: #777;
}

.rg-pillar p:last-child {
  margin-top: var(--space-4);
  line-height: 1.8;
  color: var(--pb-sub);
  word-break: keep-all;
}

@media (max-width: 860px) {
  .rg-pillars { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-8); }
}

/* 정규 모의고사 — 사진 + 번호 목록 */
.rg-exams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  text-align: start;
}

.rg-exams__photo {
  margin: 0;
}

.rg-exams__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rg-exams__list > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid #e3e3e3;
}

.rg-exams__list > li:first-child {
  border-top: 1px solid var(--pb-ink);
}

.rg-exams__no {
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--pb-accent);
  font-variant-numeric: tabular-nums;
}

.rg-exams__list h3 {
  font-size: 1.1875rem;
  font-weight: var(--weight-bold);
}

.rg-exams__list p {
  margin-top: var(--space-2);
  line-height: 1.75;
  color: var(--pb-sub);
  word-break: keep-all;
}

.rg-more {
  margin-top: var(--space-7);
  text-align: center;
}

.rg-more a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-weight: var(--weight-bold);
  color: var(--pb-ink);
  text-decoration: none;
}

/* 평소에는 밑줄 없음, 올리면 밑줄이 가운데서 양쪽으로 펼쳐진다 (2026-10-31 원장님) */
.rg-more a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.rg-more a:hover::before,
.rg-more a:focus-visible::before {
  transform: scaleX(1);
}

.rg-more a::after {
  content: " →";
}

@media (max-width: 860px) {
  .rg-exams { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* 한 해의 흐름 — 왼쪽 시기, 가운데 세로선과 점, 오른쪽 내용 */
.rg-year {
  max-width: 50rem;
  margin: var(--space-8) auto 0;
  text-align: start;
}

.rg-year > li {
  position: relative;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}

/* 세로선 */
.rg-year > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  bottom: 0;
  left: calc(8rem + var(--space-7) / 2);
  width: 1px;
  background: var(--pb-line);
}

.rg-year > li:last-child::before {
  display: none;
}

/* 점 */
.rg-year > li::after {
  content: "";
  position: absolute;
  top: 0.4em;
  left: calc(8rem + var(--space-7) / 2 - 5px);
  width: 11px;
  height: 11px;
  border: 2px solid var(--pb-ink);
  border-radius: 50%;
  background: var(--pb-band);
  box-sizing: border-box;
}

.rg-year > li.is-key::after {
  border-color: var(--pb-accent);
  background: var(--pb-accent);
}

.rg-year__when {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  text-align: end;
  white-space: nowrap;
}

.rg-year > li.is-key .rg-year__when,
.rg-year > li.is-key h3 {
  color: var(--pb-accent);
}

.rg-year h3 {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  word-break: keep-all;
}

.rg-year p:not(.rg-year__when) {
  margin-top: var(--space-2);
  line-height: 1.75;
  color: var(--pb-sub);
  word-break: keep-all;
}

@media (max-width: 600px) {
  .rg-year > li { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-6); }
  .rg-year > li::before { left: calc(5.5rem + var(--space-6) / 2); }
  .rg-year > li::after { left: calc(5.5rem + var(--space-6) / 2 - 5px); }
  .rg-year__when { font-size: 1rem; white-space: normal; }
}

/* 원서 상담 — 사진 + 수시 · 정시 두 장 */
.rg-apply {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  gap: var(--space-6);
  margin-top: var(--space-8);
  text-align: start;
}

.rg-apply figure {
  margin: 0;
}

.rg-apply img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.rg-apply__cards {
  display: grid;
  gap: var(--space-5);
}

.rg-apply__card {
  padding: var(--space-6);
  border: 1px solid #ddd;
}

.rg-apply__label {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--pb-accent);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  color: var(--pb-accent);
}

.rg-apply__card h3 {
  margin-top: var(--space-3);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  word-break: keep-all;
}

.rg-apply__card p:last-child {
  margin-top: var(--space-3);
  line-height: 1.75;
  color: var(--pb-sub);
  word-break: keep-all;
}

@media (max-width: 860px) {
  .rg-apply { grid-template-columns: 1fr; }
  .rg-apply img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* 마무리 — 어두운 띠 위 질문과 버튼 두 개 */
.rg-cta {
  padding-block: var(--space-9);
  background: #111;
  color: #fff;
  text-align: center;
}

.rg-cta h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-align: center;
  word-break: keep-all;
}

.rg-cta p {
  margin-top: var(--space-4);
  color: #bbb;
  text-align: center;
  word-break: keep-all;
}

.rg-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.rg-btn {
  display: inline-block;
  min-width: 10rem;
  padding: 0.9em 1.6em;
  border: 1px solid #fff;
  color: #fff;
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.rg-btn:hover,
.rg-btn--fill {
  background: #fff;
  color: #111;
}

.rg-btn--fill:hover {
  background: var(--pb-accent);
  border-color: var(--pb-accent);
  color: #fff;
}

/* 좁은 화면에서 양쪽 맞춤으로 글자 사이가 벌어지지 않게 */
.rg-pillar p,
.rg-exams__list p,
.rg-year p,
.rg-apply__card p {
  text-align: start;
}

.rg-year p.rg-year__when {
  text-align: end;
}

/* Project 강조 — 옅은 앰버 띠 + 앱 화면 세 장 */
.rg-project {
  padding-block: var(--space-9);
  background: #fbf6ee;
  text-align: center;
}

.rg-phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  justify-content: center;
  gap: var(--space-7);
  margin-top: var(--space-8);
}

.rg-phones figure {
  margin: 0;
}

.rg-phones img,
.rg-support__item img {
  display: block;
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.rg-phones figcaption {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  text-align: center;
}

.rg-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  max-width: 60rem;
  margin: var(--space-8) auto 0;
  text-align: start;
}

.rg-facts li {
  padding-top: var(--space-4);
  border-top: 2px solid var(--pb-accent);
}

.rg-facts b {
  display: block;
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
}

.rg-facts span {
  display: block;
  margin-top: var(--space-2);
  line-height: 1.75;
  color: var(--pb-sub);
  word-break: keep-all;
}

@media (max-width: 760px) {
  .rg-phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .rg-phones img { border-radius: 12px; }
  .rg-phones figcaption { font-size: 0.75rem; }
  .rg-facts { grid-template-columns: 1fr; }
}

/* 학습 지원 — 질문 · Library (앱 화면 + 설명) */
.rg-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
  text-align: start;
}

.rg-support__item {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}

.rg-support__item figure {
  margin: 0;
}

.rg-support__item h3 {
  margin-top: var(--space-2);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  word-break: keep-all;
}

.rg-support__item p:last-child {
  margin-top: var(--space-4);
  line-height: 1.8;
  color: var(--pb-sub);
  text-align: start;
  word-break: keep-all;
}

@media (max-width: 960px) {
  .rg-support { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 520px) {
  .rg-support__item { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: var(--space-4); }
  .rg-support__item h3 { font-size: 1.125rem; }
}

.rg-facts span {
  text-align: start;
}

/* 질문 · Library 화면은 아래가 비어 있어 윗부분만 보여 준다 */
.rg-support__item img {
  aspect-ratio: 9 / 13;
  object-fit: cover;
  object-position: top;
}

/* Folio 네 단계 — 앞 단계가 다음 단계의 재료가 되므로 화살표로 잇는다 (고등정규반) */
.rg-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 64rem;
  margin: var(--space-8) auto 0;
  text-align: start;
  counter-reset: none;
}

.rg-flow li {
  position: relative;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid #eadbc4;
}

.rg-flow li + li::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(var(--space-5) / -2);
  transform: translate(-50%, -50%);
  color: var(--pb-accent);
  font-weight: var(--weight-bold);
}

.rg-flow span {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--pb-accent);
}

.rg-flow b {
  display: block;
  margin-top: var(--space-2);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
}

.rg-flow p {
  margin-top: var(--space-2);
  line-height: 1.7;
  color: var(--pb-sub);
  text-align: start;
  word-break: keep-all;
}

@media (max-width: 860px) {
  .rg-flow { grid-template-columns: 1fr; gap: var(--space-6); }
  .rg-flow li + li::before { content: "↓"; top: calc(var(--space-6) / -2); left: 50%; }
}

/* Project · Folio 두 장 — 마우스를 올린 쪽이 넓게 펼쳐진다 (Project 가 기본으로 넓다) */
.rg-duo-sec {
  padding-block: var(--space-9);
  text-align: center;
}

.rg-duo {
  display: flex;
  gap: var(--space-4);
  height: 560px;
  margin-top: var(--space-8);
  text-align: start;
}

.rg-duo__panel {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-7);
  border-radius: 28px;
  color: inherit;
  text-decoration: none;
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rg-duo__panel--project {
  flex-grow: 1.7;
  background: linear-gradient(140deg, #fbf1e1, #f1dfbf);
}

.rg-duo__panel--folio {
  background: #17140f url('/images/folios/harmonia.jpg') center / cover;
  color: #fff;
}

.rg-duo__panel--folio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(18, 14, 10, 0.92) 30%, rgba(18, 14, 10, 0.55));
}

/* 마우스를 올린 쪽이 넓어지고, 다른 쪽은 좁아진다 */
.rg-duo:hover .rg-duo__panel,
.rg-duo:focus-within .rg-duo__panel { flex-grow: 1; }
.rg-duo .rg-duo__panel:hover,
.rg-duo .rg-duo__panel:focus-visible { flex-grow: 1.7; }

.rg-duo__text {
  position: relative;
  z-index: 1;
  flex: 0 0 20rem;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
}

.rg-duo__name {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  color: var(--pb-accent);
}

.rg-duo__panel--folio .rg-duo__name {
  color: #f0c27a;
}

.rg-duo__text h3 {
  margin-top: var(--space-3);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: inherit;
  word-break: keep-all;
}

.rg-duo__list {
  margin-top: var(--space-6);
}

.rg-duo__list li {
  padding-block: var(--space-3);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pb-sub);
  text-align: start;
  word-break: keep-all;
}

.rg-duo__panel--folio .rg-duo__list li {
  border-top-color: rgba(255, 255, 255, 0.16);
  color: #cfc7bb;
}

.rg-duo__list b {
  display: block;
  color: var(--pb-ink);
}

.rg-duo__panel--folio .rg-duo__list b {
  color: #fff;
}

.rg-duo__more {
  margin-top: auto;
  font-weight: var(--weight-bold);
}

.rg-duo__more::after {
  content: " →";
}

/* 앱 화면 두 장 — 패널이 좁을 땐 오른쪽으로 숨고, 넓어지면 드러난다 */
.rg-duo__phones {
  position: absolute;
  z-index: 1;
  right: var(--space-6);
  bottom: -70px;
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
}

.rg-duo__phones img {
  width: 168px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.rg-duo__phones img:first-child {
  margin-bottom: 60px;
}

.rg-duo__panel--folio .rg-duo__phones,
.rg-duo:hover .rg-duo__panel--project:not(:hover) .rg-duo__phones {
  opacity: 0;
  transform: translateX(40%);
}

.rg-duo:hover .rg-duo__panel--folio:hover .rg-duo__phones,
.rg-duo .rg-duo__panel--folio:focus-visible .rg-duo__phones {
  opacity: 1;
  transform: none;
}

/* 좁은 화면 · 터치 — 두 장을 위아래로 다 펼쳐 둔다 */
@media (max-width: 960px), (hover: none) {
  .rg-duo { flex-direction: column; height: auto; }
  .rg-duo__panel,
  .rg-duo:hover .rg-duo__panel,
  .rg-duo .rg-duo__panel:hover { flex: none; flex-direction: column; padding: var(--space-6) var(--space-6) 0; }
  .rg-duo__text { flex: none; max-width: none; }
  .rg-duo__more { margin-top: var(--space-4); }
  .rg-duo__phones,
  .rg-duo__panel--folio .rg-duo__phones,
  .rg-duo:hover .rg-duo__panel--project:not(:hover) .rg-duo__phones {
    position: relative; right: auto; bottom: auto; justify-content: center;
    margin-top: var(--space-6); opacity: 1; transform: none;
  }
  .rg-duo__phones img { width: min(42%, 180px); border-radius: 18px 18px 0 0; height: 260px; object-fit: cover; object-position: top; }
  .rg-duo__phones img:first-child { margin-bottom: 0; }
}

/* 좁은 폭(윈터스쿨 본문 1040px)에 넣을 때 — 앱 화면은 한 장만 */
.rg-duo--narrow {
  height: 520px;
}

.rg-duo--narrow .rg-duo__text {
  flex-basis: 18rem;
  max-width: 18rem;
}

.rg-duo--narrow .rg-duo__phones img:first-child {
  margin-bottom: 0;
}

.rg-duo--narrow + .ap-bento--in {
  margin-top: var(--space-5);
}

/* Project · Folio 두 장 — '자세히 보기'는 카드 오른쪽 위 */
.rg-duo__more {
  position: absolute;
  top: var(--space-7);
  right: var(--space-7);
  z-index: 2;
  margin-top: 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

.rg-duo__panel:hover .rg-duo__more {
  opacity: 1;
}

@media (max-width: 960px), (hover: none) {
  .rg-duo__more { top: var(--space-6); right: var(--space-6); margin-top: 0; }
}

/* '자세히 보기'가 글 묶음이 아니라 카드 모서리를 기준으로 놓이게 */
.rg-duo__text {
  position: static;
}

.rg-duo__text > * {
  position: relative;
  z-index: 1;
}

.rg-duo__text > .rg-duo__more {
  position: absolute;
  z-index: 2;
}