/* handoff의 style-hover / style-focus / 상태 바인딩({{ }})을 CSS로 변환한 규칙 모음.
   값은 전부 handoff 원본과 동일 — 임의 변경 금지. */

/* ── 공통: 헤더 알약 버튼(문의하기), 메인 CTA(개발 시작하기) ─────────── */
.pill-btn { background: #EDEAE4; }
.pill-btn:hover { background: #FFFFFF; }

.cta-main {
  background: #EDEAE4;
  animation: ctaGlow 2.6s ease-in-out infinite;
}
.cta-main:hover { background: #FFFFFF; transform: translateY(-3px) scale(1.03); }

/* ── Landing: 스크롤 상태 헤더 (barBg / barBorder / logoTransform / nav*) ── */
#site-header {
  background: linear-gradient(180deg, rgba(70,105,170,0.07), rgba(40,60,100,0.02));
  border-bottom: 1px solid rgba(170,200,255,0.04);
}
html.scrolled #site-header {
  background: linear-gradient(180deg, rgba(70,105,170,0.14), rgba(40,60,100,0.06));
  border-bottom-color: rgba(170,200,255,0.09);
}
#site-logo {
  transform: translateX(calc(50vw - 50% - max(32px, (100vw - 1120px) / 2 + 32px)));
}
html.scrolled #site-logo { transform: translateX(0); }
#site-nav {
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}
html.scrolled #site-nav { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* ── Landing: DEVUKS 로고 — 기본 2A(Tight), 스크롤 시 2C(Stacked)로 크로스페이드.
   값은 Devuks Logo.dc.html Spec 그대로 (Space Grotesk 600, slash skewX −14°/−18°,
   ink #F4F4F6/#7B7B85). 두 변형을 겹쳐 두고 html.scrolled 로 투명도만 바꾼다. ── */
#site-logo { position: relative; width: 96px; height: 40px; }
#site-logo .logo-v {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-family: "Space Grotesk", Pretendard, sans-serif;
  font-weight: 600;
  transition: opacity .5s ease;
}
#site-logo .logo-dev { color: #F4F4F6; }
#site-logo .logo-uks { color: #7B7B85; }
#site-logo .logo-slash { background: #F4F4F6; }
#site-logo .logo-2a { gap: 8px; font-size: 20px; letter-spacing: -0.05em; opacity: 1; }
#site-logo .logo-2a .logo-slash { width: 1.94px; height: 18px; transform: skewX(-14deg); }
#site-logo .logo-2c { gap: 8px; font-size: 18px; letter-spacing: -0.03em; opacity: 0; }
#site-logo .logo-2c .logo-slash { width: 2.4px; height: 40px; transform: skewX(-18deg); }
#site-logo .logo-stack { display: flex; flex-direction: column; line-height: 0.92; }
html.scrolled #site-logo .logo-2a { opacity: 0; }
html.scrolled #site-logo .logo-2c { opacity: 1; }

/* ── Landing: 원칙(points) 등장 ── */
.point-row { opacity: 0; }
.point-row.point-left { transform: translateX(-72px); }
.point-row.point-right { transform: translateX(72px); }
html.points-in .point-row { opacity: 1; transform: translateX(0); }

/* ── Landing: 소개(about) 등장 ── */
.about-fade { opacity: 0; transform: translateY(26px); }
html.about-in .about-fade { opacity: 1; transform: translateY(0); }

/* ── Landing: 포트폴리오 마퀴 + hover 일시정지 ── */
.marquee-track { animation: marquee 72s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ── Landing: portfolio "자세히" 링크 ── */
.link-underline { color: #9B99A3; }
.link-underline:hover { color: #EDEAE4; }

/* ── Portfolio: image-slot read-only 상태 재현 (원본 image-slot.js 스타일시트 값 그대로) ── */
.img-slot {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  background: rgba(127,127,127,.08);
}
.img-slot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  user-select: none;
}
.img-slot-empty svg { opacity: .45; }
.img-slot-cap { max-width: 90%; font-weight: 500; letter-spacing: .01em; opacity: .75; }
.img-slot-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  opacity: .35;
}

/* ── Contact: 언더라인 입력(style-focus), 박스 textarea, 파일선택/전송 버튼 ── */
.line-input { border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.line-input:focus { border-bottom-color: #EDEAE4; }

.box-input { border: 1px solid rgba(255,255,255,0.14); }
.box-input:focus { border-color: #EDEAE4; }

.file-btn { border: 1px solid rgba(255,255,255,0.18); }
.file-btn:hover { border-color: #EDEAE4; }

.submit-btn { background: #EDEAE4; }
.submit-btn:hover { background: #FFFFFF; }