/*
 * 오토메이트 - Portfolio
 * /portfolio/ 및 제작사례 상세페이지 전용 스타일
 * 기존 /assets/style.css 와 분리하여 관리합니다.
 */

.portfolio-page {
  background:#0a0d13;
}

.portfolio-hero {
  position:relative;
  overflow:hidden;
  padding:148px 0 105px;
  background:
    radial-gradient(circle at 82% 20%,rgba(92,121,255,.17),transparent 28%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #0a0d13;
  background-size:auto,54px 54px,54px 54px,auto;
}

.portfolio-hero:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(116,142,255,.38),transparent);
}

.portfolio-breadcrumbs {
  margin-bottom:44px;
}

.portfolio-kicker {
  display:inline-block;
  color:#7188f4;
  font-size:.85rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.18em;
}

.portfolio-hero-copy {
  max-width:980px;
}

.portfolio-hero h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    letter-spacing: -.05em;
    margin: 12px 0 20px;
    max-width: 850px;
}

.portfolio-hero h1 span {
  background:linear-gradient(90deg,#8195ff 0%,#65dfff 58%,#98a8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.portfolio-hero p {
    max-width: 820px;
    color: #a2acbd;
    font-size: 1.15rem;
    line-height: 1.5;
}

.portfolio-list-section {
  padding:112px 0 132px;
  background:#f6f7fa;
  color:#111725;
}

.portfolio-section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:48px;
}

.portfolio-section-heading h2 {
  margin:11px 0 0;
  font-size:clamp(2rem,3.7vw,3.25rem);
  line-height:1.16;
  letter-spacing:-.055em;
}

.portfolio-section-heading > p {
  margin:0 0 5px;
  color:#7b8493;
  font-size:.94rem;
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:54px 28px;
  align-items:start;
}

.portfolio-card {
  min-width:0;
}

.portfolio-card-thumb {
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
  border-radius:22px;
  background:#111620;
  box-shadow:0 18px 45px rgba(25,35,58,.09);
}

.portfolio-thumb-placeholder {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:100%;
  height:100%;
  padding:34px;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(90,120,255,.38),transparent 26%),
    linear-gradient(135deg,#0d1118 0%,#151e34 52%,#0d1118 100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

.portfolio-thumb-placeholder:before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 85%);
}

.portfolio-thumb-placeholder:after {
  content:"AUTOMATE";
  position:absolute;
  top:26px;
  right:30px;
  color:rgba(255,255,255,.12);
  font-size:1.75rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.06em;
}

.portfolio-card-thumb:hover .portfolio-thumb-placeholder {
  transform:scale(1.018);
}

.portfolio-thumb-label,
.portfolio-thumb-placeholder strong,
.portfolio-thumb-placeholder small {
  position:relative;
  z-index:1;
}

.portfolio-thumb-label {
  margin-bottom:13px;
  color:#7f95ff;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.16em;
}

.portfolio-thumb-placeholder strong {
  color:#f6f8ff;
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.055em;
}

.portfolio-thumb-placeholder small {
  margin-top:19px;
  color:#6e798d;
  font-size:.64rem;
  letter-spacing:.14em;
}

.portfolio-card-body {
  padding:25px 4px 0;
}

.portfolio-card-meta {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.portfolio-card-meta span {
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 10px;
  border:1px solid #dfe3eb;
  border-radius:999px;
  color:#7a8494;
  background:#fff;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.045em;
}

.portfolio-card-meta span:first-child {
  color:#6178e8;
  border-color:#d8defb;
  background:#f4f6ff;
}

.portfolio-card h3 {
  margin:0 0 13px;
  color:#151b27;
  font-size:1.25rem;
  line-height:1.35;
  letter-spacing:-.04em;
}

.portfolio-card p {
  max-width:570px;
  margin:0;
  color:#6e7786;
  font-size:1.15rem;
  line-height:1.5;
  word-break:keep-all;
}

.portfolio-detail-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  color:#202737;
  font-size:1.15rem;
  font-weight:800;
}

.portfolio-detail-link span {
  color:#6f86f4;
  transition:transform .2s ease;
}

.portfolio-detail-link:hover span {
  transform:translate(3px,-3px);
}

.portfolio-bottom-cta {
  padding:82px 0;
  background:#0c1018;
  border-top:1px solid rgba(255,255,255,.06);
}

