/* ============================================================
   Screen · About (about.blade.php)
   토큰 기반 · 다크모드 대응. home.css 컨벤션을 따른다.
   Sections: hero(page-hero 공유), feature blocks(flex/ai/progress),
            how-it-works, stats strip, final CTA.
   ============================================================ */

.about__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gio-space-7);
}
@media (max-width: 768px) {
  .about__container { padding: 0 var(--gio-space-4); }
}

/* ---------- Section rhythm ---------- */
.about-section { padding: 96px 0; }
.about-section--tight { padding: 72px 0; }
.about-section--subtle { background: var(--gio-color-bg-subtle); }
@media (max-width: 768px) {
  .about-section, .about-section--tight { padding: 56px 0; }
}

.about-section__head {
  max-width: 640px;
  margin: 0 0 var(--gio-space-7);
}
.about-section__head--center {
  margin-inline: auto;
  text-align: center;
}
.about-section__eyebrow {
  display: inline-block;
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
  color: var(--gio-color-action);
  margin-bottom: var(--gio-space-3);
}
.about-section__title {
  font-family: var(--gio-font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: var(--gio-w-bold);
  letter-spacing: -0.02em;
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-3);
  text-wrap: balance;
}
.about-section__sub {
  font-size: var(--gio-text-base);
  line-height: 1.6;
  color: var(--gio-color-text-muted);
  margin: 0;
}

/* ---------- Feature block: split layout (text + visual) ---------- */
.about-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gio-space-9);
  align-items: center;
}
.about-feature + .about-feature { margin-top: 96px; }
.about-feature--reverse .about-feature__media { order: -1; }
@media (max-width: 920px) {
  .about-feature { grid-template-columns: 1fr; gap: var(--gio-space-7); }
  .about-feature + .about-feature { margin-top: 64px; }
  .about-feature--reverse .about-feature__media { order: 0; }
}

.about-feature__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gio-space-2);
  padding: 6px 12px;
  background: var(--gio-color-action-soft);
  color: var(--gio-color-action);
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--gio-radius-pill);
  margin-bottom: var(--gio-space-4);
}
.about-feature__title {
  font-family: var(--gio-font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: var(--gio-w-bold);
  letter-spacing: -0.02em;
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-4);
  text-wrap: balance;
}
.about-feature__body {
  font-size: var(--gio-text-lg);
  line-height: 1.6;
  color: var(--gio-color-text-muted);
  margin: 0 0 var(--gio-space-5);
}
.about-feature__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--gio-space-3);
}
.about-feature__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--gio-space-3);
  font-size: var(--gio-text-base);
  color: var(--gio-color-text);
  line-height: 1.5;
}
.about-feature__list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gio-color-action);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.about-feature__list li strong { color: var(--gio-color-text-strong); font-weight: var(--gio-w-semibold); }

/* ---------- Feature media card ---------- */
.about-card {
  background: var(--gio-color-surface);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-2xl);
  box-shadow: var(--gio-shadow-xl);
  padding: var(--gio-space-6);
  position: relative;
  overflow: hidden;
}
.about-card::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 4px;
  background: linear-gradient(90deg, var(--gio-color-action), var(--gio-color-skill-speaking), var(--gio-color-accent));
}
.about-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--gio-space-5);
}
.about-card__label {
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--gio-tracking-wide);
}

/* AI feedback card — band dial + criteria */
.about-card__band {
  display: flex;
  align-items: center;
  gap: var(--gio-space-5);
  padding: var(--gio-space-5);
  background: var(--gio-color-bg-subtle);
  border-radius: var(--gio-radius-xl);
  margin-bottom: var(--gio-space-4);
}
.about-band-dial {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--gio-color-surface) 70%, transparent 71%),
    conic-gradient(var(--gio-color-action) 0 83%, var(--gio-color-border) 83% 100%);
}
.about-band-dial__value {
  font-family: var(--gio-font-display);
  font-size: 28px;
  font-weight: var(--gio-w-extrabold);
  color: var(--gio-color-text-strong);
  line-height: 1;
}
.about-band-dial__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--gio-tracking-wide);
  color: var(--gio-color-text-muted);
}
.about-card__note {
  font-size: var(--gio-text-sm);
  line-height: 1.55;
  color: var(--gio-color-text-muted);
}
.about-card__note strong { color: var(--gio-color-text-strong); font-weight: var(--gio-w-semibold); }
.about-card__criteria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gio-space-3);
}
.about-crit {
  padding: var(--gio-space-3);
  background: var(--gio-color-bg-subtle);
  border-radius: var(--gio-radius-md);
  display: flex; flex-direction: column; gap: 2px;
}
.about-crit__label { font-size: var(--gio-text-xs); color: var(--gio-color-text-muted); }
.about-crit__value {
  font-family: var(--gio-font-display);
  font-size: 22px; font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
}

