/* Layout & Grid System */

/* ================================
   Accessibility: Skip Link
   ================================ */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-6);
  background: var(--gradient-primary);
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-modal) + 1);
  transition: top var(--transition-fast);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================
   Back to Top Button
   ================================ */
.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 50;
  cursor: pointer;
  border: none;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.back-to-top:active {
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* Dark mode adjustment */
[data-theme="dark"] .back-to-top {
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .back-to-top:hover {
  box-shadow: var(--shadow-xl);
}

/* Mobile adjustment */
@media (max-width: 640px) {
  .back-to-top {
    bottom: var(--space-6);
    right: var(--space-4);
    width: 44px;
    height: 44px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Legacy section helpers for subpages */
.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

.section--dense {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

@media (min-width: 768px) {
  .section--dense {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

.section__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: var(--space-2);
}

@media (min-width: 768px) {
  .section__title {
    font-size: var(--font-size-4xl);
  }
}

@media (min-width: 1024px) {
  .section__title {
    font-size: var(--font-size-5xl);
  }
}

.section__subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .section__subtitle {
    font-size: var(--font-size-lg);
  }
}

/* ================================
   Section Hierarchy (Phase 3)
   ================================ */
.section-shell {
  --section-shell-bg: transparent;
  position: relative;
  padding-top: var(--section-space-y);
  padding-bottom: var(--section-space-y);
  overflow: hidden;
}

.section-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--section-shell-bg);
  pointer-events: none;
  z-index: 0;
}

.section-shell::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--section-divider);
  opacity: 0.75;
  pointer-events: none;
}

.section-shell > .container {
  position: relative;
  z-index: 1;
}

.section-shell .section-heading {
  font-size: var(--font-size-section-title-fluid);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tight);
  text-align: center;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.section-shell .section-heading::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin: var(--space-4) auto 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  opacity: 0.82;
}

.section-shell .section-subheading {
  font-size: var(--font-size-section-subtitle);
  line-height: 1.75;
  text-align: center;
  color: var(--color-text-secondary);
  max-width: var(--content-measure);
  margin: 0 auto var(--space-12);
}

.section-shell--impact {
  --section-shell-bg:
    radial-gradient(1000px circle at 10% 10%, rgba(5, 83, 177, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-background) 0%, var(--color-surface-soft) 100%);
}

.section-shell--skills {
  --section-shell-bg:
    linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-background) 100%);
}

.section-shell--experience {
  --section-shell-bg:
    radial-gradient(900px circle at 85% 5%, rgba(0, 217, 255, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-background) 0%, var(--color-background-alt) 100%);
}

.section-shell--projects {
  --section-shell-bg:
    radial-gradient(900px circle at 20% 0%, rgba(5, 83, 177, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-background-alt) 0%, var(--color-background) 100%);
}

.section-shell--education {
  --section-shell-bg:
    linear-gradient(180deg, var(--color-background) 0%, var(--color-surface-soft) 100%);
}

.section-shell--contact {
  --section-shell-bg:
    radial-gradient(800px circle at 90% 15%, rgba(0, 217, 255, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-background) 100%);
}

.section-shell--etc {
  --section-shell-bg:
    linear-gradient(180deg, var(--color-background) 0%, var(--color-background-alt) 100%);
}

@media (max-width: 640px) {
  .section-shell {
    padding-top: var(--section-space-y-compact);
    padding-bottom: var(--section-space-y-compact);
  }

  .section-shell .section-heading::after {
    width: 56px;
    margin-top: var(--space-3);
  }

  .section-shell .section-subheading {
    margin-bottom: var(--space-10);
  }
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: rgba(250, 250, 250, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-light);
  z-index: var(--z-header);
  transition: transform var(--transition-base), background-color var(--transition-base);
}

[data-theme="dark"] .header {
  background-color: rgba(13, 17, 23, 0.85);
  border-bottom-color: var(--color-border);
}

.header--hidden {
  transform: translateY(-100%);
}

/* Navigation layout uses utility classes in index.html.
   Keep only reusable BEM hooks still referenced by JS/CSS. */

.nav__link {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.nav__link:hover,
.nav__link.active {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .nav__link {
    font-size: var(--font-size-sm);
  }
}

/* Hero Section */
.hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + var(--section-space-y-compact));
  padding-bottom: var(--section-space-y-compact);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-wash);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

.hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__content {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-12);
  }
}

.hero__text {
  z-index: 1;
}

.hero__content-text {
  max-width: min(680px, 100%);
}

.hero__terminal {
  display: none;
}

@media (min-width: 1024px) {
  .hero__content-text {
    max-width: 100%;
  }

  .hero__terminal {
    display: block;
  }
}

.hero__greeting {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin-bottom: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-3);
}

