/* ================================================================
   워크지니 common.css
   전 페이지 공통 요소만 담습니다: 리셋/타이포, nav, footer, 버튼,
   섹션 헤더(sec-tag/title/desc), 뱃지, reveal 애니메이션.
   페이지 고유 섹션(히어로 슬라이더, 카드 그리드 등)은 각 파일의
   <style>에 그대로 둡니다 — 여기엔 "모든 페이지에 공통인 것"만.
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');

:root {
  --y: #ffff00;
  --dark: #0c0c0c;
  --dark2: #121212;
  --card: #141414;
  --card2: #181818;
  --border: rgba(255,255,255,0.15);
  --muted: #a8a8a8;
  --text: #ffffff;
  --px: max(6%, calc(50% - 660px));
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--dark); color:var(--text); font-family:'Noto Sans KR',-apple-system,sans-serif;
  overflow-x:hidden; line-height:1.6;
  word-break:keep-all; overflow-wrap:break-word;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:rgba(255,255,0,0.3); border-radius:2px; }

/* ── NAV ── */
nav {
  position:fixed; top:0; width:100%; z-index:200;
  padding:0 var(--px);
  display:flex; justify-content:space-between; align-items:center;
  height:64px;
  background:rgba(12,12,12,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,0,0.07);
  transition:all .3s;
}
.logo { font-size:20px; font-weight:900; color:var(--y); text-decoration:none; letter-spacing:-0.5px; display:flex; align-items:center; gap:6px; }
.nav-links { display:flex; gap:26px; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:13px; font-weight:400; transition:color .2s; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active { color:var(--y); }
.nav-cta { background:var(--y); color:#000; padding:9px 22px; border-radius:50px; font-size:13px; font-weight:700; text-decoration:none; transition:all .25s; white-space:nowrap; }
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(255,255,0,0.4); }
.nav-mobile-btn { display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; }

@media(max-width:900px) {
  .nav-links, .nav-cta { display:none; }
  .nav-mobile-btn { display:block; }
}

/* ── FOOTER ── */
footer { padding:40px var(--px); border-top:1px solid var(--border); display:flex; flex-direction:column; gap:20px; }
.footer-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-logo { font-size:18px; font-weight:900; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-logo:hover { color:var(--y); }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.footer-links a { font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--y); }
.footer-social { display:flex; gap:16px; align-items:center; }
.footer-social a { color:var(--muted); font-size:16px; text-decoration:none; transition:color .2s; }
.footer-social a:hover { color:var(--y); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.06); }
.footer-email { font-size:13px; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-email:hover { color:var(--y); }
footer p { font-size:12px; color:var(--muted); }
@media(max-width:640px) {
  .footer-top, .footer-bottom { flex-direction:column; text-align:center; }
}

/* ── BUTTONS ── */
.btn-y { background:var(--y); color:#000; padding:15px 34px; border-radius:50px; font-size:15px; font-weight:700; text-decoration:none; transition:all .25s; display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; }
.btn-y:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(255,255,0,0.4); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.14); padding:15px 34px; border-radius:50px; font-size:15px; font-weight:600; text-decoration:none; transition:all .25s; }
.btn-ghost:hover { border-color:rgba(255,255,0,.4); color:var(--y); }

/* ── SECTION HEADERS ── */
.sec-tag { font-size:11px; font-weight:700; color:var(--y); letter-spacing:3px; text-transform:uppercase; margin-bottom:14px; }
.sec-title { font-size:clamp(26px,3.4vw,38px); font-weight:900; letter-spacing:-1px; margin-bottom:12px; }
.sec-desc { font-size:14px; color:var(--muted); }

/* ── BADGE ── */
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,0,0.08); border:1px solid rgba(255,255,0,0.2); color:var(--y); font-size:13px; font-weight:700; letter-spacing:1px; padding:6px 16px; border-radius:50px; }
.hero-badge span { width:6px; height:6px; border-radius:50%; background:var(--y); animation:pulse 2s infinite; }

