/* web.smartertools.co.kr — 제품 소개 사이트 테마
 *
 * 색·글꼴은 mail.freeit.co.kr(웹메일)의 :root 토큰을 그대로 가져왔다.
 * 웹메일과 홈페이지가 같은 제품군으로 읽히도록 하기 위한 것이고,
 * 레이아웃 클래스(page-hero, sec-wrap, cards-grid …)는 기존 style.css 를 그대로 쓴다.
 * style.css 뒤에 읽히므로 필요한 값만 덮어쓴다.
 */
:root {
  /* 웹메일과 동일한 토큰 */
  --clr-bg:            #f5f6f8;
  --clr-text:          #222222;
  --clr-text-sub:      #64748b;
  --clr-primary:       #26205a;
  --clr-primary-hover: #0042aa;
  --clr-border:        #e2e5ea;
  --clr-border-light:  #f1f5f9;
  --clr-surface:       #ffffff;
  --header-bg:         #1e293b;
  --header-text:       #f1f5f9;
  --theme-font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 제품군 색 — 제품 페이지 히어로와 배지에 쓴다 */
  --prod-mail:    #26205a;
  --prod-office:  #3366ff;   /* YuniOffice 기본색 */
  --prod-talk:    #0f766e;
  --prod-android: #3ddc84;
  --prod-ios:     #0f172a;
}

body { font-family: var(--theme-font); color: var(--clr-text); background: var(--clr-surface); }