.hero__name {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.hero__role {
  font-size: var(--font-size-hero-subtitle);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
}

.hero__description {
  font-size: var(--font-size-base);
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: min(58ch, 100%);
  margin-bottom: 0;
}

.hero__actions {
  margin-top: var(--space-2);
}

/* Legacy CTA container for subpages */
.hero__text .hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.hero__actions .hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-base),
              background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-fast);
}

.hero__actions .hero__cta:hover {
  transform: translateY(-2px);
}

.hero__actions .hero__cta:active {
  transform: translateY(0);
}

.hero__actions .hero__cta--primary {
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 14px 32px rgba(5, 83, 177, 0.24);
}

.hero__actions .hero__cta--primary:hover {
  box-shadow: 0 20px 36px rgba(5, 83, 177, 0.34);
}

.hero__actions .hero__cta--secondary {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(5, 83, 177, 0.24);
}

.hero__actions .hero__cta--secondary:hover {
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

[data-theme="dark"] .hero__actions .hero__cta--secondary {
  background: rgba(22, 27, 34, 0.72);
  border-color: rgba(0, 217, 255, 0.28);
}

@media (max-width: 640px) {
  .hero__actions {
    width: 100%;
  }

  .hero__actions .hero__cta {
    width: 100%;
  }
}

/* Hero Background Effects */
.hero__bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(5, 83, 177, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 83, 177, 0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .hero__bg-grid {
  background-image:
    linear-gradient(rgba(0, 217, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, 0.025) 1px, transparent 1px);
}

.hero__bg-glow {
  position: absolute;
  top: 20%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, var(--color-primary) 0%, transparent 70%);
  opacity: 0.08;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

[data-theme="dark"] .hero__bg-glow {
  opacity: 0.15;
}

/* Skills Grid */
.skills__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .skills__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--space-10);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0%,
    var(--color-primary) 50%,
    var(--color-border) 50%,
    var(--color-border) 100%
  );
  background-size: 2px 20px;
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-12);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-10) + 0px);
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  border: 3px solid var(--color-background);
  box-shadow: var(--glow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline__marker::after {
  content: '';
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: var(--radius-full);
}

.timeline__content {
  background-color: var(--color-surface);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  position: relative;
  transition: all var(--transition-base);
}

.timeline__content::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--color-border-light);
}

.timeline__content::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid var(--color-surface);
}

.timeline__content:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

/* Projects Grid - Simplified Responsive */
.projects__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 100%;
  align-items: stretch;
}

@media (min-width: 480px) and (max-width: 767px) {
  .projects__grid {
    max-width: 400px;
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .project-card__actions {
    flex-wrap: wrap;
  }

  .project-card__links {
    width: 100%;
    justify-content: flex-start;
  }

  .project-card__links .project-action-link {
    flex: 1;
  }

  .project-card__private {
    margin-left: auto;
  }
}

/* Featured 프로젝트 - 2열 확장 */
@media (min-width: 768px) {
  .project-card--featured {
    grid-column: span 2;
  }
}

/* Education Timeline */
.education__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

/* Vertical timeline line (mobile) */
.education__timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--color-primary) 10%,
    var(--color-primary) 90%,
    transparent 100%
  );
}

/* Desktop: Horizontal timeline */
@media (min-width: 768px) {
  .education__timeline {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-4);
  }

  /* Horizontal timeline line */
  .education__timeline::before {
    left: 10%;
    right: 10%;
    top: 40px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--color-primary) 15%,
      var(--color-primary) 85%,
      transparent 100%
    );
  }
}

/* Contact Grid */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .contact__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ETC Grid */
.etc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .etc__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================
   Tablet Breakpoint (640-767px)
   ================================ */
@media (min-width: 640px) and (max-width: 767px) {
  /* Legacy hero classes for subpages */
  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__text .hero__cta {
    justify-content: center;
  }

  /* Skills: 2 columns */
  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Projects: Handled by 480-767px media query above */

  /* Impact: 2 columns */
  .impact__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Education: Vertical timeline */
  .education__timeline {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .education__timeline::before {
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: auto;
    top: 0;
    bottom: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--color-primary) 10%,
      var(--color-primary) 90%,
      transparent 100%
    );
  }

  .education-card {
    max-width: 360px;
    padding-left: var(--space-6);
    padding-top: var(--space-6);
    text-align: left;
  }

  .education-card::before {
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
  }

  .education-card::after {
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
  }

  .education-card__icon {
    margin-left: 0;
    margin-right: 0;
  }

  .education-card__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* ETC: Single column */
  .etc__grid {
    grid-template-columns: 1fr;
  }

  /* Section heading adjustments */
  .section-shell .section-heading {
    font-size: clamp(1.72rem, 7vw, 2.12rem);
  }

  .section-shell .section-subheading {
    font-size: 0.98rem;
  }

  .section__title {
    font-size: var(--font-size-3xl);
  }

  .section__subtitle {
    font-size: var(--font-size-base);
  }
}

/* Footer */
.footer {
  padding: var(--space-8) 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
}

.footer__text {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}