/* ============================================================================
   web/shared/public.css — 공개 지면 디자인 시스템 (v3.13, 요즘IT풍 라이트)
   ----------------------------------------------------------------------------
   적용: 랜딩(/) · 가이드(/guide/*) · 인증(/forgot·/verify·/reset) · 약관 뷰어(/legal-view)
   ★ 포털 3종(/me·/adv·/admin)은 기존 shared/style.css(다크) 그대로 — 이 파일을 읽지 않는다.
   원칙: 흰 배경 + 검정 타이포(Pretendard) + 딥 그린 포인트 + 1200px 컨테이너 + 카드 그리드.
         다크는 "터미널 데모" 같은 제품 화면 재현 블록에만 지역적으로 남긴다(페이지 로컬 CSS).
   폰트: Pretendard Variable 셀프호스트(/shared/fonts — OFL-1.1, CSP font-src 'self' 준수).
   ============================================================================ */

@font-face{
  font-family:'Pretendard Variable';
  src:url('/shared/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 잉크·중립 */
  --ink:#191F28;          /* 제목·본문 */
  --sub:#4E5968;          /* 보조 본문 */
  --dim:#8B95A1;          /* 캡션·메타 */
  --line:#E5E8EB;         /* 경계선 */
  --bg:#FFFFFF;
  --bg-alt:#F7F8FA;       /* 교차 섹션·푸터 */
  /* 브랜드 — 딥 그린(민트의 라이트 배경 판) + 금액 골드 */
  --green:#0B8A5C;
  --green-strong:#087049;
  --green-tint:#E9F7F1;
  --gold:#A16207;
  /* 형태 */
  --container:1200px;
  --r-card:16px;
  --r-btn:10px;
  --shadow-card:0 6px 24px -12px rgba(25,31,40,.14);
  --shadow-card-hover:0 14px 36px -14px rgba(25,31,40,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',
    Roboto,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px;line-height:1.7;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;word-break:keep-all;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;vertical-align:middle}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.sub{color:var(--sub)} .dim{color:var(--dim)} .green{color:var(--green)} .gold{color:var(--gold)}

/* ── 상단 네비게이션 — 스티키 화이트 ── */
.pnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pnav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.pnav .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.pnav .logo .w{width:29px;height:29px;border-radius:8px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
.pnav .links{display:flex;gap:22px;font-size:15px;font-weight:600;color:var(--sub)}
.pnav .links a:hover{color:var(--green)}
.pnav .spacer{flex:1}
.pnav .actions{display:flex;align-items:center;gap:10px}
/* ── 모바일 내비 (실증 버그 수정: 링크를 숨기기만 하고 대체 UI가 없어
   860px 이하에서 메뉴 접근이 불가능했다) — 햄버거 + 드롭다운 ── */
.pnav .burger{display:none;width:44px;height:44px;margin-left:2px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--ink);font-size:19px;line-height:1;
  align-items:center;justify-content:center;cursor:pointer}
.pnav .burger:hover{border-color:var(--green);color:var(--green)}
@media (max-width:860px){
  .pnav .links{display:none}
  .pnav .burger{display:flex}
  .pnav.open .links{display:flex;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px -18px rgba(25,31,40,.25);padding:4px 20px 10px}
  .pnav.open .links a{display:flex;align-items:center;min-height:48px;font-size:16px;
    border-bottom:1px solid var(--line)}
  .pnav.open .links a:last-child{border-bottom:none}
}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-btn);padding:13px 22px;font-weight:700;font-size:15.5px;
  cursor:pointer;border:1px solid transparent;transition:.15s;line-height:1.2}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-strong)}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--green);color:var(--green)}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:9px}
.btn.lg{padding:16px 28px;font-size:17px;border-radius:12px}

/* ── 칩(카테고리 라벨 — 요즘IT의 분류 칩) ── */
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--green-tint);color:var(--green-strong);
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;letter-spacing:0}

/* ── 섹션 골격 ── */
.sec{padding:76px 0}
.sec.alt{background:var(--bg-alt)}
.sec-head{max-width:640px;margin:0 0 40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-kicker{font-size:14px;font-weight:800;color:var(--green);letter-spacing:.02em;margin:0 0 10px}
.sec-title{font-size:clamp(24px,3.2vw,32px);font-weight:800;line-height:1.35;letter-spacing:-.02em;margin:0}
.sec-desc{color:var(--sub);margin:14px 0 0;font-size:16.5px}

/* ── 카드 그리드(매거진 카드) ── */
.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){ .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid.c3,.grid.c2,.grid.c4{grid-template-columns:1fr} }

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px;transition:.18s;box-shadow:none}
a.card:hover,.card.hov:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:#D9DEE3}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--green-tint);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:16px}
.card h3{font-size:18px;font-weight:750;margin:0 0 8px;letter-spacing:-.015em}
.card p{margin:0;color:var(--sub);font-size:15px;line-height:1.65}
.card .more{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--green)}

/* 번호 스텝 카드 */
.step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:999px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:800;margin-bottom:14px}

/* ── 사실 스트립(과장 없는 제품 사실) ── */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.fact b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.fact span{color:var(--dim);font-size:13.5px}
@media (max-width:960px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .facts{grid-template-columns:1fr} }

/* ── FAQ(details) ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  padding:20px 4px;font-size:16.5px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--dim);font-weight:600;font-size:20px;transition:.15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 22px;color:var(--sub);font-size:15.5px}

/* ── CTA 밴드 ── */
.band{background:var(--green-tint);border-radius:20px;padding:52px 40px;text-align:center}
.band h2{font-size:clamp(22px,3vw,28px);font-weight:800;margin:0 0 8px;letter-spacing:-.02em}
.band p{color:var(--sub);margin:0 0 26px}
.band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── 푸터(기업형) ── */
.pfoot{background:var(--bg-alt);border-top:1px solid var(--line);margin-top:76px;
  padding:48px 0 56px;font-size:14px;color:var(--sub)}
.pfoot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:34px}
.pfoot h4{font-size:13.5px;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:.01em}
.pfoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pfoot a:hover{color:var(--green)}
.pfoot .biz{border-top:1px solid var(--line);padding-top:22px;color:var(--dim);font-size:13px;line-height:1.9}
@media (max-width:860px){ .pfoot .cols{grid-template-columns:1fr 1fr} }

/* ── 언어 스위처(라이트) ── */
.lc-lang{background:#fff;color:var(--sub);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;font-size:13.5px;cursor:pointer;font-family:inherit}
.lc-lang:hover{border-color:var(--green);color:var(--green)}

/* ── 접근성 ── */
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}