/* Orbit 회사 사이트. '심연 속 궤도' — 우주적·신비. 히어로는 살아있는 장면, 아래는 시원한 여백.
   라이트/다크 둘 다 토큰으로. 악센트(앰버)는 중심별/핵심 포인트에만. */
:root{
  --bg:#edf1f7; --surface:#ffffff; --ink:#1a2435; --muted:#525d6e; --faint:#6f7c92;
  --line:#dbe3ef; --accent:#c6882f; --sheet:rgba(237,241,247,.5);
  --k-star:#5f6e8a; --k-dim:#9aa6bd; --k-sirius:#2f5f93; --k-orbit:#a8b4ca;
  --k-neb1:rgba(120,150,210,0); --k-neb2:rgba(160,120,190,0);
  color-scheme:light;
  --display:'Poppins','Noto Sans KR',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --kr:'Noto Sans KR','Apple SD Gothic Neo',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#070b16; --surface:#0e1626; --ink:#e9eefb; --muted:#aab6ce; --faint:#7e8ca8;
  --line:#1b2740; --accent:#f0c270; --sheet:rgba(7,11,22,.22);
  --k-star:#dfe8fb; --k-dim:#8295b8; --k-sirius:#cfe3ff; --k-orbit:#26324a;
  --k-neb1:rgba(74,104,186,0.13); --k-neb2:rgba(150,96,176,0.10); color-scheme:dark; }}
:root[data-theme="dark"]{
  --bg:#070b16; --surface:#0e1626; --ink:#e9eefb; --muted:#aab6ce; --faint:#7e8ca8;
  --line:#1b2740; --accent:#f0c270; --sheet:rgba(7,11,22,.22);
  --k-star:#dfe8fb; --k-dim:#8295b8; --k-sirius:#cfe3ff; --k-orbit:#26324a;
  --k-neb1:rgba(74,104,186,0.13); --k-neb2:rgba(150,96,176,0.10); color-scheme:dark; }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--kr);font-weight:400;line-height:1.68;font-size:16px;-webkit-font-smoothing:antialiased}
.gutter{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.wrap{max-width:860px;margin:0 auto}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* 상단 */
.top{position:relative;z-index:3;max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.top-right{display:flex;align-items:center;gap:12px}
.enter{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 15px;border:1px solid var(--line);border-radius:999px;transition:color .18s ease,border-color .18s ease}
.enter:hover{color:var(--ink);border-color:var(--muted)}
.enter svg{transition:transform .18s ease}
.enter:hover svg{transform:translateX(2px)}
.toggle{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.toggle:hover{color:var(--ink);border-color:var(--muted)}
.toggle{display:none}  /* 2026-10-28 라이트모드 임시 숨김 — 다크 고정. 되살리려면 이 줄 삭제 */
.toggle .moon{display:none}
:root[data-theme="dark"] .toggle .sun{display:none}:root[data-theme="dark"] .toggle .moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .toggle .sun{display:none}
  :root:not([data-theme="light"]) .toggle .moon{display:block}}

/* 고정 우주 배경 — 뷰포트를 꽉 채우고, 콘텐츠가 그 위로 떠오른다 */
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 첫 화면: 상단바 + 히어로가 뷰포트 한 장 */
.firstscreen{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding-bottom:6vh}

/* 콘텐츠 시트: 고정 배경 위로 올라오는 반투명 패널(위쪽은 부드럽게 페이드) */
.sheet{position:relative;z-index:1;background:var(--sheet)}
.sheet::before{content:"";position:absolute;left:0;right:0;top:-120px;height:120px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--sheet))}
.center{position:relative;z-index:2;text-align:center;padding:0 22px}
.wm-wrap{margin:0}
.wm{display:block;margin:0 auto;width:clamp(240px,60vw,560px);height:auto;overflow:visible}
.wm-ring{fill:none;stroke:var(--ink);stroke-width:6.2}
.wm-sun{fill:var(--accent)}
.wm-planet{fill:var(--ink)}
.wm-text{fill:var(--ink);font-family:var(--display);font-weight:500;font-size:54px;letter-spacing:-.02em}
.wm-orbit{transform-box:view-box;transform-origin:46px 46px;animation:wm-spin 8s linear infinite}
@keyframes wm-spin{to{transform:rotate(360deg)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wm{filter:drop-shadow(0 0 40px rgba(150,180,255,.16))}}
:root[data-theme="dark"] .wm{filter:drop-shadow(0 0 40px rgba(150,180,255,.16))}
@media (prefers-reduced-motion:reduce){.wm-orbit{animation:none}}

/* 섹션 공통 */
section.blk{padding-block:clamp(54px,10vw,96px)}
.blk + .blk{border-top:1px solid var(--line)}
.sh{margin-bottom:clamp(26px,5vw,42px)}
.sh h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,4.6vw,40px);line-height:1.15;margin-top:12px;letter-spacing:-.01em}
.sh h2 em{color:var(--accent);font-style:normal}

