/* =========================================================================
   HARAM — Cockpit Portfolio  |  리얼 여객기/제트기 무드
   ========================================================================= */

/* 한글 전용 폰트(KIMM) — unicode-range로 한글 글자에만 적용, 영문/숫자는 기존 폰트 유지
   [폰트 출처/라이선스] 본 저작물은 '한국기계연구원'에서 '2022년' 작성하여 공공누리 제1유형으로
   개방한 '한국기계연구원 서체'를 이용하였으며, '한국기계연구원, www.kimm.re.kr/webfont'에서
   무료로 다운받을 수 있습니다. (공공누리 제1유형: 출처표시 — 상업적 이용·변형 가능) */
@font-face{
  font-family:"KIMM";
  src:url("../assets/fonts/KIMM_Light.ttf") format("truetype");
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face{
  font-family:"KIMM";
  src:url("../assets/fonts/KIMM_bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
/* 전체 범위(영문 포함) KIMM — 한/영을 KIMM으로 통일하고 싶은 곳에만 사용 (.kfont) */
@font-face{
  font-family:"KIMM Full";
  src:url("../assets/fonts/KIMM_Light.ttf") format("truetype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"KIMM Full";
  src:url("../assets/fonts/KIMM_bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
.kfont{font-family:"KIMM Full", var(--sans) !important}

:root{
  --panel-1:#12161b;      /* 계기판 상단 */
  --panel-2:#0a0d11;      /* 계기판 하단 */
  --bezel:#1c2127;
  --bezel-hi:#2b323a;
  --glass:#05070a;
  --efis:#03110c;         /* MFD 스크린 배경 */
  --cyan:#22e0d6;
  --green:#39ff88;
  --amber:#ffb020;
  --magenta:#ff5cc8;
  --ink:#cdd6df;
  --muted:#7b8896;
  --mono:"KIMM","SF Mono",ui-monospace,"Roboto Mono","Consolas",monospace;
  --sans:"KIMM","Segoe UI",system-ui,-apple-system,"Noto Sans KR",sans-serif;
}

*{box-sizing:border-box}
/* 누르는 요소는 롱프레스 선택/콜아웃 확실히 차단 */
.gauge,.lever,.ped-btn,button,a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#05070a;overflow:hidden;
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;      /* 롱프레스 텍스트 선택 방지 */
  -webkit-touch-callout:none;                       /* iOS 롱프레스 콜아웃 방지 */
  -webkit-tap-highlight-color:transparent;}         /* 탭 시 하이라이트 깜빡임 제거 */

#app{position:fixed;inset:0}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 구름층 통과 화이트아웃: 창밖(하늘)만 덮고 계기판/HUD(z≥5)는 위에 남는다 */
#cloudveil{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 42%, #ffffff 0%, #eef4fa 55%, #d8e4ef 100%);
  transition:opacity .12s linear}

/* 게이지 hover 시 하늘 창에 뜨는 사이버 HUD */
#scan{position:absolute;top:15vh;left:50%;transform:translate(-50%,8px);z-index:9;
  pointer-events:none;opacity:0;transition:opacity .18s, transform .18s}
#scan.show{opacity:1;transform:translate(-50%,0)}
.scan-box{position:relative;min-width:300px;max-width:78vw;padding:18px 34px;
  background:rgba(3,16,13,.42);backdrop-filter:blur(3px);
  border:1px solid rgba(34,224,214,.5);border-radius:3px;text-align:center;
  font-family:var(--mono);
  box-shadow:0 0 32px rgba(34,224,214,.24), inset 0 0 24px rgba(34,224,214,.08)}
/* 코너 브라켓 */
.scan-box::before,.scan-box::after{content:"";position:absolute;width:18px;height:18px;
  border:2px solid var(--cyan);filter:drop-shadow(0 0 4px rgba(34,224,214,.6))}
.scan-box::before{top:-3px;left:-3px;border-right:0;border-bottom:0}
.scan-box::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
.scan-head{display:block;font-size:10px;letter-spacing:.35em;color:var(--muted);margin-bottom:9px}
.scan-line{font-size:29px;font-weight:700;color:var(--cyan);letter-spacing:.03em;
  text-shadow:0 0 14px rgba(34,224,214,.6);min-height:1.2em;white-space:nowrap}
.scan-prompt{color:var(--green)}
.scan-cursor{display:inline-block;width:12px;height:1em;vertical-align:-2px;margin-left:4px;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:scanblink .7s steps(1) infinite}
@keyframes scanblink{50%{opacity:0}}
.scan-cap{display:block;margin-top:9px;font-size:11px;letter-spacing:.3em;color:var(--muted)}

/* 마우스 호버 가능한 기기에선 게이지 위 라벨을 숨기고 hover HUD로 대체 */
@media (hover: hover){ .gauge-label{display:none} }

/* ============================ 콕핏 프레임 ============================ */
#cockpit{position:absolute;inset:0;pointer-events:none;z-index:5}
.frame,.pillar{position:absolute;pointer-events:none}
/* 어두운 창틀(비네트) */
.frame-top{top:0;left:0;right:0;height:9vh;
  background:linear-gradient(#05070a,rgba(5,7,10,.4) 60%,transparent);}
.frame-left{top:0;bottom:0;left:0;width:6vw;
  background:linear-gradient(90deg,#05070a,transparent);}
.frame-right{top:0;bottom:0;right:0;width:6vw;
  background:linear-gradient(270deg,#05070a,transparent);}
/* A필러(경사진 기둥) */
.pillar{top:-4vh;height:70vh;width:11vw;background:
  linear-gradient(180deg,#181d23,#0c0f13);
  box-shadow:inset 0 0 30px rgba(0,0,0,.8);}
.pillar-left{left:-3vw;transform:skewX(9deg);border-right:2px solid #262c34}
.pillar-right{right:-3vw;transform:skewX(-9deg);border-left:2px solid #262c34}

/* ============================ 글레어실드 HUD ============================ */
#glareshield{position:absolute;top:2.5vh;left:0;right:0;z-index:6;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:0 8vw;pointer-events:none;font-family:var(--mono)}
.hud-tape{background:rgba(3,17,12,.55);border:1px solid rgba(57,255,136,.35);
  border-radius:6px;padding:6px 12px;backdrop-filter:blur(2px);
  box-shadow:0 0 18px rgba(57,255,136,.12), inset 0 0 12px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;min-width:96px}
.hud-label{font-size:10px;letter-spacing:.2em;color:var(--muted)}
.hud-val{font-size:26px;font-weight:700;color:var(--green);
  text-shadow:0 0 10px rgba(57,255,136,.6);font-variant-numeric:tabular-nums}
.hud-unit{font-size:10px;color:var(--muted)}
.hud-center{text-align:center;color:var(--cyan)}
.hud-hdg{font-size:20px;font-weight:700;text-shadow:0 0 10px rgba(34,224,214,.5)}
.hud-hdg .hud-label{margin-right:4px}
.hud-caption{margin-top:4px;font-size:10px;letter-spacing:.22em;color:var(--amber);
  text-shadow:0 0 8px rgba(255,176,32,.4)}

/* ============================ 메인 계기판 ============================ */
#panel{position:absolute;left:0;right:0;bottom:0;z-index:7;height:44vh;min-height:340px;
  background:
    radial-gradient(120% 90% at 50% 120%, #20262e 0%, var(--panel-1) 40%, var(--panel-2) 100%);
  border-top:2px solid #2b323a;
  box-shadow:0 -14px 40px rgba(0,0,0,.7), inset 0 3px 0 rgba(255,255,255,.04);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2vw;
  padding:26px 4vw 74px;pointer-events:auto;}
/* 패널 표면 텍스처(미세 노이즈 대체: 점선) */
#panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:4px 4px;}
#panel::after{content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;
  border:1px solid rgba(255,255,255,.03);border-radius:10px;pointer-events:none}

/* 나사 장식 */
.inst-cap{display:block;text-align:center;margin-top:8px;font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;color:var(--muted)}

/* --- PFD / 엔진 공통 베젤 --- */
.pfd,.engine{display:flex;flex-direction:column;align-items:center;z-index:2}
.pfd-bezel{width:150px;height:150px;border-radius:16px;
  background:linear-gradient(145deg,var(--bezel-hi),#0d1116);
  padding:10px;box-shadow:0 6px 14px rgba(0,0,0,.6),
    inset 0 2px 3px rgba(255,255,255,.08), inset 0 -3px 6px rgba(0,0,0,.7);}
.pfd-glass{width:100%;height:100%;border-radius:8px;overflow:hidden;position:relative;
  background:var(--glass);box-shadow:inset 0 0 24px rgba(0,0,0,.9)}

/* --- 자세계(ADI) --- */
.adi{position:absolute;inset:0;overflow:hidden}
.adi-horizon{position:absolute;inset:-40%;transition:transform .05s linear}
.adi-sky{position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(#2a7fd6,#4aa3ef)}
.adi-ground{position:absolute;bottom:0;left:0;right:0;height:50%;
  background:linear-gradient(#7a4a1e,#5c3312)}
.adi-line{position:absolute;top:50%;left:0;right:0;height:2px;background:#fff;transform:translateY(-1px)}
.adi-fixed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:6px;z-index:3}
.adi-wing{width:26px;height:4px;background:var(--amber);border-radius:2px;
  box-shadow:0 0 6px rgba(255,176,32,.6)}
.adi-dot{width:6px;height:6px;background:var(--amber);border-radius:50%}
.adi-bank{position:absolute;top:6px;left:50%;width:0;height:0;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:9px solid #fff;z-index:3}

/* --- 엔진 N1 : 어두운 야광처럼 은은히 빛나는 아크 ---
   ::before = 번지는 글로우(뒤), ::after = 선명한 발광 링(앞). 부모엔 filter 없음
   (부모에 filter를 주면 자식 pseudo까지 흐려지므로 레이어를 분리) */
.n1{display:flex;align-items:center;justify-content:center}
.n1-arc{position:absolute;inset:12px;border-radius:50%;
  --n1grad:conic-gradient(from -135deg,#35ff9a 0 55%,#ffc94d 55% 78%,#ff5b5b 78% 100%)}
.n1-arc::before,.n1-arc::after{content:"";position:absolute;inset:0;
  border-radius:50%;background:var(--n1grad)}
.n1-arc::before{ /* 바깥 글로우 */
  inset:-3px;
  -webkit-mask:radial-gradient(farthest-side,transparent 52%,#000 62%);
          mask:radial-gradient(farthest-side,transparent 52%,#000 62%);
  filter:blur(5px) saturate(1.6);opacity:.7;
  animation:n1glow 3.2s ease-in-out infinite}
.n1-arc::after{ /* 선명한 발광 링 */
  -webkit-mask:radial-gradient(farthest-side,transparent 61%,#000 65% 73%,transparent 79%);
          mask:radial-gradient(farthest-side,transparent 61%,#000 65% 73%,transparent 79%);
  filter:saturate(1.6) brightness(1.2)}
@keyframes n1glow{0%,100%{opacity:.55;filter:blur(5px) saturate(1.6)}
  50%{opacity:.9;filter:blur(7px) saturate(1.8)}}
.n1-fill{position:absolute;top:50%;left:50%;width:44%;height:3px;background:var(--cyan);
  transform-origin:left center;transform:rotate(var(--n1,-135deg));
  box-shadow:0 0 8px var(--cyan);border-radius:2px;z-index:2}
.n1-read{position:relative;text-align:center;font-family:var(--mono);color:var(--cyan);z-index:2}
.n1-read span{font-size:26px;font-weight:700;text-shadow:0 0 10px rgba(34,224,214,.5)}
.n1-read small{display:block;font-size:9px;color:var(--muted);letter-spacing:.15em}

/* ============================ 섹션 게이지 클러스터 ============================ */
.cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px;
  justify-items:center;align-content:center;z-index:2}
@media(min-width:1200px){.cluster{grid-template-columns:repeat(6,1fr)}}

.gauge{pointer-events:auto;cursor:pointer;background:none;border:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px;
  font-family:var(--mono);animation:gaugeIn .5s both;animation-delay:calc(var(--i)*.07s)}
@keyframes gaugeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gauge-label{font-size:11px;letter-spacing:.05em;color:var(--ink);font-family:var(--sans)}
.gauge-face{position:relative;width:84px;height:84px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 32%, #10151a, #04070a 70%),
    linear-gradient(145deg,var(--bezel-hi),#0b0e12);
  box-shadow:0 5px 12px rgba(0,0,0,.6),
    inset 0 2px 4px rgba(255,255,255,.1), inset 0 -4px 8px rgba(0,0,0,.8);
  border:2px solid #0a0d11;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s, box-shadow .18s;}
.gauge:hover .gauge-face{transform:translateY(-3px) scale(1.05);
  box-shadow:0 10px 22px rgba(0,0,0,.7),0 0 22px rgba(34,224,214,.35),
    inset 0 2px 4px rgba(255,255,255,.12);}
/* 유리 반사 */
.gauge-face::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 45%);pointer-events:none}
.gauge-ticks{position:absolute;inset:6px;border-radius:50%;
  background:repeating-conic-gradient(from -135deg,
    rgba(255,255,255,.35) 0 1.2deg, transparent 1.2deg 27deg);
  -webkit-mask:radial-gradient(farthest-side,transparent 66%,#000 68%);
          mask:radial-gradient(farthest-side,transparent 66%,#000 68%);opacity:.7}
.gauge-needle{position:absolute;top:50%;left:50%;width:30px;height:2.5px;
  background:linear-gradient(90deg,transparent,var(--cyan));border-radius:2px;
  transform-origin:left center;transition:transform .12s ease-out;
  box-shadow:0 0 6px var(--cyan);z-index:2}
.gauge-hub{position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(#3a4550,#0b0e12);z-index:3;
  box-shadow:0 0 0 2px #05070a}
.gauge-icon{position:absolute;bottom:12px;font-size:15px;z-index:2;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.45))}  /* 밝은 글로우로 어두운 아이콘도 잘 보이게 */
.gauge-cap{font-size:9px;letter-spacing:.2em;color:var(--muted)}
.gauge-led{width:7px;height:7px;border-radius:50%;background:#243;
  box-shadow:inset 0 0 3px #000;transition:.2s}
.gauge:hover .gauge-led,.gauge.active .gauge-led{background:var(--green);
  box-shadow:0 0 8px var(--green)}
.gauge.active .gauge-face{box-shadow:0 0 26px rgba(57,255,136,.5),
  inset 0 2px 4px rgba(255,255,255,.12)}

/* ============================ 페데스탈 ============================ */
#pedestal{position:absolute;bottom:0;left:0;right:0;z-index:8;height:62px;
  background:linear-gradient(#0a0d11,#05070a);border-top:1px solid #1c2127;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 22px;pointer-events:auto;font-family:var(--mono)}

/* 이륙/착륙 레버 (항상 자리에 있어 레이아웃이 밀리지 않음) */
.lever{background:none;border:0;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;
  font-family:var(--mono);transition:opacity .25s}
.lever.disabled{opacity:.32;cursor:not-allowed;pointer-events:none}
.lever-cap{font-size:8px;letter-spacing:.15em;transition:.2s}
.lever-cap.top{color:#3b5548}.lever-cap.bot{color:#5c4a2e}
.lever.up .lever-cap.top{color:var(--green);text-shadow:0 0 6px rgba(57,255,136,.5)}
.lever.down .lever-cap.bot{color:var(--amber);text-shadow:0 0 6px rgba(255,176,32,.5)}
.lever-track{position:relative;width:14px;height:34px;
  background:#05070a;border-radius:7px;box-shadow:inset 0 0 6px #000;border:1px solid #1c2127}
.lever-knob{position:absolute;left:50%;transform:translateX(-50%);
  width:30px;height:15px;border-radius:5px;
  background:linear-gradient(#3a4550,#12161b);
  box-shadow:0 2px 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);
  transition:top .5s cubic-bezier(.5,0,.2,1), box-shadow .2s}
.lever.up .lever-knob{top:1px}
.lever.down .lever-knob{top:18px}
.lever:not(.disabled):hover .lever-knob{box-shadow:0 0 12px rgba(34,224,214,.55),0 2px 5px rgba(0,0,0,.6)}

.pedestal-hint{flex:1;text-align:center;line-height:1.3;
  font-size:13px;letter-spacing:.05em;color:var(--muted)}
.pedestal-hint b{color:var(--cyan)}
.ped-btn{pointer-events:auto;cursor:pointer;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;color:var(--muted);background:#0d1116;border:1px solid #1c2127;
  border-radius:5px;padding:7px 12px;transition:.2s}
.ped-btn:hover{color:var(--ink);border-color:#2b323a}
.ped-btn.on{color:var(--green);border-color:rgba(57,255,136,.4);
  box-shadow:0 0 10px rgba(57,255,136,.25)}

/* ============================ MFD 섹션 화면 ============================ */
#mfd{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(2,5,8,.55);backdrop-filter:blur(3px);transition:opacity .3s;padding:4vh 4vw}
#mfd.mfd-hidden{opacity:0;pointer-events:none}
.mfd-screen{position:relative;width:min(860px,92vw);max-height:88vh;overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 0%, #06231a, var(--efis) 70%);
  border-radius:14px;padding:14px;
  border:10px solid #12161b;
  box-shadow:0 24px 60px rgba(0,0,0,.7),
    0 0 0 2px #2b323a, inset 0 0 60px rgba(0,0,0,.8),
    inset 0 0 40px rgba(34,224,214,.06);
  font-family:var(--mono)}
.mfd-boot .mfd-screen{animation:mfdBoot .6s ease-out}
@keyframes mfdBoot{
  0%{transform:scale(.9);filter:brightness(3) blur(3px);opacity:0}
  40%{opacity:1}
  100%{transform:scale(1);filter:none;opacity:1}}

.mfd-topbar{display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-bottom:1px solid rgba(34,224,214,.25);margin-bottom:10px}
.mfd-dot{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.3}}
.mfd-title{color:var(--cyan);font-size:13px;letter-spacing:.2em;
  text-shadow:0 0 8px rgba(34,224,214,.5)}
.mfd-sub{color:var(--muted);font-size:11px;letter-spacing:.15em;margin-right:auto}
.mfd-close{cursor:pointer;background:transparent;border:1px solid rgba(255,92,92,.5);
  color:#ff7a7a;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:5px 10px;border-radius:5px;transition:.2s}
.mfd-close:hover{background:rgba(255,92,92,.15)}

.mfd-body{overflow-y:auto;max-height:calc(88vh - 90px);padding:6px 12px 16px;
  color:#bfeede;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent}
.mfd-body::-webkit-scrollbar{width:8px}
.mfd-body::-webkit-scrollbar-thumb{background:rgba(34,224,214,.4);border-radius:4px}

/* 스캔라인 CRT 느낌 */
.mfd-scanline{position:absolute;inset:0;pointer-events:none;border-radius:8px;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.12) 2px 3px);
  mix-blend-mode:multiply}

/* ---- MFD 내부 컨텐츠 스타일 ---- */
.mfd-body h2{color:var(--cyan);font-size:18px;letter-spacing:.15em;margin:.2em 0 .6em;
  text-shadow:0 0 10px rgba(34,224,214,.4)}
.mfd-body .lead{color:var(--green);font-size:15px;margin:.2em 0 .8em}
.mfd-body p{line-height:1.65;color:#a9d8c9;font-family:var(--sans);font-size:14px}
.mfd-body b{color:#e6fff5}
.mfd-body .ok{color:var(--green)}
.mfd-body .hint{color:var(--muted);font-size:11px;margin-top:12px}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.kv>div{background:rgba(34,224,214,.05);border:1px solid rgba(34,224,214,.2);
  border-radius:6px;padding:10px 12px}
.kv span{display:block;font-size:10px;letter-spacing:.2em;color:var(--muted)}
.kv b{font-family:var(--sans);font-size:14px}
.kv small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.kv a{color:var(--cyan);text-decoration:none}
.kv a:hover{text-decoration:underline}

.bars{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.bar label{display:flex;justify-content:space-between;font-size:12px;color:#cfeee0;
  font-family:var(--sans);margin-bottom:5px}
.bar label span{color:var(--cyan)}
.bar-track{height:10px;background:rgba(0,0,0,.5);border:1px solid rgba(34,224,214,.25);
  border-radius:5px;overflow:hidden}
.bar-track i{display:block;height:100%;width:var(--w);
  background:linear-gradient(90deg,var(--green),var(--cyan));
  box-shadow:0 0 10px rgba(34,224,214,.5);border-radius:5px;
  animation:barFill 1s ease-out both}
@keyframes barFill{from{width:0}}

.proj-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.proj{padding:14px 16px;border-radius:8px;
  background:rgba(34,224,214,.05);border:1px solid rgba(34,224,214,.22);transition:.2s}
.proj:hover{background:rgba(34,224,214,.09);border-color:rgba(34,224,214,.4)}
.proj-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.proj-head b{font-family:var(--sans);font-size:15px;color:var(--cyan)}
.proj-period{font-family:var(--mono);font-size:10.5px;color:var(--amber);white-space:nowrap}
.proj-desc{margin:.5em 0 .6em;font-size:13px;line-height:1.55;color:#a9d8c9}
.proj-points{list-style:none;padding:0;margin:0 0 .7em;display:flex;flex-direction:column;gap:5px}
.proj-points li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.5;color:#9fc2bb}
.proj-points li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}
.proj-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.7em}
.proj-links{display:flex;flex-wrap:wrap;gap:16px}
.proj-link{font-family:var(--mono);font-size:11px;color:var(--green);
  text-decoration:none;letter-spacing:.03em}
.proj-link:hover{text-decoration:underline}

.timeline{list-style:none;padding:0;margin:6px 0 0}
.timeline li{display:flex;gap:16px;padding:14px 0;border-bottom:1px dashed rgba(34,224,224,.15)}
.timeline time{color:var(--amber);font-size:12px;min-width:120px;padding-top:2px;flex-shrink:0}
.timeline b{font-family:var(--sans);font-size:14.5px;color:#e6fff5}
.job-role{margin-left:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--cyan)}
.job-product{margin:.4em 0 .6em;font-size:12.5px;color:#9fc2bb}
.job-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.job-points li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.5;color:#a9d8c9;display:block}
.job-points li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}
.job-points a{color:var(--cyan);text-decoration:none}
.job-points a:hover{text-decoration:underline}
.job-skills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:11px}
.job-skills-cap{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--muted);margin-right:2px}
.chip{font-family:var(--mono);font-size:10.5px;color:var(--cyan);white-space:nowrap;
  background:rgba(34,224,214,.08);border:1px solid rgba(34,224,214,.28);border-radius:20px;padding:3px 9px}

.cert-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.cert{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;
  background:rgba(255,176,32,.06);border:1px solid rgba(255,176,32,.25);
  transition:transform .18s, background .18s, border-color .18s}
a.cert{text-decoration:none;color:inherit;cursor:pointer}
a.cert:hover{background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.55);transform:translateX(3px)}
.cert-seal{color:var(--amber);font-size:22px;text-shadow:0 0 10px rgba(255,176,32,.5)}
.cert-badge{width:38px;height:38px;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
  position:relative;z-index:2}  /* 스캔라인(줄무늬) 위로 올려 이미지가 깨끗하게 보이도록 */
.cert b{font-family:var(--sans);font-size:14px;color:#ffe9c2}
.cert p{margin:.25em 0 0;font-size:12px;color:var(--muted)}
.cert-go{margin-left:auto;color:var(--amber);font-size:14px;opacity:.6;transition:opacity .18s}
a.cert:hover .cert-go{opacity:1}

.comm{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.comm-row{display:flex;justify-content:space-between;align-items:center;
  text-decoration:none;padding:14px 16px;border-radius:8px;
  background:rgba(34,224,214,.05);border:1px solid rgba(34,224,214,.22);transition:.2s}
.comm-row:hover{background:rgba(34,224,214,.12);transform:translateX(4px)}
.comm-row.copied{background:rgba(57,255,136,.14);border-color:rgba(57,255,136,.5)}
.comm-row.copied b{color:var(--green)}
.license{margin-top:18px;padding-top:12px;border-top:1px dashed rgba(34,224,214,.15);
  font-size:10px;line-height:1.55;color:var(--muted);opacity:.85}
.comm-row > span{font-size:11px;letter-spacing:.2em;color:var(--muted)}
.comm-row b{color:var(--cyan);font-family:var(--sans);font-size:14px}
.lk-short{display:none}  /* 기본은 전체 URL, 모바일에서만 짧게 */

/* ============================ 부팅 인트로 ============================ */
#boot{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, rgba(5,7,10,.7), rgba(3,5,8,.95));
  transition:opacity .8s, transform .8s}
#boot.boot-gone{opacity:0;transform:scale(1.06);pointer-events:none}
.boot-inner{width:min(460px,88vw);font-family:var(--mono);text-align:center}
.boot-logo{color:var(--cyan);font-size:22px;letter-spacing:.25em;margin-bottom:24px;
  text-shadow:0 0 16px rgba(34,224,214,.5)}
.boot-lines{text-align:left;background:rgba(3,17,12,.6);border:1px solid rgba(57,255,136,.25);
  border-radius:8px;padding:16px 18px;min-height:180px;box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.boot-line{display:flex;justify-content:space-between;font-size:13px;color:var(--ink);
  padding:5px 0;animation:bootLine .3s both}
/* 상태 기본값: READY(노랑 야광) → 완료 시 OK(초록) */
.boot-line em{color:var(--amber);font-style:normal;text-shadow:0 0 8px rgba(255,176,32,.55);
  transition:color .2s, text-shadow .2s}
.boot-line.done em{color:var(--green);text-shadow:0 0 8px rgba(57,255,136,.55)}
@keyframes bootLine{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.boot-note{margin:22px 0 0;font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;
  color:var(--muted)}
.boot-start{margin-top:14px;cursor:pointer;font-family:var(--mono);font-size:15px;
  letter-spacing:.2em;color:#04120b;font-weight:700;
  background:linear-gradient(var(--green),#22c96a);border:0;border-radius:8px;
  padding:14px 30px;box-shadow:0 0 26px rgba(57,255,136,.5);transition:.2s}
.boot-start:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(57,255,136,.7)}

/* ============================ 404 ============================ */
#notfound{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:5vh 6vw;text-align:center}
.nf-card{max-width:520px;font-family:var(--sans);
  background:rgba(6,18,16,.82);backdrop-filter:blur(4px);
  border:1px solid rgba(34,224,214,.4);border-radius:14px;padding:34px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(34,224,214,.15)}
.nf-mark{font-size:30px;color:var(--cyan);text-shadow:0 0 18px rgba(34,224,214,.5)}
.nf-code{font-family:var(--mono);font-size:60px;font-weight:700;color:var(--cyan);letter-spacing:.08em;
  line-height:1;margin-top:6px;text-shadow:0 0 22px rgba(34,224,214,.5)}
.nf-title{font-size:19px;font-weight:700;color:#eafff9;margin:16px 0 8px;word-break:keep-all}
.nf-sub{font-size:13px;color:#a9c6c0;line-height:1.65;margin:0;word-break:keep-all}
.nf-en{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.br-m{display:none}  /* 모바일에서만 줄바꿈 */
#notfound .boot-start{margin-top:26px;display:inline-block;text-decoration:none}

/* ============================ 종료 화면 ============================ */
/* 착륙 완료 시: 창(3D+콕핏)이 축소되며 종료 화면이 확대되어 등장 */
#sky,#cockpit{transition:transform .9s cubic-bezier(.6,.02,.2,1), opacity .9s, filter .9s}
#app.landing-done #sky,
#app.landing-done #cockpit{transform:scale(.8);opacity:.22;filter:blur(2px);pointer-events:none}

#outro{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, rgba(6,10,16,.72), rgba(3,5,9,.96));
  opacity:0;pointer-events:none;transition:opacity .7s}
#outro.show{opacity:1;pointer-events:auto}
.outro-inner{text-align:center;font-family:var(--mono);transform:scale(.55);opacity:0;
  transition:transform .9s cubic-bezier(.2,.85,.25,1) .18s, opacity .8s .18s}
#outro.show .outro-inner{transform:scale(1);opacity:1}
.outro-mark{font-size:42px;color:var(--cyan);text-shadow:0 0 22px rgba(34,224,214,.6);margin-bottom:14px}
.outro-title{font-size:34px;letter-spacing:.14em;color:#eafff9;font-family:var(--sans);font-weight:700;
  text-shadow:0 0 18px rgba(34,224,214,.4)}
.outro-sub{margin-top:10px;font-size:15px;letter-spacing:.06em;color:var(--muted);font-family:var(--sans)}
#outro .boot-start{margin-top:30px}

/* ============================ 튜토리얼 ============================ */
#tutorial{position:absolute;top:28vh;left:50%;transform:translate(-50%,10px);z-index:32;
  pointer-events:none;opacity:0;transition:opacity .3s, transform .3s}
#tutorial.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tut-card{width:min(370px,86vw);padding:20px 22px;font-family:var(--sans);
  background:rgba(6,18,16,.9);backdrop-filter:blur(4px);
  border:1px solid rgba(34,224,214,.45);border-radius:10px;
  box-shadow:0 14px 44px rgba(0,0,0,.6), 0 0 26px rgba(34,224,214,.18)}
.tut-step{font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--cyan)}
.tut-title{margin:8px 0 6px;font-size:17px;color:#eafff9}
.tut-text{margin:0;font-size:13.5px;line-height:1.6;color:#a9c6c0}
.tut-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.tut-skip{background:transparent;border:1px solid #2b323a;color:var(--muted);
  font-family:var(--mono);font-size:11px;padding:7px 13px;border-radius:6px;cursor:pointer;transition:.2s}
.tut-skip:hover{color:var(--ink);border-color:#3a4550}
.tut-next{background:linear-gradient(var(--cyan),#12b3ab);border:0;color:#04120f;font-weight:700;
  font-family:var(--mono);font-size:11px;padding:7px 15px;border-radius:6px;cursor:pointer;
  box-shadow:0 0 14px rgba(34,224,214,.4);transition:.2s}
.tut-next:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(34,224,214,.6)}

/* 튜토리얼 중: 배경(하늘)을 dim 스크림으로 덮어 가림 */
#app.tut-active::after{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;
  background:rgba(2,6,10,.68)}
/* 계기·레버·버튼은 pointer-events:auto가 명시돼 있어 개별로 잠가야 호버/클릭이 막힘 */
#app.tut-active .gauge,
#app.tut-active #flight-lever,
#app.tut-active #lang-toggle,
#app.tut-active .pedestal-hint{pointer-events:none}
.tut-dim{opacity:.16 !important;transition:opacity .3s}
.tut-hl{animation:tutPulse 1.25s ease-in-out infinite}
@keyframes tutPulse{0%,100%{filter:drop-shadow(0 0 5px rgba(34,224,214,.55))}
  50%{filter:drop-shadow(0 0 16px rgba(34,224,214,.95))}}

/* ============================ 반응형 ============================ */
@media(max-width:760px){
  #glareshield{padding:0 3vw}
  .hud-val{font-size:20px}
  #panel{grid-template-columns:1fr;height:auto;max-height:58vh;padding:16px 3vw 58px;gap:10px}
  .pfd,.engine{display:none}         /* 모바일은 섹션 게이지 위주 */
  .cluster{grid-template-columns:repeat(3,1fr);gap:12px}
  .gauge-face{width:72px;height:72px}
  #pedestal{gap:10px;padding:0 5vw}  /* 좌우 여백 */
  .pedestal-hint{display:none}       /* 모바일에선 힌트 문구 숨김 */
  /* MFD 상단바: 긴 "MFD · ..." 제목 숨기고 짧은 캡션만 → 좁은 폭에서 안 깨지게 */
  .mfd-title{display:none}
  .mfd-sub{font-size:12px}
  .mfd-screen{padding:12px}
  .mfd-body{padding:6px 10px 14px;scrollbar-width:none}  /* 스크롤은 되고 바만 숨김 */
  .mfd-body::-webkit-scrollbar{display:none}
  .br-m{display:inline}              /* 404 문구를 두 줄로 */
  /* 경력: 시간(위) / 내용(아래) 세로 스택 → 본문이 전체 폭 사용 */
  .timeline li{flex-direction:column;gap:5px}
  .timeline time{min-width:0;font-size:11.5px}
  /* 회사명 아래로 직책 줄바꿈 (옆이 아니라 다음 줄) */
  .job-role{display:block;margin-left:0;margin-top:3px}
  /* LinkedIn: 모바일에선 'haramsong'만 표시 */
  .lk-full{display:none}
  .lk-short{display:inline}
}