/* KYUL — 서비스 (Services), 인사이트 (Insights), 소식 (News) pages */

/* =========================================================
   SHARED simple-page header
   ========================================================= */
.sp-header { padding-top: clamp(52px, 6.5vw, 88px); padding-bottom: clamp(24px, 3vw, 40px); }
.sp-header h1 {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 0 0 18px;
}
.sp-header p {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.75;
  max-width: 58ch;
  margin: 0;
}

/* =========================================================
   PAGE 9 — 서비스 소개 (dark cards list)
   ========================================================= */
.svc-intro { padding: clamp(40px, 5vw, 60px) 0 clamp(24px, 3vw, 40px); }
.svc-intro__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.svc-intro__copy {
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.9;
  color: var(--ink-2);
  max-width: 52ch;
}
.svc-intro__copy b { color: var(--ink); font-weight: 600; }

/* Standalone copy band — floated paragraph section between hero and svc-list */
.svc-copy-band { padding: clamp(45px, 5vw, 65px) 0 clamp(29px, 3vw, 45px); }
.svc-copy-band .container {
  max-width: 52ch;
}
.svc-copy-band p {
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
}

.svc-list {
  background: #0b0b0b;
  color: #fff;
  padding: var(--section-y-sm) 0 var(--section-y-md);
}
.svc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.svc-row:last-child { border-bottom: 0; }
.svc-row__tile {
  aspect-ratio: 16 / 5;
  background: #1a1a1a;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.svc-row__tile::before {
  content: attr(data-ph);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.22);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.svc-row__body {
  display: flex;
  flex-direction: column;
  padding: 8px 4px 0;
}
.svc-row__body h3 {
  color: #fff;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.svc-row__body p {
  color: rgba(255,255,255,.62);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
  max-width: 46ch;
}
.svc-row__tags {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.svc-tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Two-column layout for service rows (tile + body side by side) */
.svc-list .svc-row {
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: stretch;
  padding: 56px 0;
}
.svc-list .svc-row__tile {
  aspect-ratio: 4 / 3;
  position: relative;
  border-radius: 0;
  overflow: hidden;
}
.svc-list .svc-row__tile::after {
  content: attr(data-ph);
  position: absolute;
  inset: auto 0 18px 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.svc-list .svc-row:nth-child(1) .svc-row__tile {
  background: radial-gradient(circle at 30% 30%, #7C5CFF 0%, #3026A8 60%, #0a0820 100%);
}
.svc-list .svc-row:nth-child(2) .svc-row__tile {
  background: linear-gradient(135deg, #1c1c1c 0%, #4D2EAA 50%, #FF6F91 100%);
}
.svc-list .svc-row:nth-child(3) .svc-row__tile {
  background: radial-gradient(circle at 70% 30%, #2EE6C8 0%, #0F4A4A 60%, #061a1a 100%);
}
.svc-list .svc-row:nth-child(4) .svc-row__tile {
  background: linear-gradient(120deg, #FFC857 0%, #E63946 60%, #1d0606 100%);
}
.svc-list .svc-row:nth-child(5) .svc-row__tile {
  background: linear-gradient(135deg, #0F2027 0%, #2C5364 50%, #00C6FF 100%);
}
.svc-list .svc-row:nth-child(6) .svc-row__tile {
  background: radial-gradient(circle at 50% 50%, #F8E1EE 0%, #C8A6E1 50%, #5B3F86 100%);
}
.svc-list .svc-row:nth-child(7) .svc-row__tile {
  background: linear-gradient(135deg, #0B1F3B 0%, #5C5CFF 50%, #FFB347 100%);
}
.svc-list .svc-row:nth-child(8) .svc-row__tile {
  background: linear-gradient(120deg, #2A2A2A 0%, #6B6B6B 50%, #FFE066 100%);
}

/* Image-right rows: even rows flip tile/body */
.svc-list .svc-row:nth-child(even) .svc-row__tile { order: 2; }
.svc-list .svc-row:nth-child(even) .svc-row__body { order: 1; }

@media (max-width: 720px) {
  .svc-row__tags { padding-top: 16px; }
  .svc-list .svc-row { grid-template-columns: 1fr; }
  .svc-list .svc-row .svc-row__tile { order: unset; aspect-ratio: 16 / 5; }
  .svc-list .svc-row .svc-row__body { order: unset; }
}
.svc-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,.03);
}

/* =========================================================
   PAGE 10 — FAQ
   ========================================================= */
.faq-band {
  background: var(--bg-alt);
  padding: clamp(56px, 7vw, 96px) 0 var(--section-y);
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 56px;
  align-items: start;
}
.faq-grid__title {
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.faq-list { display: grid; gap: 2px; }
/* task-025 — removed border-bottom divider */
.faq-item {
  border-bottom: none;
}
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  font: inherit;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.faq-q__icon {
  flex: none;
  width: 20px; height: 20px;
  color: var(--ink-3);
  transition: transform .3s ease, color .2s;
}
.faq-item.is-open .faq-q__icon { transform: rotate(45deg); color: var(--ink); }
.faq-item.is-open .faq-q__icon path.close { opacity: 1; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1);
}
.faq-a > .faq-a__inner-wrap { overflow: hidden; min-height: 0; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a__inner {
  padding: 0 0 24px 38px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-3);
}

/* =========================================================
   PAGE 11 — 인사이트 목록
   ========================================================= */
.insight-hero { padding-top: var(--section-y-sm); padding-bottom: clamp(64px, 8vw, 80px); }
.insight-hero h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0;
}
.insight-featured { padding-bottom: clamp(48px, 6vw, 72px); }
.insight-featured__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.insight-featured__img {
  aspect-ratio: 16/10;
  border-radius: 0;
  background: #1a1438;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.insight-featured__img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.3), transparent);
}
.insight-featured__img .inner {
  position: relative;
  z-index: 2;
  padding: 32px;
}
.insight-featured__img .inner h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: #fff;
}
.insight-featured__img .inner .sub {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
  border-top: 1px solid rgba(255,255,255,.3);
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding: 8px 0;
}
.insight-featured__img .inner .desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.insight-featured__body { position: relative; }
.insight-featured__body .arrow {
  position: absolute; top: 0; left: 0;
  font-size: 20px; color: var(--ink);
  width: 24px; height: 24px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.insight-featured__body .meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  margin: 40px 0 14px;
  white-space: nowrap;
}
.insight-featured__body h3 {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 20px;
}
.insight-featured__body p {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.8;
  max-width: 46ch;
}
/* Mobile: arrow icon sits inline on the same row as the date (instead of
   floating absolute above it with the date pushed 40px down). */
@media (max-width: 768px) {
  .insight-featured__body .arrow {
    /* relative, NOT static. The hover-in arrow is `.arrow::after { position:
       absolute; inset: 0 }`, so it sizes to its nearest POSITIONED ancestor.
       With static here that was .insight-featured__body — the incoming arrow
       rendered at the full width and height of the card body on hover instead
       of inside this 14px box. relative keeps the icon inline in the date row
       (unlike the desktop `absolute`) while restoring ::after's frame. */
    position: relative;
    display: inline-flex;
    width: 14px; height: 14px;
    margin: 0 8px 0 0;
    vertical-align: middle;
  }
  .insight-featured__body .meta {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
  }
}

/* Hover: gradient background scale via ::after + Coder-style arrow animation */
.insight-featured__grid { cursor: pointer; }
.insight-featured__img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 80% at 40% 60%, rgba(110,160,255,.35), transparent 60%),
    radial-gradient(50% 60% at 80% 40%, rgba(255,120,200,.25), transparent 60%),
    linear-gradient(135deg, #1f1b4a 0%, #2b1b55 50%, #1a1438 100%);
  transform: scale(1);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.insight-featured__grid:hover .insight-featured__img::after {
  transform: scale(1.08);
}
/* Stars ::before must sit above the background ::after */
/* (z-index: 1 already set on ::before above) */

/* Arrow: Coder SVG — inline svg exits top-right, ::after enters bottom-left */
.insight-featured__body .arrow svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.insight-featured__body .arrow::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.65277 1.62689L13.3071 1.62689L13.3071 11.2812' stroke='%23111' stroke-width='1.70667'/><path d='M3.65265 11.2814L12.7036 2.23047' stroke='%23111' stroke-width='1.70667'/><path d='M0.800158 14.0953L2.61035 12.2852' stroke='%23111' stroke-width='1.70667'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-90%, 90%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.insight-featured__grid:hover .insight-featured__body .arrow svg {
  transform: translate(90%, -90%);
  opacity: 0;
}
.insight-featured__grid:hover .insight-featured__body .arrow::after {
  transform: translate(0, 0);
  opacity: 1;
}

.insight-grid-band { background: #FAF9F7; padding: clamp(48px, 6vw, 72px) 0; }
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
}
.insight-card {
  background: transparent;
  cursor: pointer;
}
.insight-card__img {
  aspect-ratio: 16/10;
  border-radius: 0;
  background: #0f1033;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
/* Scalable gradient background layer — zooms on card hover */
.insight-card__img::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 80% at 30% 70%, rgba(120,180,255,.28), transparent 60%),
    linear-gradient(135deg, #1a2048 0%, #261b48 60%, #0f1033 100%);
  transform: scale(1);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.insight-card__img::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.3), transparent);
}
.insight-card:hover .insight-card__img::before {
  transform: scale(1.08);
}
/* Insights page grid: real thumbnails (matching homepage insight section).
   Drop the opaque gradient placeholder so the inline background-image shows,
   and gate the hover lift behind hover-capable pointers so it never sticks
   (oversized) on touch/mobile. */
.insight-grid .insight-card__img {
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
}
.insight-grid .insight-card__img::before,
.insight-grid .insight-card__img::after { content: none; }
@media (hover: hover) {
  .insight-grid .insight-card__img { transition: transform .35s ease, box-shadow .35s ease; }
  .insight-grid .insight-card:hover .insight-card__img {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
  }
}
.insight-card h4 {
  display: flex; gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 0 8px;
}
/* .arr: Coder SVG — inline svg exits top-right, ::after enters bottom-left */
.insight-card h4 .arr {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  overflow: hidden;
}
.insight-card h4 .arr svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
/* Hover arrow — enters from bottom-left */
.insight-card h4 .arr::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.65277 1.62689L13.3071 1.62689L13.3071 11.2812' stroke='%23111' stroke-width='1.70667'/><path d='M3.65265 11.2814L12.7036 2.23047' stroke='%23111' stroke-width='1.70667'/><path d='M0.800158 14.0953L2.61035 12.2852' stroke='%23111' stroke-width='1.70667'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-90%, 90%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.insight-card:hover .arr svg {
  transform: translate(90%, -90%);
  opacity: 0;
}
.insight-card:hover .arr::after {
  transform: translate(0, 0);
  opacity: 1;
}
.insight-card p {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.7;
  margin: 0;
}
.insight-more {
  display: flex;
  justify-content: center;
  padding: var(--section-y-xs) 0 0;
}
.btn-more {
  padding: 12px 36px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s;
}
.btn-more:hover { background: var(--bg); }

/* =========================================================
   PAGE 12 — 인사이트 상세 / PAGE 17 — 공지사항 상세
   ========================================================= */
/* Side gutter restored: .article is also .container, but this padding shorthand
   was zeroing the horizontal gutter, so the body text touched the edges. */
.article { padding: var(--section-y-xs) var(--gutter) var(--section-y-sm); }
.article__grid {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 56px;
  align-items: start;
}
.article__hero {
  aspect-ratio: 4/5;
  border-radius: 0;
  background:
    radial-gradient(60% 80% at 40% 60%, rgba(110,160,255,.35), transparent 60%),
    linear-gradient(135deg, #1f1b4a 0%, #2b1b55 50%, #1a1438 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.article__body h1 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.3;
  margin: 0 0 16px;
}
.article__meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  margin-bottom: 36px;
  display: flex; gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.article__body p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 68ch;
}
.article__footer {
  display: flex; justify-content: center;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.btn-back {
  padding: 12px 40px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* =========================================================
   PAGE 13 — 공지사항 목록
   ========================================================= */
.notice-band { padding-top: var(--section-y-xs); padding-bottom: var(--section-y-sm); }
.notice-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
/* task-027 — notice item with hover transition */
.notice-item {
  display: grid;
  grid-template-columns: 1fr minmax(160px, 240px);
  gap: 48px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background-color .2s ease, padding-left .2s ease;
  cursor: pointer;
}
.notice-item:hover {
  background-color: rgba(0,0,0,.025);
  padding-left: 12px;
}
.notice-item__title {
  display: flex; gap: 10px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
/* notice arrow: Coder SVG exits top-right, ::after enters bottom-left */
.notice-item__title span {
  position: relative;
  display: inline-flex;
  width: 16px; height: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.notice-item__title span svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.notice-item__title span::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.65277 1.62689L13.3071 1.62689L13.3071 11.2812' stroke='%23111' stroke-width='1.70667'/><path d='M3.65265 11.2814L12.7036 2.23047' stroke='%23111' stroke-width='1.70667'/><path d='M0.800158 14.0953L2.61035 12.2852' stroke='%23111' stroke-width='1.70667'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-90%, 90%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}
.notice-item:hover .notice-item__title span svg {
  transform: translate(90%, -90%);
  opacity: 0;
}
.notice-item:hover .notice-item__title span::after {
  transform: translate(0, 0);
  opacity: 1;
}
.notice-item p {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 56ch;
}
.notice-item__date {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
}
.notice-item__thumb {
  aspect-ratio: 3/1.6;
  background: #F5E8E6;
  border-radius: 0;
  overflow: hidden;
}
.notice-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
/* Mobile: tighten the notice list — the desktop 28px row padding + 48px gap
   left the items feeling oversized and sparse on narrow screens. */
@media (max-width: 768px) {
  .notice-band { padding-top: 28px; padding-bottom: 40px; }
  .notice-item { gap: 16px; padding: 18px 0; }
  .notice-item:hover { padding-left: 8px; }
  .notice-item__title { font-size: 14px; margin: 0 0 8px; }
  .notice-item p { font-size: 12.5px; line-height: 1.6; margin: 0 0 10px; }
  .notice-item__thumb { aspect-ratio: 16/9; }
}

/* =========================================================
   PAGE 14 — 채용문의 (Careers)
   ========================================================= */
.apply-band { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); }
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.apply-grid h1 {
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.25;
  margin: 0 0 28px;
}
.apply-grid .lede {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-3);
  max-width: 38ch;
  margin: 0;
}

.field-stack { display: grid; gap: 14px; }
.field {
  width: 100%;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
.field::placeholder { color: var(--ink-4); }
.field:focus { outline: none; border-color: var(--ink); }

.field--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  padding-right: 48px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-file {
  background: #F1F0EC;
  color: var(--ink-3);
  border: 0;
  padding: 16px 22px;
  border-radius: 16px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: center;
  transition: background .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.field-file:hover { background: #eae8e2; }
.field-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.field-file__label { pointer-events: none; }
.field-file:has(input[type="file"]:not(:placeholder-shown)) .field-file__label::after {
  content: ' ✓';
}
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.check-row label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-3);
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.check-row input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.check-row input[type="checkbox"]:checked::after {
  content: '✓'; color: #fff; font-size: 9px;
}
.btn-submit {
  padding: 18px 22px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity .2s;
  width: 100%;
}
.btn-submit:hover { opacity: .9; }
.apply-fine {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.7;
}
.apply-fine a { color: var(--ink); text-decoration: underline; }

.apply-contact {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px 20px;
  margin-top: 40px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.apply-contact dt { color: var(--ink-3); }

/* --- Current openings list (jobs page) — reuses .apply-grid two-col layout --- */
.jobs-openings { border-top: 1px solid var(--line); }
.openings-heading {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}
.openings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.position-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .2s;
}
.position-card:hover { border-color: var(--ink); }
.position-card__link {
  display: block;
  padding: 22px 26px;
  text-decoration: none;
  color: inherit;
}
.position-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.position-card__title::after {
  content: '→';
  margin-left: auto;
  color: var(--ink-3);
  transition: transform .2s, color .2s;
}
.position-card:hover .position-card__title::after {
  transform: translateX(4px);
  color: var(--ink);
}
.position-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 12px 0 0;
  font-size: 12.5px;
}
.position-card__meta dt { color: var(--ink-4); }
.position-card__meta dd { margin: 0 20px 0 0; color: var(--ink-2); }

/* =========================================================
   PAGE 16 — 프로젝트 문의 (blank form)
   ========================================================= */

/* =========================================================
   v2 redesign — additions for reference-design alignment
   ========================================================= */

/* .home-hero-static and its sub-elements moved to home.css (deduplication task 3).
   home.css is only loaded on is_front_page() so no other page is affected. */

/* Hero full-phrase typing cursor (coder.com style) */
.hero-type-full__text { display: inline; }
.hero-type-full__cw {
  position: relative;
  display: inline-block;
  width: 0;
}
.hero-type-full__cur {
  position: absolute;
  bottom: 0.05em;
  left: 0.1em;
  display: inline-block;
  width: 2px;
  height: 0.85em;
  will-change: opacity;
  transition: opacity 0.1s ease;
}
.hero-type-full__cg {
  position: absolute;
  inset: 0;
  background: currentColor;
}

/* Services centered hero */
.svc-intro--centered { position: relative; padding: 0 0 var(--section-y-sm); overflow: hidden; }
.svc-intro--centered > .container { padding-top: 0; }
.svc-intro--centered .svc-intro__bg {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: var(--container);
  z-index: 0;
}
.svc-intro--centered .svc-intro__bg img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* Below the container width, the full-bleed hero bg must keep the same
   side gutter as .container so it doesn't touch the viewport edges. */
@media (max-width: 1200px) {
  .svc-intro--centered .svc-intro__bg {
    box-sizing: border-box;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}
.svc-intro--centered .container { position: relative; z-index: 1; }
.svc-intro--centered .svc-intro__inner { display: block; text-align: center; max-width: 880px; margin: 0 auto; }
.svc-intro__h {
  font-size: clamp(26px, 4vw, 49px);
  line-height: 1.3; font-weight: 600;
  margin: 0 0 22px;
}
.svc-intro--centered .svc-intro__copy {
  color: var(--ink-3); font-size: 15px; line-height: 1.7;
}

/* History — dark→gold gradient hero backdrop */
.history-hero {
  background:
    radial-gradient(circle at 50% 70%, rgba(220,170,80,.45) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0c 0%, #1a1610 60%, #2a1f0e 100%);
}

/* History — light-themed timeline cards */
.achievements:first-of-type .ach-col,
.achievements .ach-col {
  background: #fff;
  color: #1a1a1a;
  padding: 0;
  border-radius: 0;
  border: none;
}
.achievements .ach-col h3 { color: #1a1a1a; }
.achievements .ach-col p { color: rgba(0,0,0,.65); }
.achievements .ach-col__num { color: rgba(0,0,0,.4); }
.achievements .ach-col__art {
  background: linear-gradient(135deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 100%);
  border-radius: 0;
}

/* Partners grid (server-rendered) */
.partners-grid { padding: clamp(40px, 5vw, 60px) 0 var(--section-y-md); }
.partners-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.partner-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 18px 16px;
  min-height: 150px;
}
.partner-card__logo {
  /* logo slot — render the 120×120 source at its native size, never upscaled */
  display: flex; align-items: center; justify-content: center;
}
.partner-card__logo--placeholder {
  /* empty placeholder, reserves the slot until a real logo image is added */
}
.partner-card__logo img { width: auto; height: auto; max-width: 100%; }
.partner-card__name { font-size: 13px; color: var(--ink-2); margin: 0; text-align: center; }
@media (max-width: 720px) {
  .partners-grid__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Partner card stagger reveal — uncapped, driven by per-card --pc-i index
   (was hard-capped at nth-child(12); the static logo wall has 30 cards) */
.partners-grid__grid.reveal-stagger .partner-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.partners-grid__grid.reveal-stagger.is-in .partner-card {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--pc-i, 1) * 0.06s);
}

/* AI SEO — pricing/packages section (cards) */
.packages { padding-block: var(--section-y-md) var(--section-y-sm); background: #f5f3ef; }
.packages__head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.packages__title {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--ink-1);
}
.packages__lede {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
  margin: 0 auto;
  max-width: 640px;
}
.packages__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: var(--container); margin: 0 auto;
}
.pkg-card {
  position: relative;
  background: #fff;
  border: 1px solid #ece8e2;
  border-radius: 0;
  padding: 30px 28px 30px;
  display: flex; flex-direction: column; gap: 16px;
}
.pkg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--ink-1);
}
.pkg-card__icon svg { width: 100%; height: 100%; }
.pkg-card__tier {
  display: block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.pkg-card__lede {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}
.pkg-card__features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkg-card__features li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: 14px;
  position: relative;
}
.pkg-card__features li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--ink-3);
  font-weight: 700;
}

@media (max-width: 900px) {
  .packages { padding-block: clamp(40px, 6vw, 72px) clamp(36px, 5vw, 56px); }
  .packages__title { font-size: 28px; }
  .packages__grid { grid-template-columns: 1fr; }
}

/* AI SEO — pricing comparison table (second section) */
.pkg-table { padding-block: var(--section-y-md) var(--section-y); background: #fff; }
.pkg-table__head { max-width: 880px; margin: 0 auto 56px; }
#section-pricing .pkg-table__head { padding-left: 0; padding-right: 0; }
.pkg-table__title { font-size: 32px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.pkg-table__sub { font-size: 32px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; }
.pkg-table__lede { font-size: 14px; line-height: 1.7; color: var(--ink-3); margin: 0; max-width: 720px; }

.pkg-table__wrap { max-width: var(--container); margin: 0 auto; overflow-x: auto; }
.pkg-table__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 760px;
}
.pkg-table__grid thead th {
  padding: 0 0 18px;
  text-align: center;
  font-weight: 500;
  vertical-align: bottom;
}
.pkg-table__grid thead th .pkg-table__col {
  display: block;
  width: 100%;
  padding: 10px 28px;
  text-align: center;
  border-radius: 0;
  background: #f4f1ec;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pkg-table__grid thead th:nth-child(2) .pkg-table__col {
  border-radius: 100px 0 0 100px;
}
.pkg-table__grid thead th:nth-child(4) .pkg-table__col {
  border-radius: 0 100px 100px 0;
}
.pkg-table__grid thead th.is-featured .pkg-table__col {
  background: #2f4dd0;
  color: #fff;
}
.pkg-table__rowhead { width: 1%; }
.pkg-table__grid tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-1);
  padding: 18px 28px 18px 0;
  border-top: 1px solid #ece8e2;
  vertical-align: top;
  white-space: nowrap;
}
.pkg-table__grid tbody td {
  padding: 18px 18px;
  border-top: 1px solid #ece8e2;
  text-align: center;
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.55;
}
.pkg-table__grid tbody td.is-featured {
  background: rgba(47, 77, 208, 0.04);
  color: var(--ink-1);
  font-weight: 500;
}
.pkg-table__grid .check {
  display: inline-block;
  color: #2f4dd0;
  font-weight: 700;
  margin-right: 4px;
}

