/* 어플리케이션 소개 (2026-10-29 원장님)
   설명서가 아니라 기능 안내 — 학생 / 학부모 전환 버튼, 부채꼴로 펼친 앱 화면, 색 카드(벤토) 묶음 */

:root {
  --ap-accent: #c7801a;
  --ap-ink: #111;
  --ap-sub: #555;
}

.ap {
  color: var(--ap-ink);
}

.ap p,
.ap h2,
.ap h3,
.ap li {
  text-align: start;
  word-break: keep-all;
}

/* 소개 */
.ap-intro {
  padding-block: var(--space-9) var(--space-7);
  text-align: center;
}

.ap-intro h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
}

.ap-intro p {
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--ap-sub);
  text-align: center;
}

/* 맨 위 사진 띠 글자는 가운데 (위의 .ap p 왼쪽 정렬이 덮지 않게) */
.ap .page-visual p {
  text-align: center;
}

/* 학생 / 학부모 전환 */
.ap-switch {
  display: none;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.ap-tabs.is-ready .ap-switch {
  display: flex;
}

.ap-switch button {
  min-width: 9rem;
  padding: 0.85em 2em;
  border: 1px solid var(--ap-ink);
  background: #fff;
  color: var(--ap-ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ap-switch button:first-child {
  border-radius: 999px 0 0 999px;
}

.ap-switch button:last-child {
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.ap-switch button[aria-selected="true"] {
  background: var(--ap-ink);
  color: #fff;
}

.ap-panel[hidden] {
  display: none;
}

/* 스크립트가 없을 때는 두 칸이 차례로 보이므로 사이를 띄운다 */
.ap-panel + .ap-panel {
  margin-top: var(--space-9);
}

.ap-tabs.is-ready .ap-panel + .ap-panel {
  margin-top: 0;
}

/* 무대 — 왼쪽 글, 오른쪽 부채꼴 앱 화면 */
.ap-stage {
  overflow: hidden;
}

.ap-stage--student {
  background: linear-gradient(135deg, #fbf1e1 0%, #f3e3c7 100%);
}

.ap-stage--parent {
  background: linear-gradient(135deg, #1a1916 0%, #2b2924 100%);
  color: #fff;
}

.ap-stage__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--space-7);
  min-height: 520px;
}

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

.ap-stage--parent .ap-kicker {
  color: #f0c27a;
}

.ap-stage__text h2 {
  margin-top: var(--space-4);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: inherit;
}

.ap-stage__text p:last-child {
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--ap-sub);
}

.ap-stage--parent .ap-stage__text p:last-child {
  color: #c9c4bb;
}

.ap-fan {
  position: relative;
  height: 480px;
  margin-block: var(--space-8) calc(var(--space-9) * -1);
}

.ap-fan img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 230px;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  transform-origin: 50% 120%;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ap-fan img:nth-child(1) { transform: translateX(-50%) translateX(-190px) rotate(-10deg); }
.ap-fan img:nth-child(2) { transform: translateX(-50%) translateY(-40px); z-index: 1; }
.ap-fan img:nth-child(3) { transform: translateX(-50%) translateX(190px) rotate(10deg); }

.ap-stage:hover .ap-fan img:nth-child(1) { transform: translateX(-50%) translateX(-215px) rotate(-13deg); }
.ap-stage:hover .ap-fan img:nth-child(3) { transform: translateX(-50%) translateX(215px) rotate(13deg); }

@media (max-width: 860px) {
  .ap-stage__inner { grid-template-columns: 1fr; min-height: 0; padding-top: var(--space-8); }
  .ap-fan { height: 330px; margin-block: var(--space-5) -40px; }
  .ap-fan img { width: 150px; border-radius: 18px; }
  .ap-fan img:nth-child(1) { transform: translateX(-50%) translateX(-115px) rotate(-10deg); }
  .ap-fan img:nth-child(3) { transform: translateX(-50%) translateX(115px) rotate(10deg); }
  .ap-stage:hover .ap-fan img:nth-child(1) { transform: translateX(-50%) translateX(-115px) rotate(-10deg); }
  .ap-stage:hover .ap-fan img:nth-child(3) { transform: translateX(-50%) translateX(115px) rotate(10deg); }
}

/* 색 카드 묶음 */
.ap-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-9);
}

.ap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: 24px;
}

.ap-card__tag {
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--ap-accent);
}

.ap-card h3 {
  margin-top: var(--space-3);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: inherit;
}

.ap-card p:not(.ap-card__tag) {
  margin-top: var(--space-3);
  line-height: 1.75;
  color: var(--ap-sub);
}

