/* =========================================================
   Content sections — 3D icon, principles, features, work,
   process, experience, CTA
   Requires base.css
   ========================================================= */

/* ---------------------------------------------------------
   3D icon component
   size is set per instance with --icon-size
   --------------------------------------------------------- */
.icon3d {
  position: relative;
  width: var(--icon-size, 120px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  flex: none;
}

/* glow lives in CSS so the PNG itself can stay clean */
.icon3d::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(49, 130, 246, 0.22),
    rgba(34, 211, 238, 0.08) 46%,
    transparent 68%
  );
  pointer-events: none;
}

.icon3d img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* neutral placeholder that holds the layout until a real icon lands */
.icon3d-fallback {
  position: absolute;
  inset: 8%;
  border-radius: 30%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), transparent 46%),
    linear-gradient(150deg, rgba(185, 216, 255, 0.85), rgba(103, 232, 249, 0.42));
  box-shadow:
    inset 0 -10px 22px rgba(37, 99, 235, 0.16),
    0 10px 28px rgba(29, 78, 216, 0.12);
}

.icon3d-fallback::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(120, 180, 255, 0.32));
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.9);
}

.icon3d.is-fallback img {
  display: none;
}

.icon3d.is-fallback .icon3d-fallback {
  opacity: 1;
}

.icon3d--float {
  animation: icon-float 6.5s ease-in-out infinite;
}

/* 모든 아이콘이 동시에 움직이지 않도록 주기와 지연을 다르게 준다 */
.icon3d--float-slow {
  animation: icon-float 7.5s ease-in-out infinite;
  animation-delay: -1.6s;
}

@keyframes icon-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

/* ---------------------------------------------------------
   Principles strip
   --------------------------------------------------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--border-default);
  box-shadow: var(--shadow-sm);
}

.principle {
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
}

/* 12px numeral — same reason as .work-num, --primary-500 measured 3.71:1. */
.principle .principle-mark {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--primary-700);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.principle h3 {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.principle p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Feature grid
   --------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(37, 99, 235, 0.11);
  border-radius: 26px;
  background: rgba(var(--surface-rgb), 0.82);
  box-shadow: 0 18px 48px rgba(29, 78, 216, 0.08);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: 0 26px 64px rgba(29, 78, 216, 0.12);
}

.feature-card h3 {
  margin-top: var(--space-5);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.feature-card p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Work
   --------------------------------------------------------- */
.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Two columns, not four. The old layout spent a 132px column on a number and a
   badge and then squeezed the screenshot into 300px, so every project got one
   unreadable thumbnail. Now the left column carries the index row and the whole
   gallery, and the copy gets the right. align-items must be start: the left
   column is now the tall one, and centring left the text floating beside it.
   The columns stretch rather than start so the copy can push its links down to
   meet the bottom of the gallery instead of leaving a hole there. */
.work-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition:
    transform 220ms var(--ease),
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

.work-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.work-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* A row, not a column. Stacked, the badge sat under the number in a narrow
   column and wrapped mid-word; side by side it reads as one label. */
.work-index {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The lead screenshot runs the full width and the rest pair up under it.
   Stacking two full-width images instead was measured at 704px of gallery
   against 268px of copy on the Eat Fit card — a third of the card was empty.
   Two images therefore sit side by side, which is what --pair marks. */
.work-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.work-gallery > :first-child {
  grid-column: 1 / -1;
}

.work-gallery--pair > :first-child {
  grid-column: auto;
}

/* Links and the internal-service badge used to be a fourth grid column. They
   belong to the copy, so they sit under it. */
.work-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-5);
}

.work-meta:empty {
  display: none;
}

/* Every one of these is below the fold, so they load lazily and never touch
   LCP. The border keeps a light screenshot from bleeding into the card on a
   white surface, and the slight dim in dark mode stops seven bright rectangles
   from glaring on a dark page. */
.work-shot {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-blue);
  box-shadow: var(--shadow-xs);
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease);
}

