/* PEG 통합모듈 — 허브 껍데기(2026-09-14 확정: 2×2 점 목록 판).
   토큰·헤더·언어 토글은 업무관리 Pan5 template/style.css · 언어.css 와 같은 값. 색은 파랑(조작)·청록(PEG 표장) 둘뿐.
   첫 화면 = 큰 카드 넷(Optic · Pan · 모듈 · Terra) + 점 목록 / 2단계 = 경로 + 카드 3열 / 모듈은 덮개 iframe. */
:root{--ground:#fafafa;--surface:#fff;--surface-2:#f9fafb;--ink:#111827;--muted:#6b7280;--faint:#9ca3af;--line:#e5e7eb;
  --accent:#3b82f6;--accent-ink:#2563eb;--accent-soft:#eff6ff;--accent-line:#bfdbfe;--teal:#0f766e;--teal-soft:#f0fdfa;--teal-line:#99f6e4;
  --radius:8px;--shadow:0 1px 2px rgba(0,0,0,.04);
  --sans:'Geist','Inter','Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--hdr-h:62px}
*{box-sizing:border-box;margin:0;padding:0}
html{word-break:keep-all;overflow-wrap:break-word;line-break:strict}
/* 허브는 창 높이에 딱 맞춘다 — 스크롤이 없어야 한다(화면 배율 150% 기준 포함). 창이 낮으면 아래 @media(max-height) 규칙이 글자·여백을 줄인다 */
html{overflow:hidden}
body{font-family:var(--sans);font-size:14px;line-height:1.6;background:var(--ground);color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;height:100vh;display:flex;flex-direction:column;overflow:hidden}
body.covered{overflow:hidden}
h1,h2,h3{font-weight:600;color:var(--ink)}
button{font-family:inherit}
a{color:inherit;text-decoration:none}

/* ── 헤더 (Pan5 · 보상 Agent · Optic 과 같은 마크업) ── */
.hdr{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:0 32px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:50;min-height:var(--hdr-h)}
.hdr-brand{padding:16px 0;flex-shrink:0;display:flex;align-items:center;gap:10px}
.hdr-brand .brand-text{font-size:18px;font-weight:700;color:#111827;letter-spacing:-.01em;text-decoration:none;display:inline-block}
.brand-accent{color:var(--teal)}
.hdr .hdr-sp{flex:1}
/* ── 언어 토글 (template/언어.css 사본) ── */
.lang-toggle{display:flex;gap:2px;border:1px solid #e5e7eb;border-radius:999px;padding:2px;flex-shrink:0;margin-left:auto;background:#fff}
.lang-toggle button{border:none;background:none;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;color:#6b7280;cursor:pointer;font-family:inherit}
.lang-toggle button.active{background:#111827;color:#fff;font-weight:600}
html[lang=ja] body,html[lang=ja] button{font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans KR','Malgun Gothic',sans-serif}
html[lang="ja"],html[lang="ja"] *{word-break:normal}

/* ── 본문 ── */
.shell{max-width:1280px;width:100%;margin:0 auto;padding:20px 32px 0;flex:1;display:flex;flex-direction:column;min-height:0;overflow:visible}
.view{display:none}.view.on{display:flex;flex-direction:column;flex:1;min-height:0}
#v-home .hd{margin-bottom:14px}
.hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
.title{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 4px}
.lead{font-size:13.5px;color:var(--muted);margin:0}
/* ── 홈 단추 — 헤더 맨 왼쪽(「PEG ○○」 앞). 모든 화면에서 같은 자리(모듈 안에도 hub.js 심기() 가 같은 자리에 심는다) ── */
.home-btn{display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:12.5px;font-weight:500;color:#6b7280;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 12px 4px 9px;cursor:pointer;line-height:1.3;transition:all .15s;text-decoration:none;flex:none}   /* 헤더 맨 왼쪽 — gap 24px 을 상쇄해 「PEG ○○」 와 14px */
.home-btn:hover{color:#2563eb;border-color:#bfdbfe;background:#eff6ff}
.home-btn i{font-style:normal;font-size:15px;line-height:1;margin-top:-1px}
/* 홈 줄 — 본문 맨 위 왼쪽, 헤더 「PEG ○○」 글자 시작선(x=32)에 맞춘다. 본문은 1280 가운데라 그 차이만큼 왼쪽으로 */
.home-row{margin:-8px 0 10px;margin-left:calc(min(0px,(1280px - 100vw)/2));display:flex;align-items:center;gap:8px}

/* ── 첫 화면 — 큰 카드 넷 ── */
/* 첫 화면은 스크롤 없이 창을 다 쓴다 — 머리·바닥을 뺀 높이를 카드 넷이 나눠 갖는다 */
.big4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;flex:1;min-height:0}
.bc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px 28px 20px;position:relative;overflow:hidden;min-height:0;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bc::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),rgba(239,246,255,0) 70%);pointer-events:none}
.bc>*{position:relative}
.bc:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:0 12px 26px -14px rgba(37,99,235,.3),0 2px 4px -1px rgba(0,0,0,.04)}
.bc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bc .row{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.bc h2{font-size:26px;font-weight:700;letter-spacing:-.025em;color:#111827}
.bc:hover h2{color:var(--accent-ink)}
.bc .num{margin-left:auto;font-size:12px;font-weight:700;color:var(--faint);letter-spacing:.06em}
.ico{flex:none;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--accent-line);transition:all .16s}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bc:hover .ico{background:var(--accent);border-color:var(--accent);color:#fff}
.bc .de{font-size:13.5px;color:var(--muted);max-width:560px}
.dl{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.dl li{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;min-width:0}
.dl li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.dl li.off{color:var(--faint)}.dl li.off::before{background:#d1d5db}
.dl li .k{margin-left:auto;font-size:10.5px;color:var(--faint);font-weight:600;letter-spacing:.02em}
.bc .bot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between}
.bc .st{font-size:12px;color:var(--muted)}
.go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.go i{font-style:normal;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink);font-size:14px;line-height:1;transition:all .16s}
.bc:hover .go i,.card:hover .go i{background:var(--accent);color:#fff;transform:translateX(2px)}

/* ── 2단계 — 왼쪽 소개 판 + 오른쪽 카드(확정 옵션2). 창 높이를 나눠 갖는다 ── */
.two{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;flex:1;min-height:0}
.intro{display:flex;flex-direction:column;background:linear-gradient(160deg,#fff 0%,#fff 50%,var(--accent-soft) 100%);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:26px 26px 20px;min-height:0;overflow:hidden}
.intro .ico{width:52px;height:52px;border-radius:14px;margin-bottom:16px}.intro .ico svg{width:26px;height:26px}
.intro h1{font-size:28px;font-weight:700;letter-spacing:-.025em;margin:0 0 8px}.intro p{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0}
.intro .stat{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.intro .stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}.intro .stat span{font-size:11.5px;color:var(--muted)}
.intro ul{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.intro li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#374151}.intro li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.intro li.off{color:var(--faint)}.intro li.off::before{background:#d1d5db}.intro li .k{margin-left:auto;font-size:10.5px;color:var(--faint);font-weight:600}
.cards{display:grid;gap:12px;min-height:0}.cards.n3{grid-template-rows:repeat(3,1fr)}.cards.n6{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 20px;min-height:0;min-width:0;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-2px);border-color:var(--accent-line);box-shadow:0 10px 22px -12px rgba(37,99,235,.28),0 2px 4px -1px rgba(0,0,0,.04)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .ico{width:40px;height:40px;border-radius:11px}.card .ico svg{width:20px;height:20px}
.card:hover .ico{background:var(--accent);border-color:var(--accent);color:#fff}
.card .top{display:flex;align-items:center;gap:12px;min-width:0}.card .nm{font-size:16px;font-weight:600;color:#111827}
.card .bot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between}.card:hover .nm{color:var(--accent-ink)}
.key{flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--faint);line-height:1.5}
.card .de{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.55}
.card .go{font-size:12px}.card .go i{width:22px;height:22px;font-size:13px}
.card.off{cursor:default;background:transparent;border-style:dashed;box-shadow:none}
.card.off:hover{transform:none;border-color:var(--line);box-shadow:none}
.card.off .ico,.card.off:hover .ico{color:var(--faint);background:var(--surface-2);border-color:var(--line)}
.card.off .nm,.card.off:hover .nm{color:var(--muted)}.card.off .de{color:var(--faint)}
.soon{font-size:12px;font-weight:500;color:var(--faint);white-space:nowrap}
.cards.n6 .card{padding:12px 16px}.cards.n6 .card .top{gap:10px}.cards.n6 .card .nm{font-size:14.5px}.cards.n6 .card .de{font-size:12px;margin:2px 0 0}

/* ── 바닥 ── */
/* 바닥 — 허브와 모듈 덮개가 같은 띠를 쓴다(모든 화면에서 동일하게) */
.foot{max-width:1280px;width:100%;margin:16px auto 0;padding:11px 32px 13px;flex:none;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line)}
.cover-foot{max-width:none;margin:0;padding:9px 32px 10px;background:#fff}
.foot-logo{height:20px;opacity:.75}.foot-sp{flex:1}.foot-copy{font-size:11.5px;color:var(--faint);letter-spacing:.01em}

/* ── 모듈 화면 덮개 — 얇은 줄(뒤로 + 이름) 아래 iframe 이 창을 다 쓴다 ── */
.cover{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column}
.cover[hidden]{display:none}
.cover-body{flex:1;position:relative;min-height:0}
.cover-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.cover-body iframe[hidden]{display:none}
@media(max-width:960px){.big4,.grid3{grid-template-columns:1fr}.hdr,.shell,.foot{padding-left:16px;padding-right:16px}.bc{min-height:0}}

/* ── 낮은 창(화면 배율 150% · 노트북) — 스크롤 대신 글자·여백을 줄인다 ── */
@media(max-height:820px){
  .shell{padding-top:14px}.title{font-size:22px}#v-home .hd{margin-bottom:10px}
  .big4{gap:12px}.bc{padding:16px 20px 12px;border-radius:12px}.bc .row{gap:10px;margin-bottom:4px}.bc h2{font-size:20px}
  .ico{width:38px;height:38px;border-radius:10px}.ico svg{width:19px;height:19px}
  .bc .de{font-size:12.5px}.dl{margin-top:10px;padding-top:9px;gap:4px 20px}.dl li{font-size:12px}.bc .bot{padding-top:8px}.bc .st{font-size:11.5px}.go{font-size:12px}.go i{width:20px;height:20px;font-size:13px}
  .card{min-height:0}.card .main{padding:14px 16px 10px;gap:5px}.card .nm{font-size:15px}.card .de{font-size:12.5px}
  .foot{margin-top:12px;padding:10px 32px 12px}.foot-logo{height:18px}
}
@media(max-height:680px){
  .hdr{min-height:52px}.hdr-brand{padding:11px 0}.shell{padding-top:10px}.title{font-size:19px}#v-home .hd{margin-bottom:8px}
  .big4{gap:10px}.bc{padding:12px 16px 10px}.bc h2{font-size:18px}.ico{width:32px;height:32px}.ico svg{width:16px;height:16px}
  .bc .de{font-size:12px}.dl{margin-top:7px;padding-top:7px;gap:3px 16px}.dl li{font-size:11.5px}.bc .bot{padding-top:6px}
  .foot{margin-top:8px;padding:8px 32px 8px}.foot-copy{font-size:11px}
}