/* ── 히어로 ─────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #1b1740 0%, var(--clr-primary) 55%, #3b3480 100%);
  border-bottom: 3px solid var(--clr-primary-hover);
}
.page-hero h1 { letter-spacing: -.5px; }
.page-hero-inner { max-width: 1080px; }

/* 제품별 히어로 색 — 페이지 slug 에 맞춰 body 클래스로 건다 */
.hero-office   .page-hero { background: linear-gradient(135deg,#0b1b3f 0%,#1c3fa0 55%,var(--prod-office) 100%); border-bottom-color:#8fb0ff; }
.hero-talk     .page-hero { background: linear-gradient(135deg,#052e2b 0%,#0f766e 55%,#14b8a6 100%); border-bottom-color:#5eead4; }
.hero-android  .page-hero { background: linear-gradient(135deg,#0b2818 0%,#15803d 55%,#3ddc84 100%); border-bottom-color:#86efac; }
.hero-ios      .page-hero { background: linear-gradient(135deg,#020617 0%,#1e293b 55%,#475569 100%); border-bottom-color:#94a3b8; }

/* ── 섹션 본문 ──────────────────────────────────────────── */
.sec-wrap { border-bottom: 1px solid var(--clr-border-light); }
.sec-text-only h2,
.sec-image-text .sec-it-text h2 { color: var(--clr-text); letter-spacing: -.3px; }
.sec-desc { color: #475569; }

/* 기능 목록 — 섹션 본문 안에서 쓰는 격자 */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px; }
.feat-item {
  background: var(--clr-surface); border:1px solid var(--clr-border); border-radius:10px;
  padding:18px 20px; transition:border-color .15s, box-shadow .15s;
}
.feat-item:hover { border-color:#c7cbd6; box-shadow:0 2px 14px rgba(16,24,40,.06); }
.feat-item h4 { font-size:.95rem; font-weight:700; color:var(--clr-text); margin:0 0 6px; }
.feat-item p  { font-size:.87rem; color:var(--clr-text-sub); line-height:1.65; margin:0; }

/* 사양/비교 표 — 좁은 화면에서 표 하나 때문에 페이지 전체가 넓어지지 않도록
   표만 따로 가로 스크롤되게 두고, 머리칸의 nowrap 은 넓은 화면에서만 건다. */
.spec-table { width:100%; border-collapse:collapse; margin-top:20px; font-size:.88rem; }
.spec-table th, .spec-table td { border:1px solid var(--clr-border); padding:10px 14px; text-align:left; }
.spec-table th { background:var(--clr-bg); font-weight:700; color:var(--clr-text); }
.spec-table td { color:#475569; }
@media (min-width:769px) { .spec-table th { white-space:nowrap; } }

/* 상태 배지 — 출시/개발중/예정 */
.st-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:20px; margin-left:6px; vertical-align:middle; }
.st-badge.live    { background:#dcfce7; color:#15803d; }
.st-badge.beta    { background:#fef3c7; color:#b45309; }
.st-badge.planned { background:#e0e7ff; color:#4338ca; }

/* ── 펀딩 신청 폼 ───────────────────────────────────────── */
.fund-box {
  background: var(--clr-bg); border:1px solid var(--clr-border); border-radius:14px;
  padding:28px 28px 24px; max-width:720px; margin:26px auto 0;
}
.fund-box h3 { font-size:1.15rem; font-weight:800; color:var(--clr-text); margin:0 0 6px; }
.fund-box .fund-lead { font-size:.9rem; color:var(--clr-text-sub); line-height:1.7; margin:0 0 20px; }
.fund-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.fund-field { display:flex; flex-direction:column; gap:6px; }
.fund-field.full { grid-column:1 / -1; }
.fund-field label { font-size:.82rem; font-weight:600; color:#374151; }
.fund-field label .req { color:#dc2626; margin-left:2px; }
.fund-field input, .fund-field select, .fund-field textarea {
  font-family:inherit; font-size:.9rem; color:var(--clr-text);
  background:var(--clr-surface); border:1px solid var(--clr-border); border-radius:8px;
  padding:10px 12px; width:100%; box-sizing:border-box; transition:border-color .15s, box-shadow .15s;
}
.fund-field textarea { min-height:96px; resize:vertical; }
.fund-field input:focus, .fund-field select:focus, .fund-field textarea:focus {
  outline:none; border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(38,32,90,.12);
}
.fund-agree { display:flex; align-items:flex-start; gap:8px; font-size:.83rem; color:var(--clr-text-sub); margin:4px 0 18px; line-height:1.6; }
.fund-agree input { margin-top:3px; flex:none; }
.fund-agree a { color:var(--clr-primary-hover); }
.fund-submit {
  width:100%; font-family:inherit; font-size:.95rem; font-weight:700; color:#fff;
  background:var(--clr-primary); border:none; border-radius:8px; padding:13px; cursor:pointer;
  transition:background .15s;
}
.fund-submit:hover:not(:disabled) { background:var(--clr-primary-hover); }
.fund-submit:disabled { opacity:.55; cursor:default; }
.fund-msg { margin-top:14px; font-size:.88rem; text-align:center; line-height:1.6; display:none; }
.fund-msg.ok   { display:block; color:#15803d; }
.fund-msg.err  { display:block; color:#dc2626; }

@media (max-width:768px) {
  .fund-row { grid-template-columns:1fr; }
  .fund-box { padding:22px 18px 20px; border-radius:12px; }

  /* 좁은 화면에서 가로 스크롤이 생기지 않게 — 넘칠 수 있는 것은 표와 코드뿐이고,
     그 둘만 자기 영역 안에서 스크롤하게 둔다. */
  .spec-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:normal; }
  .spec-table th, .spec-table td { min-width:110px; }
  .feat-grid { grid-template-columns:1fr; gap:14px; }
  .sec-inner { padding:0 18px; }
  /* 사이드바가 있는 페이지의 본문 최소폭(980px)이 휴대폰에서 페이지를 넓혀 버린다 */
  .page-layout { flex-direction:column; }
  .main-content { min-width:0; padding:0 18px 32px; }
  .sidebar { width:100%; }
}

/* 어떤 경우에도 문서 전체가 가로로 밀리지 않게 하는 마지막 안전장치 */
html, body { max-width:100%; overflow-x:hidden; }