.work-card:hover .work-shot {
  transform: scale(1.015);
  box-shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
  .work-shot {
    filter: brightness(0.86) saturate(0.95);
  }

  .work-card:hover .work-shot {
    filter: none;
  }
}

/* 13px at 3.79:1 on the card. --primary-700 takes it to 6.7:1 in light and
   9.8:1 in dark, and the number still reads as an accent. */
.work-num {
  color: var(--primary-700);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.work-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--primary-50);
}

.work-body h3 {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.work-body p {
  max-width: 58ch;
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

/* Each card tells a story in three beats — what came out of it, what the problem
   was, what was actually done — and eight sentences in one block hid all three.
   The gap is what separates them; Korean web text does not indent, so leading a
   paragraph with a first-line indent would read as a mistake rather than a break. */
.work-body p + p {
  margin-top: var(--space-3);
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--space-4);
}

.stack li {
  padding: 5px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-tertiary);
  font-size: 12.5px;
  font-weight: 550;
}

.work-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  color: var(--primary-700);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface-blue);
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.work-link:hover {
  border-color: var(--border-strong);
  background: var(--primary-100);
}

/* 데모와 저장소를 함께 거는 카드. work-meta 안에서 나란히 놓인다. */
.work-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-link--ghost {
  background: transparent;
}

/* 사내 서비스라 열어볼 링크가 없는 카드. work-link 자리를 그대로 채우되 눌리지 않는다. */
.work-note {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border: 1px dashed var(--border-default);
  border-radius: 14px;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.work-link svg {
  transition: transform 180ms var(--ease);
}

.work-card:hover .work-link svg {
  transform: translate(2px, -2px);
}

/* ---------------------------------------------------------
   Process
   --------------------------------------------------------- */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.process-step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-default);
}

.process-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-600), var(--cyan-400));
}

.process-step .icon3d {
  margin-bottom: var(--space-4);
}

.process-step .step-num {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.process-step h3 {
  margin-top: var(--space-4);
  font-size: 18px;
  font-weight: 650;
}

.process-step p {
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------------------------------------------------------
   Experience timeline
   --------------------------------------------------------- */
.exp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 1px;
  background: linear-gradient(180deg, var(--primary-400), var(--primary-200), transparent);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-9);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -28px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--primary-500);
  box-shadow: 0 0 0 5px rgba(49, 130, 246, 0.14);
}

.timeline-item .when {
  color: var(--primary-600);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.timeline-item h3 {
  margin-top: var(--space-2);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.timeline-item .role {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.timeline-item ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.timeline-item li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.65;
}

.timeline-item li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--primary-300);
}

/* ---------------------------------------------------------
   Side panels — skills and credentials
   --------------------------------------------------------- */
.side-panel {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: rgba(var(--surface-rgb), 0.8);
  box-shadow: var(--shadow-sm);
}

.side-panel + .side-panel {
  margin-top: var(--space-6);
}

.side-panel h3 {
  font-size: 16px;
  font-weight: 650;
}

.skill-group {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.skill-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.skill-group dt {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skill-group dd {
  margin-top: var(--space-3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chips li {
  padding: 5px 11px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 550;
  background: var(--surface);
}

.credential-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.credential-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.5;
}

.credential-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.credential-list .year {
  flex: none;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* ---------------------------------------------------------
   Final CTA
   --------------------------------------------------------- */
.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 88% 12%, rgba(49, 130, 246, 0.12), transparent 46%),
    rgba(var(--surface-rgb), 0.86);
  box-shadow: var(--shadow-md);
}

.cta-panel h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cta-panel p {
  max-width: 52ch;
  margin-top: var(--space-4);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1023px) {
  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .exp-layout {
    grid-template-columns: 1fr;
  }

  .cta-panel {
    grid-template-columns: 1fr;
  }

  .cta-panel .icon3d {
    order: -1;
  }
}

@media (max-width: 767px) {
  .principles {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked. The aside already holds the index row and the gallery, so DOM
     order is what the phone wants — no reordering needed any more. */
  .work-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .work-link,
  .work-note {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 639px) {
  .process-list {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .feature-card {
    padding: 24px;
  }
}