/* 선언 */
.manifesto{font-family:var(--display);font-weight:300;font-size:clamp(21px,3.6vw,30px);line-height:1.45;max-width:20ch;letter-spacing:-.005em}
.manifesto em{color:var(--accent);font-style:normal}
.mf-note{color:var(--muted);font-size:16px;margin-top:22px;max-width:46ch;line-height:1.7}

/* 직급 광도 */
.ranks{display:flex;flex-direction:column}
.rank{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.rank:first-child{border-top:0}
@media(max-width:540px){.rank{grid-template-columns:40px 1fr;gap:14px 16px}.rank .data{grid-column:2}}
.rank .star{display:grid;place-items:center}
.rank .nm{font-family:var(--display);font-size:22px;font-weight:500}
.rank .nm small{font-family:var(--kr);font-size:13.5px;color:var(--muted);font-weight:400;margin-left:10px}
.rank .data{text-align:right;font-size:14.5px;color:var(--muted)}
.rank .data .t{font-family:var(--mono);color:var(--ink);font-size:12.5px}
@media(max-width:540px){.rank .data{text-align:left;font-size:13.5px}}

/* 직원 */
.emp{display:grid;grid-template-columns:minmax(0,1fr) 1.25fr;gap:clamp(22px,5vw,56px);align-items:start}
@media(max-width:640px){.emp{grid-template-columns:1fr;gap:24px}}
.emp .name{font-family:var(--display);font-size:clamp(34px,7vw,52px);font-weight:400;line-height:1;letter-spacing:-.01em}
.emp .desig{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:11px;letter-spacing:.02em}
.emp .rankline{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:15px}
.emp .status{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:13px;color:var(--ink)}
.emp .status .d{width:7px;height:7px;border-radius:50%;background:#5aa06e}
.facts{display:grid;gap:19px}
.fact{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline}
@media(max-width:420px){.fact{grid-template-columns:1fr;gap:3px}}
.fact .k{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.fact .v{font-size:15.5px;line-height:1.5}
.fact .v .mono{font-size:13.5px;color:var(--muted)}
.next{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
.next .no{font-family:var(--mono);font-size:12.5px}

/* 비전 + 대표(CEO) */
.vision{color:var(--muted);font-size:16px;line-height:1.72;max-width:54ch;margin:0}
.ceo{display:flex;gap:22px;align-items:flex-start;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.ceo-mark{flex:none;width:48px;height:48px;display:grid;place-items:center;margin-top:4px}
.ceo-tag{display:inline-block;color:var(--accent)}
.ceo-name{font-family:var(--display);font-size:clamp(28px,5vw,40px);font-weight:400;line-height:1;letter-spacing:-.01em;margin-top:8px}
.ceo-desc{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:48ch;margin:14px 0 0}
@media(max-width:540px){.ceo{gap:15px}.ceo-mark{width:40px;height:40px}}

/* 운영 */
.ops{display:grid;gap:clamp(22px,4vw,30px)}
.op{display:grid;grid-template-columns:150px 1fr;gap:clamp(14px,3vw,34px);padding-top:22px;border-top:1px solid var(--line)}
.op:first-child{border-top:0;padding-top:0}
@media(max-width:560px){.op{grid-template-columns:1fr;gap:6px}}
.op .t{font-family:var(--display);font-size:20px;font-weight:500}
.op .t em{color:var(--accent);font-style:normal}
.op .d{color:var(--muted);font-size:15.5px;max-width:54ch;line-height:1.6}

footer{padding-block:40px 54px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.03em}
footer b{color:var(--muted);font-weight:500}

.starmark{color:var(--ink)}

/* 다듬기: 스크롤 유도선 + 미세 호버 */
.scrollcue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:1px;height:32px;background:linear-gradient(var(--faint),transparent);z-index:2;opacity:.7}
.scrollcue::after{content:"";position:absolute;top:0;left:-1px;width:3px;height:3px;border-radius:50%;background:var(--accent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{top:0;opacity:0}15%{opacity:1}75%{opacity:1}100%{top:28px;opacity:0}}
.rank,.op{transition:background .18s ease}
.rank:hover,.op:hover{background:var(--surface)}
.sh .eyebrow{display:inline-flex;align-items:center}
.sh .eyebrow::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);margin-right:9px;flex:none}
.emp .status .d{animation:livepulse 2.4s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(90,160,110,.5)}50%{box-shadow:0 0 0 5px rgba(90,160,110,0)}}
.ranks .rank:first-child .starmark{filter:drop-shadow(0 0 7px rgba(223,232,251,.4))}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* 전체 필름 그레인 — 통일감(아주 옅게). 고정 배경부터 콘텐츠 시트까지 한 겹으로 덮어 질감을 맞춘다 */
body::after{content:"";position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}