/* =====================================================
   ARTIFEX Homepage sections (order 4)
   .mainSection (hero) / .subSection1 (portfolio) /
   .subSection2 (about+stats) / .subSection3 (services) /
   .subSection4 (notice)
   ===================================================== */

/* ---------- Hero: white split ---------- */
.mainSection {
  padding: calc(var(--header-h) + 104px) 0 96px;
}
.mainSection .hero-grid {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.mainSection h1 {
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mainSection .hero-lead {
  font-size: var(--text-body-lg);
  color: var(--ink-500);
  margin-top: var(--sp-6);
  max-width: 480px;
}

.mainSection .btnBox {
  display: flex;
  gap: var(--sp-3);
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-media {
  position: relative;
}
.hero-media .media-card {
  position: relative;
  aspect-ratio: 4 / 3;
  z-index: 1;
}
.hero-media::before {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -24px;
  width: 55%;
  height: 55%;
  background: var(--brand-50);
  border-radius: var(--r-lg);
}

/* ---------- Portfolio ---------- */
.subSection1 .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.subSection1 .tabs { margin-bottom: var(--sp-8); }

.subSection1 .subSection1_cardBox { position: relative; }
.subSection1 .cardBox { display: none; }
.subSection1 .cardBox.show { display: block; animation: tabFade .3s var(--ease); }
@keyframes tabFade { from { opacity: 0; } to { opacity: 1; } }

/* pic_block skin contract: .cardBox ul > li > .thumb + a > .textBox */
.subSection1 .cardBox ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6) var(--sp-6);
}
.subSection1 .cardBox ul li { min-width: 0; } /* grid item이 트랙보다 넓은 이미지에 밀려 터지는 것 방지 */
.subSection1 .cardBox ul li a { display: block; cursor: pointer; }
.subSection1 .cardBox ul li .thumb { aspect-ratio: 1 / 1; min-width: 0; }
.subSection1 .cardBox ul li .thumb img { width: 100%; height: 100%; object-fit: cover; }
.subSection1 .cardBox ul li .textBox { margin-top: var(--sp-3); }
.subSection1 .cardBox ul li .textBox h5 {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.subSection1 .cardBox ul li a:hover .textBox h5 { color: var(--brand-600); }
.subSection1 .cardBox ul li .textBox p {
  font-size: var(--text-caption);
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.subSection1 .cardBox .empty_li {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-300);
  padding: var(--sp-16) 0;
}

/* ---------- About + Stats ---------- */
.subSection2 .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.subSection2 .about-copy .text-link { margin-top: var(--sp-6); }

.subSection2 .about-body {
  font-size: var(--text-body-lg);
  color: var(--ink-700);
  line-height: 1.8;
}

.subSection2 .stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-12);
}
.subSection2 .stat {
  padding-left: var(--sp-8);
  border-left: 1px solid var(--line-200);
}
.subSection2 .stat:first-child { padding-left: 0; border-left: 0; }
.subSection2 .stat p {
  font-size: var(--text-sm);
  color: var(--ink-500);
}
.subSection2 .stat h3 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: var(--sp-2);
}
.subSection2 .stat h3 .plus { color: var(--brand-600); }

/* ---------- Services ---------- */
.subSection3 .section-title { max-width: var(--measure); }
.subSection3 .cardBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.subSection3 .card {
  padding: var(--sp-8);
}
.subSection3 .card h5 {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.4;
  margin-top: var(--sp-6);
}
.subSection3 .card p {
  font-size: var(--text-sm);
  color: var(--ink-500);
  line-height: 1.6;
  margin-top: var(--sp-3);
  word-break: keep-all;
}

/* ---------- Notice ---------- */
.subSection4 {
  background: var(--bg-50);
}
.subSection4 .notice-section {
  margin-left: max(calc((100% - var(--container)) / 2 + var(--container-pad)), var(--container-pad));
  display: flex;
  gap: var(--sp-12);
  align-items: stretch;
  overflow: hidden;
}
.subSection4 .notice-info {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: var(--sp-2);
}
.subSection4 .notice-info .desc {
  font-size: var(--text-body);
  color: var(--ink-500);
  margin-top: var(--sp-4);
}
.subSection4 .notice-info .text-link { margin-top: var(--sp-4); }
.subSection4 .custom-arrows {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.subSection4 .notice-wrap {
  flex: 1;
  min-width: 0;
}

/* pic_notice skin contract: .notice-slider > .card-item > .card-inner */
.notice-slider .card-item { padding-right: var(--sp-6); }
.notice-slider .card-inner {
  background: var(--bg-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.notice-slider .card-inner:hover {
  border-color: var(--brand-100);
  box-shadow: var(--shadow-md);
}
.notice-slider .imgBox {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.notice-slider .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.notice-slider .card-inner:hover .imgBox img { transform: scale(1.03); }
.notice-slider .textBox { padding: var(--sp-6); }
.notice-slider .textBox span {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-600);
  background: var(--brand-50);
  padding: 5px 10px;
  border-radius: var(--r-full);
}
.notice-slider .textBox p {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.5;
  margin-top: var(--sp-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur) var(--ease);
}
.notice-slider .card-inner:hover .textBox p:not(.date_p) { color: var(--brand-600); }
.notice-slider .textBox .date_p {
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--ink-500);
  margin-top: var(--sp-2);
  -webkit-line-clamp: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .mainSection { padding: calc(var(--header-h) + 64px) 0 72px; }
  .mainSection .hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .mainSection .hero-lead { max-width: 560px; }
  .hero-media .media-card { aspect-ratio: 16 / 10; }

  .subSection2 .about-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .subSection3 .cardBox { grid-template-columns: repeat(2, 1fr); }
  .subSection1 .cardBox ul { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .mainSection .btnBox .btn { flex: 1 1 100%; }

  .subSection1 .cardBox ul { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

  .subSection2 .stats { margin-top: var(--sp-8); gap: var(--sp-4); }
  .subSection2 .stat,
  .subSection2 .stat:first-child {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-200);
  }
  .subSection2 .stat h3 { font-size: 32px; }

  .subSection3 .cardBox { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .subSection3 .card { padding: var(--sp-5, 20px); }
  .subSection3 .card h5 { font-size: var(--text-body); margin-top: var(--sp-4); }

  .subSection4 .notice-section {
    flex-direction: column;
    gap: var(--sp-8);
    margin-right: var(--container-pad);
  }
  .subSection4 .notice-info { flex: none; }
  .subSection4 .custom-arrows { margin-top: var(--sp-4); }
}