/* Flex mode card — mode rows */
.about-mode {
  display: flex;
  align-items: flex-start;
  gap: var(--gio-space-4);
  padding: var(--gio-space-4);
  border-radius: var(--gio-radius-lg);
  border: 1px solid var(--gio-color-border);
  background: var(--gio-color-bg-subtle);
}
.about-mode + .about-mode { margin-top: var(--gio-space-3); }
.about-mode__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--gio-radius-md);
  display: grid; place-items: center;
  font-size: 18px;
  background: var(--gio-color-action-soft);
  color: var(--gio-color-action);
}
.about-mode--accent .about-mode__icon { background: var(--gio-color-accent-soft); color: var(--gio-color-accent-strong); }
.about-mode--success .about-mode__icon { background: var(--gio-color-success-soft); color: var(--gio-color-success); }
.about-mode__name {
  font-size: var(--gio-text-base);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  margin: 0 0 2px;
}
.about-mode__desc {
  font-size: var(--gio-text-sm);
  line-height: 1.5;
  color: var(--gio-color-text-muted);
  margin: 0;
}

/* Progress card — band trend + skill bars */
.about-card__trend {
  display: flex;
  align-items: flex-end;
  gap: var(--gio-space-2);
  height: 96px;
  padding: var(--gio-space-4);
  background: var(--gio-color-bg-subtle);
  border-radius: var(--gio-radius-xl);
  margin-bottom: var(--gio-space-4);
}
.about-trend__bar {
  flex: 1;
  border-radius: var(--gio-radius-xs) var(--gio-radius-xs) 0 0;
  background: linear-gradient(180deg, var(--gio-color-action), color-mix(in oklab, var(--gio-color-action) 55%, transparent));
}
.about-skill {
  display: grid;
  grid-template-columns: 88px 1fr 36px;
  align-items: center;
  gap: var(--gio-space-3);
}
.about-skill + .about-skill { margin-top: var(--gio-space-3); }
.about-skill__name {
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text);
}
.about-skill__track {
  height: 8px;
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-bg-subtle);
  overflow: hidden;
}
.about-skill__fill {
  height: 100%;
  border-radius: var(--gio-radius-pill);
}
.about-skill__val {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  text-align: right;
}

/* ---------- How it works ---------- */
.about-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gio-space-5);
}
@media (max-width: 920px) { .about-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .about-steps { grid-template-columns: 1fr; } }
.about-step {
  padding: var(--gio-space-6);
  background: var(--gio-color-surface);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-xl);
}
.about-step__num {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-action);
  margin-bottom: var(--gio-space-3);
}
.about-step__title {
  font-size: var(--gio-text-lg);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-2);
}
.about-step__body {
  font-size: var(--gio-text-sm);
  line-height: 1.55;
  color: var(--gio-color-text-muted);
  margin: 0;
}

/* ---------- Stats strip ---------- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gio-space-7);
}
@media (max-width: 768px) { .about-stats { grid-template-columns: repeat(2, 1fr); gap: var(--gio-space-5); } }
.about-stat { display: flex; flex-direction: column; gap: 4px; }
.about-stat__value {
  font-family: var(--gio-font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--gio-w-extrabold);
  letter-spacing: -0.02em;
  color: var(--gio-color-text-strong);
}
.about-stat__label {
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
}

/* ---------- Final CTA ---------- */
.about-cta-final {
  padding: 96px 0;
  text-align: center;
}
.about-cta-final__inner { max-width: 720px; margin: 0 auto; }
.about-cta-final__title {
  font-family: var(--gio-font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--gio-w-extrabold);
  letter-spacing: -0.025em;
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-4);
  text-wrap: balance;
}
.about-cta-final__sub {
  font-size: var(--gio-text-lg);
  color: var(--gio-color-text-muted);
  margin: 0 0 var(--gio-space-6);
}
.about-cta-final__ctas { display: flex; gap: var(--gio-space-3); justify-content: center; flex-wrap: wrap; }