/* ITIT 공통 UI (모든 페이지 공통 헤더·푸터·디자인 토큰)
   클래스는 itx- 로 시작해서 각 서비스(원격지원, 조립PC, 도서 등)의 기존 스타일과 섞이지 않습니다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  --itx-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --itx-brand:#1f5eff;
  --itx-brand-strong:#1546d1;
  --itx-brand-soft:#eef3ff;
  --itx-ink:#101828;
  --itx-ink-2:#344054;
  --itx-muted:#667085;
  --itx-line:#e7eaf0;
  --itx-bg:#f6f8fb;
  --itx-surface:#fff;
  --itx-radius:16px;
  --itx-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
}

/* ---------- 공통 헤더 ---------- */
.itx-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--itx-line);font-family:var(--itx-font);color:var(--itx-ink);line-height:1.4;-webkit-font-smoothing:antialiased}
.itx-header *{box-sizing:border-box}
.itx-header a{color:inherit;text-decoration:none}
.itx-in{max-width:1200px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;gap:28px}
.itx-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.itx-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#3b7bff,#1546d1);color:#fff;font-weight:800;font-size:14px;letter-spacing:-.5px;box-shadow:0 4px 12px rgba(31,94,255,.32)}
.itx-word{font-size:19px;font-weight:800;letter-spacing:-.6px;display:flex;align-items:baseline;gap:7px}
.itx-word small{font-size:12px;font-weight:600;color:var(--itx-muted);letter-spacing:0}
.itx-nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.itx-nav a{padding:8px 13px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--itx-ink-2);white-space:nowrap;transition:background .15s,color .15s}
.itx-nav a:hover{background:#f2f4f7;color:var(--itx-ink)}
.itx-nav a.is-active{background:var(--itx-brand-soft);color:var(--itx-brand)}
.itx-nav a[hidden]{display:none}
.itx-cta{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:9px 16px;border-radius:999px;background:var(--itx-ink);color:#fff!important;font-size:13.5px;font-weight:700;transition:background .15s,transform .15s}
.itx-cta:hover{background:var(--itx-brand);transform:translateY(-1px)}
.itx-cta svg{width:16px;height:16px}
.itx-header a:focus-visible{outline:3px solid #8fb1ff;outline-offset:2px}

/* 모바일: 로고 + 가로 스크롤 메뉴 (햄버거 없이 항상 보이게) */
@media (max-width:860px){
  .itx-in{height:auto;padding:10px 16px 0;flex-wrap:wrap;gap:8px 12px}
  .itx-logo{order:1}
  .itx-cta{order:2;margin-left:auto;padding:8px 13px;font-size:12.5px}
  .itx-nav{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 10px;gap:6px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  .itx-nav::-webkit-scrollbar{display:none}
  .itx-nav a{border:1px solid var(--itx-line);background:#fff;padding:7px 13px;font-size:13.5px}
  .itx-nav a.is-active{border-color:#c7d7fe}
  .itx-word small{display:none}
}

/* ---------- 공통 푸터 ---------- */
.itx-footer{padding:0;margin:0;border-top:1px solid var(--itx-line);background:var(--itx-surface);font-family:var(--itx-font);color:var(--itx-muted);font-size:13px;line-height:1.6}
.itx-footer a{color:inherit;text-decoration:none}
.itx-footer a:hover{color:var(--itx-ink)}
.itx-foot-in{max-width:1200px;margin:0 auto;padding:36px 28px 40px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.itx-foot-brand{font-size:17px;font-weight:800;color:var(--itx-ink);letter-spacing:-.4px}
.itx-foot-in p{margin:6px 0 0}
.itx-foot-links{display:flex;gap:6px 18px;flex-wrap:wrap;align-content:flex-start}
.itx-foot-links .itx-admin{color:#98a2b3}

/* ---------- 다크모드 (html.itx-dark 를 단 페이지만) ---------- */
@media (prefers-color-scheme:dark){
  html.itx-dark{--itx-ink:#eef2f8;--itx-ink-2:#c9d1de;--itx-muted:#98a2b3;--itx-line:#252c3a;--itx-bg:#0c111b;--itx-surface:#111725;--itx-brand-soft:rgba(79,129,255,.16);--itx-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35)}
  html.itx-dark .itx-header{background:rgba(12,17,27,.82)}
  html.itx-dark .itx-nav a:hover{background:#1a2131}
  html.itx-dark .itx-nav a.is-active{color:#8fb1ff}
  html.itx-dark .itx-cta{background:#eef2f8;color:#0c111b!important}
  html.itx-dark .itx-cta:hover{background:var(--itx-brand);color:#fff!important}
  @media (max-width:860px){html.itx-dark .itx-nav a{background:#131a28}}
}
@media print{.itx-header,.itx-footer{display:none!important}}
@media (prefers-reduced-motion:reduce){.itx-header *,.itx-footer *{transition:none!important}}