.portfolio-bottom-cta-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
}

.portfolio-bottom-cta h2 {
  margin:13px 0 10px;
  color:#f3f6fb;
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.045em;
}

.portfolio-bottom-cta p {
  margin:0;
  color:#798498;
  font-size:.94rem;
}

/* Portfolio article */
.project-article-header {
  position:relative;
  overflow:hidden;
  padding:148px 0 78px;
  background:
    radial-gradient(circle at 82% 16%,rgba(88,118,255,.18),transparent 28%),
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    #090c12;
  background-size:auto,54px 54px,54px 54px,auto;
}

.project-article-header-inner {
  max-width:1180px;
}

.project-article-category {
  margin-bottom:16px;
  color:#758cf5;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.17em;
}

.project-article-header h1 {
  max-width:960px;
  margin:0;
  color:#f6f8fc;
  font-size:2.5rem;
  line-height:1.15;
  letter-spacing:-.065em;
}

.project-article-header h1 span {
  color:#8196ff;
}

.project-article-lead {
  max-width:780px;
  margin:31px 0 0;
  color:#99a4b8;
  font-size:1.15rem;
  line-height:1.5;
  word-break:keep-all;
}

.project-summary {
  display:grid;
  grid-template-columns:1.25fr .8fr 1.2fr;
  gap:0;
  margin-top:62px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.12);
}

.project-summary > div {
  padding:0 28px;
  border-left:1px solid rgba(255,255,255,.09);
}

.project-summary > div:first-child {
  padding-left:0;
  border-left:0;
}

.project-summary span {
  display:block;
  margin-bottom:8px;
  color:#59657a;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.14em;
}

.project-summary strong {
  display:block;
  color:#dce2ee;
  font-size:1.15rem;
  line-height:1.45;
}

.project-article-body {
  padding:90px 0 128px;
  background:#f7f8fa;
  color:#131923;
}

.project-article-content {
  width:min(1040px,calc(100% - 40px));
  margin:0 auto;
}

.project-image-block {
  margin:0 0 88px;
}

.project-image-placeholder {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:560px;
  padding:50px;
  border-radius:24px;
  text-align:center;
  overflow:hidden;
}

.project-image-placeholder span {
  margin-bottom:17px;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.16em;
}

.project-image-placeholder strong {
  font-size:1.75rem;
  line-height:1.1;
  letter-spacing:-.05em;
}

.project-image-placeholder small {
  max-width:520px;
  margin-top:16px;
  font-size:1rem;
  line-height:1.5;
}

.project-image-placeholder-dark {
  color:#edf2ff;
  background:
    radial-gradient(circle at 78% 18%,rgba(92,122,255,.32),transparent 24%),
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px),
    #10151f;
  background-size:auto,44px 44px,44px 44px,auto;
}

