/* ATDT북마리 공통 스타일 — index.html, apps.html이 함께 쓴다 */
@font-face{
  font-family:'NeoDunggeunmo';
  src:url('/assets/fonts/NeoDunggeunmoPro-Regular.woff2') format('woff2'),
      url('/assets/fonts/NeoDunggeunmoPro-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}

/* ── 토큰 ── 노을→밤 하늘 + 그 시절 프로그램 회색 창 */
:root{
  --night:#0d0b2a;
  --dusk:#2a1b55;
  --sunset:#e0724a;
  --glow:#ffcf6b;
  --silver:#C0C0C0;
  --silver-lt:#DFDFDF;
  --gray:#808080;
  --navy:#000080;
  --blue:#0000AA;
  --ink:#000;
  --paper:#FFF;
  --term-bg:#000;
  --term-fg:#33ff66;
  --term-dim:#B4B4B4;
  --amber:#FFFF55;
  --focus:#FFFF00;

  --bezel: inset -2px -2px 0 #000, inset 2px 2px 0 #FFF,
           inset -3px -3px 0 var(--gray), inset 3px 3px 0 var(--silver-lt);
  --bezel-in: inset 2px 2px 0 #000, inset -2px -2px 0 #FFF,
              inset 3px 3px 0 var(--gray), inset -3px -3px 0 var(--silver-lt);
  --drop: 6px 6px 0 rgba(0,0,0,.4);

  --pixel:'NeoDunggeunmo','굴림체',monospace;
  --sans:system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;

  --space-1:8px; --space-2:14px; --space-3:22px; --space-4:32px; --space-5:48px;
  --statusbar:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;min-height:100vh;min-height:100dvh;
  background:linear-gradient(to bottom,var(--night) 0%,var(--dusk) 62%,#6b2f5a 84%,var(--sunset) 100%) fixed;
  color:var(--ink);
  font-family:var(--sans);
  padding:var(--space-3) 16px calc(var(--statusbar) + var(--space-3) + env(safe-area-inset-bottom));
}
/* 픽셀 글꼴은 제목·버튼·장식에만. 긴 본문은 일반 글꼴 */
h1,h2,h3,.pixel,.btn,.win__bar,.statusbar{ font-family:var(--pixel); font-weight:400; -webkit-font-smoothing:none }
a{ color:inherit }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
[hidden]{ display:none !important }

/* ── 창 ── */
.win{
  width:min(100%,960px);margin:0 auto;
  background:var(--silver);padding:3px;
  box-shadow:var(--bezel),var(--drop);
}
.win__bar{
  display:flex;align-items:center;gap:var(--space-1);
  background:var(--navy);color:#FFF;padding:5px 6px;font-size:14px;
}
.win__title{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.win__close{
  width:22px;height:20px;flex:none;display:grid;place-items:center;
  background:var(--silver);color:#000;text-decoration:none;font-size:13px;line-height:1;
  box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #FFF;
}
.win__body{ padding:clamp(16px,4vw,32px) }

/* ── 버튼 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;
  font-size:16px;text-decoration:none;
  color:#000;background:var(--silver);border:0;cursor:pointer;
  box-shadow:var(--bezel);
}
.btn:hover{ background:var(--silver-lt) }
.btn:active{ box-shadow:var(--bezel-in); transform:translate(1px,1px) }
.btn--primary{ color:#FFF;background:var(--blue);
  box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #4444FF,inset -3px -3px 0 #000055 }
.btn--primary:hover{ background:#0000DD }

/* ── 상태줄 — 모든 화면 공통. 어디서든 연락 한 번 ── */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:stretch;gap:3px;
  min-height:calc(var(--statusbar) + env(safe-area-inset-bottom));
  padding:3px 3px calc(3px + env(safe-area-inset-bottom));
  background:var(--silver);font-size:14px;
  box-shadow:inset 0 2px 0 #FFF;
}
.statusbar > *{
  display:flex;align-items:center;padding:0 12px;white-space:nowrap;text-decoration:none;color:#000;
  box-shadow:inset 1px 1px 0 var(--gray),inset -1px -1px 0 #FFF;
}
.statusbar__brand{ flex:1;min-width:0;overflow:hidden }
.statusbar a:hover{ background:var(--silver-lt) }
.statusbar__contact{ font-weight:400;background:#FFFFAA }

/* 휴대폰: 창은 화면 가득 (겹치는 창은 PC에서만) */
@media (max-width:760px){
  body{ padding-left:0;padding-right:0;padding-top:0 }
  .win{ box-shadow:none }
}

/* ── 메인 화면 전용: 프로필 픽셀아트 장면 + PC통신 파란 화면 ── */
:root{
  --pc-blue:#000080;
  --pc-white:#FFFFFF;
  --pc-gray:#AAAAAA;
  --pc-cyan:#55FFFF;
  --pc-cyan-dk:#00AAAA;
  --pc-yellow:#FFFF55;
  /* 장면 크기·위치는 변수로 — 탑차 화물칸 위에 겹치는 요소(.home-menu)도 같은 값으로 자리를 잡는다 */
  --VW:100vw; --VH:100vh;
  --S:max(var(--VW),var(--VH));
  --artL:clamp(calc(var(--VW) - var(--S)), calc(var(--VW) / 2 - var(--S) * .5), 0px);
  --artT:clamp(calc(var(--VH) - var(--S)), calc(var(--VH) - var(--S) * .9), 0px);
}
.scene{ position:fixed;inset:0;overflow:hidden;z-index:0;background:#14125a }
.scene__art{ position:absolute;width:var(--S);height:var(--S);left:var(--artL);top:var(--artT) }
.scene__art img{ position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
}