/* lp.css — 상세페이지 리뉴얼 공통 스타일 (2026-10-24, 10/25 배경·제목 글씨 로고드 판으로). 폰트: Pretendard CDN link 는 각 html head 에 */

:root{
  --blue:#2A1DB5; --blue-500:#4636D6; --blue-300:#8A80E8; --blue-900:#180F66;
  --tint:#F3F2FD; --orange:#F47B20;
  --ink:#14132B; --gray:#6B7280; --gray-2:#9CA3AF;
  --bg:#F7F7FB; --grid-minor:#ECEBF4; --grid-major:#DDDBEC;
  --shadow:0 5px 15px rgba(24,15,102,.07);
  /* 제목 글씨 = Pretendard ExtraBold, 애플식으로 자간을 좁게 (10/25 대표님: 참고 페이지 글씨와 겹치지 않게) */
  --display:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  /* 그레인 = logod.kr /class 와 같은 알갱이 (06_brand/사이트/class.html) */
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.30'/></svg>");
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);font-family:Pretendard,system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;word-break:keep-all}

/* 1. 배경: 옅은 블루 그라데이션 + 그레인 (10/25 모눈 대신). 글 읽는 자리는 거의 흰색으로 둔다 */
.page{max-width:540px;margin:0 auto;
  background-color:#FAF9FE;
  background-image:
    var(--noise),
    radial-gradient(120% 900px at 50% 0,#E9E6FB 0,rgba(233,230,251,0) 70%),
    radial-gradient(80% 1200px at 100% 55%,rgba(244,123,32,.05) 0,rgba(244,123,32,0) 70%),
    radial-gradient(90% 1400px at 0 80%,rgba(70,54,214,.06) 0,rgba(70,54,214,0) 70%);
  background-size:300px 300px,100% 100%,100% 100%,100% 100%;
  background-blend-mode:multiply,normal,normal,normal;}
.sec{padding:60px 22px 70px;text-align:center;border-top:1px solid rgba(20,19,43,.06)}

/* 2. 섹션 머리: 알약 라벨 + 부제 / 2줄 대제목 / 리드 */
.head{display:flex;justify-content:center;align-items:center;gap:9px;margin-bottom:16px}
.pill{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;
  background:var(--blue);color:#fff;font-weight:900;font-size:19px;letter-spacing:-.01em}
.pill.gray{background:var(--gray)} .pill.dark{background:var(--ink)}
.pill.soft{background:#E9E8F2;color:var(--ink)}
.pill.sm{height:23px;padding:0 11px;font-size:14px}
.eyebrow{color:var(--blue);font-weight:800;font-size:21px;letter-spacing:-.03em}
.h1{font-family:var(--display);font-weight:800;font-size:44px;
  line-height:1.22;letter-spacing:-.045em;color:var(--ink)}
.lead{margin-top:16px;font-size:16.5px;line-height:1.5;letter-spacing:-.02em;color:#4A4D5E}
.lead b{font-weight:800;color:var(--ink)}
.note{margin-top:18px;font-size:12.5px;line-height:1.55;font-weight:600;color:var(--gray)}
.note small{display:block;font-size:11px;font-weight:500;color:var(--gray-2)}

/* 3. 강조 단어: 숫자·결과·우리 쪽만, 조사는 밖으로 */
.hl{color:var(--blue)}
.dark .hl{color:var(--orange)}

/* 4. 번호 카드 01·02·03 */
.cards{display:grid;gap:10px;margin-top:22px;text-align:left}
.ncard{display:flex;align-items:center;gap:22px;background:#fff;border-radius:14px;
  padding:18px 22px;min-height:75px;box-shadow:var(--shadow)}
.ncard .no{font-family:var(--display);font-weight:800;font-size:28px;color:var(--blue);
  min-width:34px;letter-spacing:-.03em}
.ncard h4{font-size:17.5px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.ncard p{font-size:13px;color:var(--gray);margin-top:3px;letter-spacing:-.02em}
.ncard .plus{color:var(--blue);font-weight:900;font-size:22px;min-width:34px}  /* "+" 카드 */
.ncard .chk{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:900}          /* 체크 카드 */
.ncard .chk.warn{background:var(--ink)}

/* 5. 폰 목업 + 2대 비교 */
.duo{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.phone{position:relative;width:150px;aspect-ratio:9/18.5;border:3px solid #1A1A2A;
  border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 20px rgba(24,15,102,.10)}
.phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:35px;height:10px;border-radius:999px;background:#1A1A2A;z-index:2}
.phone img,.phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone.sm{width:110px;border-width:1.5px;border-radius:11px}
.arrow{width:43px;height:43px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:900;flex:none;
  box-shadow:0 6px 14px rgba(42,29,181,.3)}
.cap{margin-top:8px;font-size:13px;font-weight:700;color:var(--gray)}
.cap.on{color:var(--blue)}

/* 6. 까만 터미널 상자 (파일 트리) */
.term{margin-top:20px;background:var(--ink);border-radius:14px;padding:18px 20px 22px;text-align:left;
  font:13px/1.42 ui-monospace,"SF Mono",Menlo,Consolas,Pretendard,monospace;color:#fff;white-space:pre;overflow-x:auto}
.term::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#5A5A6A;
  box-shadow:12px 0 #5A5A6A,24px 0 #5A5A6A;margin-bottom:14px}
.term .f{color:#A9A2F0} .term .d{color:#9CA3AF}
.code{display:inline-block;background:var(--ink);color:#fff;border-radius:5px;padding:4px 9px;
  font:700 13px ui-monospace,Consolas,Pretendard,monospace}

/* 7. 비교표 (오른쪽 = 우리) */
.cmp{width:100%;margin-top:22px;border-collapse:separate;border-spacing:0;background:#fff;
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);text-align:left;font-size:13.5px}
.cmp th,.cmp td{padding:13px 12px;border-bottom:1px solid #EEEDF5;vertical-align:top}
.cmp th{font-weight:800;font-size:15px}
.cmp td:first-child{color:var(--gray);font-weight:700;width:24%}
.cmp th:last-child{background:var(--blue);color:#fff}
.cmp td:last-child{background:var(--tint);font-weight:800}
.cmp tr:last-child td{border-bottom:0}

/* 8. 마무리 상자 */
.end{margin:10px 16px 40px;background:var(--blue-900);border-radius:18px;padding:34px 20px;
  text-align:center;color:#fff}
.end .h1{color:#fff;font-size:40px}
.end p{margin-top:12px;color:#C9C6EE;font-size:15px;font-weight:600}