.project-image-placeholder-dark span { color:#8197ff; }
.project-image-placeholder-dark small { color:#738096; }

.project-image-placeholder-light {
  color:#182033;
  border:1px solid #dfe4ec;
  background:
    linear-gradient(rgba(22,33,54,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,33,54,.035) 1px,transparent 1px),
    #eef1f6;
  background-size:44px 44px,44px 44px,auto;
}

.project-image-placeholder-light span { color:#6279e9; }
.project-image-placeholder-light small { color:#7c8798; }

.project-image-placeholder-accent {
  color:#f2f5ff;
  background:
    radial-gradient(circle at 27% 76%,rgba(80,224,255,.23),transparent 30%),
    radial-gradient(circle at 76% 25%,rgba(115,106,255,.34),transparent 28%),
    #171f39;
}

.project-image-placeholder-accent span { color:#7ee3ff; }
.project-image-placeholder-accent small { color:#9aa7c7; }

.project-image-block figcaption {
  margin-top:13px;
  color:#98a0ad;
  font-size:1rem;
  text-align:right;
}

.project-copy-block {
  display:grid;
  grid-template-columns:90px minmax(0,720px);
  gap:30px;
  justify-content:center;
  margin:0 auto 92px;
}

.project-copy-no {
  padding-top:8px;
  color:#a3abb8;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.1em;
}

.project-copy-eyebrow {
  margin:0 0 13px !important;
  color:#647bea !important;
  font-size:1rem !important;
  font-weight:800;
  letter-spacing:.16em;
}

.project-copy-block h2 {
  margin:0 0 25px;
  color:#171d29;
  font-size:1.75rem;
  line-height:1.15;
  letter-spacing:-.055em;
}

.project-copy-block p {
  margin:0 0 17px;
  color:#606b7b;
  font-size:1.15rem;
  line-height:1.5;
  word-break:keep-all;
}

.project-copy-block p:last-child {
  margin-bottom:0;
}

.project-copy-last {
  margin-bottom:74px;
}

.project-article-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:34px;
  border-top:1px solid #dfe3e9;
}

.project-back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#5f6979;
  font-size:1.15rem;
  font-weight:700;
}

.project-back-link span {
  color:#6c82ef;
  transition:transform .2s ease;
}

.project-back-link:hover span {
  transform:translateX(-3px);
}

@media (max-width:900px) {
  .portfolio-hero,
  .project-article-header {
    padding-top:126px;
  }

  .portfolio-section-heading,
  .portfolio-bottom-cta-inner {
    align-items:flex-start;
    flex-direction:column;
  }

  .portfolio-grid {
    gap:44px 20px;
  }

  .project-image-placeholder {
    min-height:480px;
  }

  .project-summary {
    grid-template-columns:1fr;
    gap:18px;
  }

  .project-summary > div,
  .project-summary > div:first-child {
    padding:0 0 18px;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .project-summary > div:last-child {
    border-bottom:0;
  }
}

@media (max-width:700px) {
  .portfolio-hero {
    padding:112px 0 74px;
  }

  .portfolio-card-meta span{font-size:.85rem;}

  .portfolio-thumb-placeholder strong{font-size:1.5rem;}

  .portfolio-hero h1 {
    font-size:1.75rem;
  }

  .portfolio-hero p {
    font-size:1rem;
  }

  .portfolio-list-section {
    padding:76px 0 92px;
  }

  .portfolio-section-heading {
    margin-bottom:34px;
  }

  .portfolio-section-heading > p {
    font-size:.88rem;
  }

  .portfolio-grid {
    grid-template-columns:1fr;
    gap:48px;
  }

  .portfolio-detail-link{font-size:1rem;}
  .project-summary span{font-size:1.15rem;}
  .project-summary strong{font-size:1rem;}
  .project-image-block figcaption{font-size:.85rem;}
  .project-copy-no{font-size:.85rem;}
  .project-copy-eyebrow{font-size:.85rem !important;}
  .project-back-link{font-size:1rem;}

  .portfolio-card p{font-size:1rem;}

  .portfolio-card-thumb {
    border-radius:17px;
  }

  .portfolio-thumb-placeholder {
    padding:25px;
  }

  .portfolio-thumb-placeholder:after {
    top:20px;
    right:22px;
    font-size:1rem;
  }

  .portfolio-card-body {
    padding-top:21px;
  }

  .portfolio-bottom-cta h2{font-size:1.75rem;}

  .portfolio-card h3 {
    font-size:1.15rem;
  }

  .portfolio-bottom-cta {
    padding:70px 0;
  }

  .project-article-header {
    padding:112px 0 62px;
  }

  .project-article-header h1 {
    font-size:1.75rem;
  }

  .project-article-lead {
    margin-top:24px;
    font-size:1rem;
  }

  .project-summary {
    margin-top:46px;
  }

  .project-article-body {
    padding:56px 0 88px;
  }

  .project-article-content {
    width:min(100% - 28px,1040px);
  }

  .project-image-block {
    margin-bottom:58px;
  }

  .project-image-placeholder {
    min-height:330px;
    padding:28px 20px;
    border-radius:17px;
  }

  .project-image-placeholder strong {
    font-size:2rem;
  }

  .project-image-block figcaption {
    text-align:left;
    line-height:1.5;
  }

  .project-copy-block {
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:62px;
  }

  .project-copy-no {
    padding-top:0;
  }

  .project-copy-block h2 {
    font-size:1.5rem;
  }

  .project-copy-block p {
    font-size:1rem;
    line-height:1.5;
  }

  .project-article-nav {
    align-items:stretch;
    flex-direction:column;
  }

  .project-article-nav .btn {
    justify-content:center;
  }
}

.project-real-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

@media (max-width: 700px) {
  .project-real-image {
    border-radius: 17px;
  }
}