/* 카드 아래에서 올라와 있는 앱 화면 — 윗부분만 보인다 */
.ap-card__peek {
  display: block;
  width: 62%;
  max-width: 220px;
  height: 240px;
  margin: auto auto calc(var(--space-6) * -1);
  object-fit: cover;
  object-position: top;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ap-card:not(.ap-card--wide) p:not(.ap-card__tag) {
  margin-bottom: var(--space-6);
}

.ap-card:hover .ap-card__peek {
  transform: translateY(-14px);
}

.ap-card__more {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
}

.ap-card__more::after {
  content: " →";
}

.ap-card__more:hover {
  opacity: 1;
}

/* 넓은 카드 — 두 칸, 글 + 화면 */
.ap-card--wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-7) 0;
}

.ap-card--wide h3 {
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
}

.ap-card--wide .ap-card__more {
  position: static;
  display: inline-block;
  margin-top: var(--space-5);
}

.ap-card--wide .ap-card__text {
  align-self: center;
  padding-bottom: var(--space-8);
}

.ap-card__phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-4);
  align-self: end;
  height: 100%;
}

.ap-card__phones img {
  width: min(46%, 220px);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ap-card__phones img:only-child {
  width: min(62%, 250px);
}

.ap-card__phones img:nth-child(2) {
  margin-bottom: -40px;
}

.ap-card--wide:hover .ap-card__phones img {
  transform: translateY(-12px);
}

.ap-card--flip .ap-card__text {
  order: 2;
}

.ap-card--full {
  grid-column: 1 / -1;
}

/* 색 */
.ap-tone-amber { background: #fbf1e1; }
.ap-tone-sand  { background: #f4f1ec; }
.ap-tone-sage  { background: #efefed; }  /* 이름은 그대로, 색은 회색 (2026-10-29 원장님: 회색 · 검정 · 오커 앰버만) */
.ap-tone-slate { background: #e7e6e3; }
.ap-tone-ink   { background: #17181b; color: #fff; }
.ap-tone-ink p:not(.ap-card__tag) { color: #b9bcc3; }
.ap-tone-ink .ap-card__tag { color: #f0c27a; }
.ap-tone-art {
  background: #2a1d14 url('/images/folios/capriccio.jpg') center / cover;
  color: #fff;
}
.ap-tone-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.86) 0%, rgba(20, 14, 10, 0.5) 100%);
}
.ap-tone-art > * { position: relative; }
.ap-tone-art p:not(.ap-card__tag) { color: #e2d9cf; }
.ap-tone-art .ap-card__tag { color: #f0c27a; }

/* 그 밖의 기능 — 작은 세 줄 */
.ap-mini {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.ap-mini li {
  padding: var(--space-5) var(--space-6);
  border: 1px solid #e6e2db;
  border-radius: 18px;
  line-height: 1.7;
  color: var(--ap-sub);
}

.ap-mini b {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 1.0625rem;
  color: var(--ap-ink);
}

@media (max-width: 960px) {
  .ap-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-mini { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ap-bento { grid-template-columns: 1fr; padding-block: var(--space-7); }
  .ap-card { min-height: 420px; }
  .ap-mini { grid-column: auto; }
  .ap-card--wide { grid-column: auto; grid-template-columns: 1fr; padding: var(--space-6) var(--space-6) 0; }
  .ap-card--wide .ap-card__text { padding-bottom: 0; }
  .ap-card--flip .ap-card__text { order: 0; }
  .ap-card__phones { height: auto; }
}

/* 나타나기 */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal-on .reveal.is-in {
  opacity: 1;
  transform: none;
}

.ap-note {
  padding-bottom: var(--space-8);
  font-size: 0.875rem;
  color: #888;
  text-align: center;
}

/* 넓은 카드의 앱 화면은 윗부분만 — 카드 아래로 넘치지 않게 */
.ap-card__phones img {
  height: 380px;
  object-fit: cover;
  object-position: top;
}

.ap-card__phones img:nth-child(2) {
  height: 340px;
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .ap-card__phones img { height: 300px; }
  .ap-card__phones img:nth-child(2) { height: 270px; }
}

/* 다른 페이지 안에 넣은 카드 묶음 (윈터스쿨) — 바깥 여백은 그 페이지를 따른다 */
.ap-bento--in {
  padding-block: 0;
  margin-top: var(--space-8);
}

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

.ap-more-app a {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-weight: var(--weight-bold);
  color: var(--ap-ink);
  text-decoration: none;
}

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

/* 앱 화면이 위로 떠오를 때 아래가 비지 않게 — 화면 아래에 흰 여백을 이어 붙여 '폰이 길게 이어지는' 느낌 (2026-10-29 원장님) */
.ap-card__peek,
.ap-card__phones img {
  box-sizing: content-box;
  padding-bottom: 60px;
  background: #fff;
}

.ap-card__peek {
  margin-bottom: calc(var(--space-6) * -1 - 60px);
}

.ap-card__phones img,
.ap-card__phones img:nth-child(2) {
  margin-bottom: -60px;
}