.pkg-table__notes {
  max-width: var(--container);
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-3);
}
.pkg-table__notes-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 12px;
}
.pkg-table__notes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pkg-table__notes li { padding-left: 14px; position: relative; }
.pkg-table__notes li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -2px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .pkg-table { padding-block: clamp(40px, 6vw, 72px) clamp(52px, 6.5vw, 88px); }
  .pkg-table__title,
  .pkg-table__sub { font-size: 26px; }
  .pkg-table__notes { grid-template-columns: 1fr; gap: 28px; }
  .pkg-table__grid tbody th { white-space: normal; }
}

/* AI SEO — palette polish for .ph-icon and cards */
.ph-icon {
  width: 56px; height: 56px;
  border-radius: 0;
  background: linear-gradient(135deg, #f4dde9 0%, #cdd9f1 60%, #c8efe0 100%);
  margin-bottom: 18px;
}
.section--blush.band-3 .grid-3 .card:nth-child(1) .ph-icon { background: linear-gradient(135deg, #ffd8e3 0%, #f4a6c0 100%); }
.section--blush.band-3 .grid-3 .card:nth-child(2) .ph-icon { background: linear-gradient(135deg, #d6ecdc 0%, #82c39c 100%); }
.section--blush.band-3 .grid-3 .card:nth-child(3) .ph-icon { background: linear-gradient(135deg, #d8e4f8 0%, #8aabe0 100%); }
.aio-feature__thumb {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: linear-gradient(135deg, #f3e9e0 0%, #d8c5b3 100%);
  margin-bottom: 18px;
}

/* Service card thumbs slightly larger for visibility */
.service-card__thumb { width: 36px; height: 36px; margin-bottom: 28px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .svc-intro__inner,
  .faq-grid,
  .insight-featured__grid,
  .article__grid,
  .apply-grid { grid-template-columns: 1fr; gap: 32px; }
  .insight-grid { grid-template-columns: 1fr; }
  .notice-item { grid-template-columns: 1fr; }
}

/* Jobs / Contact apply form — ensure fields have comfortable side padding on mobile
   so they don't touch the viewport edges. */
@media (max-width: 768px) {
  .apply-band.container { padding-left: 24px; padding-right: 24px; }
  .apply-grid h1 { font-size: clamp(28px, 7vw, 36px); }
  .field-stack { gap: 12px; }
  /* 16px is the floor iOS Safari needs: any focused text control below it makes
     Safari zoom the page in on tap and never zoom back out — which leaves the
     whole site panning horizontally. Not a type choice; don't lower it. */
  .field { padding: 14px 18px; font-size: 16px; }
  .openings-heading { font-size: clamp(22px, 6vw, 28px); }
  .position-card__link { padding: 18px 20px; }
}

/* =========================================================
   SERVICES PAGE — reveal animations (tasks c030290f, 3aa7b293, 3fcdac70)
   ========================================================= */

/* Task c030290f — heading fade+slide-up */
.svc-intro__inner .svc-intro__h {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.svc-intro__inner.is-in .svc-intro__h {
  opacity: 1;
  transform: none;
}

/* Task 3aa7b293 — copy paragraph fade+slide-up with delay */
.svc-intro__inner p.svc-intro__copy {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.svc-intro__inner.is-in p.svc-intro__copy {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

/* Task 3fcdac70 — service rows stagger delay cascade */
.svc-list .svc-row:nth-child(2) { transition-delay: 0.07s; }
.svc-list .svc-row:nth-child(3) { transition-delay: 0.14s; }
.svc-list .svc-row:nth-child(4) { transition-delay: 0.21s; }
.svc-list .svc-row:nth-child(5) { transition-delay: 0.28s; }
.svc-list .svc-row:nth-child(6) { transition-delay: 0.35s; }
.svc-list .svc-row:nth-child(7) { transition-delay: 0.42s; }
.svc-list .svc-row:nth-child(8) { transition-delay: 0.49s; }