/* =====================
   기본 리셋
===================== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #222;
  background: #f4f6f9;
}

/* =====================
   페이지 전체 배경 (밝은 그라데이션 + 코드)
===================== */
.page-bg {
  min-height: 100vh;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* 🔹 밝은 그라데이션 */
.page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #f7f9fc 0%,
    #eef2f7 40%,
    #e6ebf2 100%
  );
  z-index: 0;
}

/* 🔹 배경 코드 */
.page-bg::after {
  content:
"// ============================================================\A\
/* CodeNote Decorative Kotlin Code */\A\
/* DISPLAY ONLY */\A\
package com.codenote.backdrop\A\A\
object PhantomEngine {\A\
    fun commit() {}\A\
}\A";

  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  white-space: pre;

  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 26px;

  background: linear-gradient(
    90deg,
    rgba(52,152,219,0.75),
    rgba(155,89,182,0.75),
    rgba(26,188,156,0.75)
  );
  background-size: 400% 400%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: code-fall 60s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes code-fall {
  from { transform: translate(-50%, -400px); }
  to   { transform: translate(-50%, 1400px); }
}

/* =====================
   메인 카드
===================== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 70px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  position: relative;
  z-index: 2;

  /* 🔥 기본은 중앙 */
  text-align: center;
}

/* =====================
   타이틀
===================== */
h1 {
  font-size: 44px;
  margin-bottom: 24px;
  text-align: center;
}

/* =====================
   📜 코드 설명
===================== */
.code-desc {
  position: relative;
  text-align: center;
  color: transparent;
}

.code-desc::before {
  position: relative;
  display: block;
  width: 100%;

  white-space: pre-line;      /* \A 유지 + 자동 줄바꿈 */
  word-break: keep-all;

  text-align: center;

  font-family: Consolas, monospace;

  /* 🔥 해상도에 맞게 자동 조절 */
  font-size: clamp(12px, 2vw, 16px);
  line-height: 1.8;

  content:
"CodeNote는 사용자의 안전을 위한 포켓 블랙박스,\A\
학생들의 학습 집중을 위한 스마트폰 설계와 전용앱을 개발합니다.\A\
\A\
서버 비용 없이 운영 가능한 앱 키오스크 솔루션을 제공하며,\A\
Android 애플리케이션과 삼성폰 전용 앱을 전문적으로 설계·개발합니다.\A\
또한 포렌식 분석 및 데이터 검증 기술을 기반으로\A\
관리 · 자동화 · 보호 목적의 소프트웨어를 구현합니다.\A\
\A\
개발 및 제작 문의는 아래 메일로 직접 연락 바랍니다.\A\
";

  background: linear-gradient(
    90deg,#3498db,#9b59b6,#1abc9c
  );
  -webkit-background-clip: text;
  color: transparent;
}


/* =====================
   ✅ 본문 텍스트만 왼쪽 정렬 (핵심)
===================== */
.container h2,
.container h3,
.container p,
.container ul,
.container ol,
.container li {
  text-align: left;
}

/* 리스트 중앙 밀림 방지 */
.container ul,
.container ol {
  padding-left: 20px;
}

/* =====================
   앱 카드
===================== */
.images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin: 60px 0;
  justify-items: center;
}

/* =====================
   영상 / 이미지
===================== */
.video-wrap,
.detail-img {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
}

/* =====================
   모바일
===================== */
@media (max-width: 768px) {

  .container {
    width: calc(100% - 32px);
    padding: 50px 20px;
  }

  h1 { font-size: 28px; }

  img, iframe {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
}

/* =========================
   🔥 앱 버튼 카드 스타일
========================= */

.image-box {
  width: 100%;
  max-width: 320px;
  padding: 30px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.3px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.08),
    0 4px 10px rgba(0,0,0,0.04);

  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 🔥 위에 얇은 그라데이션 라인 */
.image-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #3498db,
    #9b59b6,
    #1abc9c
  );
}

/* 🔥 호버 효과 */
.image-box:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 45px rgba(0,0,0,0.15),
    0 10px 20px rgba(0,0,0,0.08);
}

/* 🔥 링크 색상 제거 */
.image-box:link,
.image-box:visited {
  color: #222;
}

/* =========================
   준비중 버튼
========================= */

.image-box.disabled {
  background: rgba(240,240,240,0.9);
  color: #999;
  cursor: default;
}

.image-box.disabled::before {
  background: linear-gradient(
    90deg,
    #ccc,
    #bbb
  );
}

.image-box.disabled:hover {
  transform: none;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.06);
}

.contact {
  text-align: center !important;
}

.contact {
  text-align: center !important;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(0,0,0,0.05);
}