/* ── MOBILE STICKY CTA (모바일 전용 하단 고정 상담 버튼) ── */
.mobile-sticky-cta { display:none; }
@media(max-width:900px) {
  .mobile-sticky-cta {
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:250;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background:rgba(12,12,12,0.95); backdrop-filter:blur(20px);
    border-top:1px solid rgba(255,255,0,0.15);
  }
  .mobile-sticky-cta a {
    width:100%; text-align:center; justify-content:center;
    padding:14px 0; font-size:15px;
  }
  body.has-mobile-cta { padding-bottom:74px; }
}

/* ── REVEAL / 공통 애니메이션 ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

/* ================================================================
   APP WRAPPER — apps/*.html (미니 도구 상세 페이지) 공용 상단바 + 팝업
   이 블록 하나만 고치면 apps 폴더의 모든 도구 페이지에 한 번에 반영됩니다.
================================================================ */
.app-topbar {
  flex-shrink:0;
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  background:rgba(12,12,12,0.95);
  border-bottom:1px solid rgba(255,255,0,0.1);
  gap:12px;
}
.app-back-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--y); color:#000;
  padding:10px 20px; border-radius:50px;
  font-size:13px; font-weight:800;
  text-decoration:none; transition:all .2s;
  white-space:nowrap; flex-shrink:0;
}
.app-back-btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,255,0,0.35); }
.app-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--text);
  position:absolute; left:50%; transform:translateX(-50%);
}
.app-title .icon { font-size:18px; }
.app-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.app-action-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,0,0.09); border:1px solid rgba(255,255,0,0.3);
  color:var(--y); padding:10px 18px; border-radius:50px;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all .2s; white-space:nowrap; font-family:inherit;
}
.app-action-btn:hover:not(:disabled) { background:rgba(255,255,0,0.16); transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,255,0,0.2); }
.app-action-btn:disabled { background:rgba(255,255,255,0.05); border-color:var(--border); color:var(--muted); opacity:0.5; cursor:not-allowed; pointer-events:none; }
.app-badge {
  display:flex; align-items:center;
  font-size:13px; font-weight:700; color:var(--muted);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border); padding:10px 18px; border-radius:50px;
  white-space:nowrap;
}

.app-frame-wrap { flex:1; min-height:0; }
.app-frame-wrap iframe { width:100%; height:100%; border:none; display:block; background:#fff; }

/* ── 앱 상세 페이지 팝업(영상/프롬프트) ── */
.app-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px);
  z-index:1000; display:none; align-items:center; justify-content:center; padding:24px;
}
.app-modal-overlay.open { display:flex; }
.app-modal-box {
  background:var(--card); border:1px solid rgba(255,255,0,0.2); border-radius:20px;
  max-width:720px; width:100%; max-height:85vh; overflow:auto;
  position:relative; padding:28px;
}
.app-modal-close {
  position:absolute; top:14px; right:16px; background:none; border:none;
  color:var(--muted); font-size:20px; cursor:pointer;
}
.app-modal-box h3 { font-size:17px; font-weight:800; margin-bottom:18px; padding-right:30px; }
.video-embed-wrap { position:relative; padding-bottom:56.25%; height:0; border-radius:12px; overflow:hidden; background:#000; }
.video-embed-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }
.prompt-box {
  background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:12px;
  padding:18px; font-size:13px; line-height:1.7; color:var(--text);
  white-space:pre-wrap; word-break:break-word; max-height:50vh; overflow:auto; margin-bottom:16px;
}
.prompt-copy-btn { background:var(--y); color:#000; border:none; padding:11px 22px; border-radius:50px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.prompt-copy-btn:hover { transform:translateY(-1px); }

@media(max-width:760px) {
  .app-title { display:none; }
  .app-action-btn span.label { display:none; }
  .app-action-btn { padding:10px 12px; }
}

/* ── 앱 잠금 화면 (로그인 안 하고 직접 URL로 들어온 경우) ── */
.app-lock-overlay {
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; text-align:center;
}
.app-lock-box { max-width:380px; }
.app-lock-icon { font-size:44px; margin-bottom:20px; }
.app-lock-box h2 { font-size:22px; font-weight:900; margin-bottom:12px; letter-spacing:-0.5px; }
.app-lock-box p { font-size:14px; color:var(--muted); line-height:1.75; margin-bottom:28px; }