/* sosig.site 데스크톱 UI — Windows 95 디자인 시스템
   공통 색·글꼴은 tokens.css의 --retro-*, 창 전용 토큰은 이 파일에서 관리.
   2026-08-15 신설 — 리뉴얼 1단계(미리보기 /desktop). */

:root{
  /* 면 */
  --w-face:var(--retro-face);      /* 창·버튼 기본면 */
  --w-face2:var(--retro-face2);     /* 밝은 면(메뉴) */
  --w-field:var(--retro-field);     /* 입력·목록 면 */
  --w-desk:var(--retro-ink);      /* 데스크톱 바탕 */
  /* 베벨 */
  --w-hi:var(--retro-field); --w-sh:var(--retro-shadow); --w-dk:var(--retro-ink);
  /* 강조 */
  --w-tbar1:var(--retro-accent); --w-tbar2:var(--retro-accent2);
  --w-tbar-off1:#808080; --w-tbar-off2:#b5b5b5;
  --w-sel:var(--retro-accent); --w-sel-text:var(--retro-field);
  /* 글자 */
  --w-text:#000000; --w-text2:#404040; --w-text-dim:#808080; --w-icon-text:#ffffff;
  /* 의미색 */
  --w-good:#008000; --w-warn:#808000; --w-bad:#800000;
  /* 타이포 */
  --w-font:var(--retro-font);
  --w-mono:Consolas,"Courier New",monospace;
  --w-fs:12px; --w-fs-sm:11px; --w-fs-lg:14px;
  /* 간격 */
  --w-gap:6px; --w-pad:8px; --w-taskbar-h:40px;
}

/* ── 베벨 유틸 ─────────────────────────────────────────────── */
.w-out{border:2px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);}
.w-in {border:2px solid; border-color:var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh);}
.w-out-thin{border:1px solid; border-color:var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi);}
.w-in-thin {border:1px solid; border-color:var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh);}

/* ── 데스크톱 ──────────────────────────────────────────────── */
body.w-desktop{
  margin:0; background:var(--w-desk); color:var(--w-text);
  font-family:var(--w-font); font-size:var(--w-fs);
  height:100vh; overflow:hidden; user-select:none;
}
#w-field{position:absolute; inset:0 0 var(--w-taskbar-h) 0; padding:10px;}
.w-icons{display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; gap:2px; height:100%;}
.w-icon{
  width:96px; padding:6px 3px; text-align:center; cursor:pointer;
  border:1px dotted transparent; color:var(--w-icon-text);
  text-shadow:1px 1px 1px rgba(0,0,0,.65); background:none; font:inherit;
}
.w-icon .g{font-size:1.9rem; line-height:1.15;}
.w-icon .n{display:block; margin-top:2px; font-size:var(--w-fs-sm); word-break:keep-all;}
.w-icon.sel{background:rgba(0,0,128,.55); border-color:var(--w-hi);}
.w-icon:focus-visible{outline:1px dotted var(--w-hi); outline-offset:-3px;}

/* ── 창 ────────────────────────────────────────────────────── */
.w-win{
  position:absolute; display:flex; flex-direction:column; background:var(--w-face);
  padding:2px; min-width:280px; min-height:160px; box-shadow:1px 1px 0 var(--w-sh);
}
.w-win[hidden]{display:none;}
.w-titlebar{
  display:flex; align-items:center; gap:5px; padding:3px 3px 3px 5px; cursor:grab;
  background:linear-gradient(90deg,var(--w-tbar1),var(--w-tbar2)); color:var(--w-sel-text); font-weight:700;
}
.w-titlebar:active{cursor:grabbing;}
.w-win.blur .w-titlebar{background:linear-gradient(90deg,var(--w-tbar-off1),var(--w-tbar-off2));}
.w-titlebar .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.w-ctrls{margin-left:auto; display:flex; gap:2px;}
.w-ctrls button{
  width:18px; height:16px; padding:0; background:var(--w-face); color:var(--w-text);
  font:700 10px/13px var(--w-font); cursor:pointer;
  border:1px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
}
.w-ctrls button:active{border-color:var(--w-dk) var(--w-hi) var(--w-hi) var(--w-dk);}
.w-ctrls button:focus-visible{outline:1px dotted var(--w-dk); outline-offset:-3px;}
.w-menubar{display:flex; gap:2px; padding:2px 3px;}
.w-menubar span{padding:1px 7px; cursor:default;}
.w-menubar span:hover{background:var(--w-sel); color:var(--w-sel-text);}
/* 창 안 문서 영역은 사이트 팔레트(tokens.css)를 따른다 — 95 크롬이 다크 문서를 감싸는 구성.
   전체를 밝은 95 톤으로 뒤집는 작업은 페이지 CSS의 하드코딩 색 정리 후 단계적으로. */
.w-body{
  flex:1; overflow:auto; background:var(--c-bg,#0d1117); color:var(--c-text,#e6edf3); margin:2px;
  border:2px solid; border-color:var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh);
}
.w-body .w-pad{padding:10px 12px;}
.w-statusbar{display:flex; gap:3px; padding:3px;}
.w-statusbar div{
  flex:1; padding:2px 6px; border:1px solid; border-color:var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh);
}
.w-statusbar div:last-child{flex:0 0 auto; font-family:var(--w-mono);}
.w-resize{position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 45%,var(--w-sh) 45%,var(--w-sh) 55%,transparent 55%);}
.w-loading{padding:14px; color:var(--c-muted,#8b949e);}

/* ── 작업표시줄 · 시작 메뉴 ─────────────────────────────────── */
.w-taskbar{
  position:absolute; left:0; right:0; bottom:0; height:var(--w-taskbar-h); z-index:100000;
  display:flex; align-items:center; gap:4px; padding:3px 5px;
  background:var(--w-face); border-top:2px solid var(--w-hi);
}
.w-start{
  display:flex; align-items:center; gap:5px; font:700 var(--w-fs)/1.4 var(--w-font);
  padding:3px 9px 3px 6px; cursor:pointer; background:var(--w-face); color:var(--w-text);
  border:2px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
}
.w-start[aria-expanded="true"]{border-color:var(--w-dk) var(--w-hi) var(--w-hi) var(--w-dk);}
.w-tasks{display:flex; gap:3px; flex:1; overflow:hidden;}
.w-task{
  padding:3px 9px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; background:var(--w-face); color:var(--w-text); font:var(--w-fs)/1.4 var(--w-font);
  border:2px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
}
.w-task.on{border-color:var(--w-dk) var(--w-hi) var(--w-hi) var(--w-dk); font-weight:700;}
.w-tray{
  margin-left:auto; padding:3px 9px; font-family:var(--w-mono); font-variant-numeric:tabular-nums;
  border:1px solid; border-color:var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh);
}
.w-menu{
  position:absolute; bottom:calc(var(--w-taskbar-h) + 2px); left:5px; width:250px; z-index:100001;
  /* overflow:auto 이면 옆으로 펼쳐지는 하위 메뉴가 잘린다 → visible 유지 (2026-08-15) */
  overflow:visible; padding:3px; background:var(--w-face);
  border:2px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
}
.w-menu[hidden]{display:none;}
.w-menu .grp{padding:7px 8px 3px; font-size:var(--w-fs-sm); color:var(--w-text-dim); font-weight:700;}
.w-menu .grp+.grp{border-top:1px solid var(--w-sh); margin-top:3px;}
.w-menu button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer;
  padding:5px 8px; background:none; border:0; color:var(--w-text); font:var(--w-fs)/1.4 var(--w-font);
}
.w-menu button:hover,.w-menu button:focus-visible{background:var(--w-sel); color:var(--w-sel-text); outline:none;}

/* ── 창 안에 들어가는 기존 페이지(bare 모드) 기본 정리 ───────── */
.w-body .bare-content{padding:10px 12px;}
.w-body a{color:var(--c-accent,#58a6ff);}
.w-body table{border-collapse:collapse; width:100%;}
.w-body th,.w-body td{border:1px solid var(--c-border,#30363d); padding:3px 6px; text-align:left;}
.w-body th{background:var(--c-bg2,#161b22);}

/* ── 모바일: 창 은유 해제(전체화면 단일 창) ─────────────────── */
@media (max-width:860px){
  .w-win{left:0!important; top:0!important; width:100%!important;
    height:calc(100% - 0px)!important; padding:0; box-shadow:none;}
  .w-resize{display:none;}
  /* 폰에서는 세로 한 줄로 쌓이지 않게 격자 배치(런처처럼) */
  .w-icons{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
    align-content:flex-start; gap:8px 4px; height:auto;}
  .w-icon{width:auto;}
  .w-folder-item{width:calc(33.333% - 4px);}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important;}}
/* The forced desktop view remains usable on touch screens. */
@media (max-width:860px), (pointer:coarse){
  .w-ctrls button{width:32px;height:32px;font-size:14px;line-height:1;}
  .w-toolbar .tb,.w-menu button{min-height:44px;box-sizing:border-box;}
}

/* ── 폴더 창 (아이콘 그리드) ────────────────────────────────── */
.w-folder-body{background:var(--w-field); padding:10px; display:flex; flex-wrap:wrap;
  align-content:flex-start; gap:6px; height:100%; overflow:auto;}
.w-folder-item{
  width:104px; padding:8px 4px; text-align:center; cursor:pointer; background:none;
  border:1px dotted transparent; color:var(--w-text); font:inherit;
}
.w-folder-item .g{font-size:2rem; line-height:1.15; display:block;}
.w-folder-item .n{display:block; margin-top:3px; font-size:var(--w-fs-sm); word-break:keep-all;}
.w-folder-item:hover{background:#e8e8e8;}
.w-folder-item.sel,.w-folder-item:focus-visible{background:var(--w-sel); color:var(--w-sel-text); border-color:var(--w-hi); outline:none;}

/* 바로가기 아이콘: 95 처럼 좌하단에 화살표 배지 */
.w-shortcut .g{position:relative; display:inline-block;}
.w-shortcut .g::after{
  content:"\2197"; position:absolute; left:-2px; bottom:-2px;
  width:14px; height:14px; line-height:13px; font-size:10px; text-align:center;
  background:var(--w-face); color:var(--w-text); text-shadow:none;
  border:1px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
}

/* ── 시작 메뉴: 95 식 계층(캐스케이드) ──────────────────────── */
.w-menu-row{position:relative;}
.w-menu .w-menu-head,.w-menu .w-menu-plain,.w-submenu button{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; cursor:pointer;
  padding:5px 8px; background:none; border:0; color:var(--w-text); font:var(--w-fs)/1.5 var(--w-font);
}
.w-menu .w-menu-head .l,.w-menu .w-menu-plain .l,.w-submenu button .l{flex:1;}
.w-menu-head .arw{font-size:9px; opacity:.8;}
.w-menu-row.open>.w-menu-head,
.w-menu .w-menu-head:hover,.w-menu .w-menu-plain:hover,
.w-submenu button:hover,.w-submenu button:focus-visible,
.w-menu .w-menu-head:focus-visible,.w-menu .w-menu-plain:focus-visible{
  background:var(--w-sel); color:var(--w-sel-text); outline:none;
}
.w-menu-sep{height:2px; margin:4px 3px; border-top:1px solid var(--w-sh); border-bottom:1px solid var(--w-hi);}
.w-submenu{
  display:none; position:absolute; left:100%; top:-3px; min-width:212px; padding:3px; z-index:100002;
  background:var(--w-face); border:2px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
}
.w-menu-row.open>.w-submenu{display:block;}
@media (max-width:860px){
  .w-menu{max-height:72vh; overflow:auto;}
  /* 폰에서는 옆으로 펼칠 자리가 없다 → 아래로 들여쓰기 펼침 */
  .w-submenu{position:static; display:none; min-width:0; border-width:1px; box-shadow:none; margin:2px 0 2px 14px;}
  .w-menu-row.open>.w-submenu{display:block;}
}

/* 비활성 창 클릭 활성화 — iframe 은 클릭이 부모로 안 올라오므로 투명 방패를 덮는다.
   윈도우와 같은 동작: 첫 클릭은 창을 활성화만 하고, 그다음 클릭부터 내용과 상호작용. */
.w-body{position:relative;}
.w-shield{position:absolute; inset:0; z-index:5; display:none; background:transparent; cursor:pointer;}
.w-win.blur .w-shield{display:block;}

/* ── 창 탐색 도구모음 (95 탐색기 느낌) ─────────────────────── */
.w-toolbar{display:flex; gap:3px; padding:3px 4px; align-items:center;
  border-bottom:1px solid var(--w-sh); box-shadow:inset 0 -1px 0 var(--w-hi);}
.w-toolbar .tb{
  font:var(--w-fs)/1.4 var(--w-font); padding:2px 8px; cursor:pointer;
  background:var(--w-face); color:var(--w-text);
  border:2px solid; border-color:var(--w-hi) var(--w-dk) var(--w-dk) var(--w-hi);
}
.w-toolbar .tb:active:not(:disabled){border-color:var(--w-dk) var(--w-hi) var(--w-hi) var(--w-dk);}
.w-toolbar .tb:disabled{color:var(--w-text-dim); text-shadow:1px 1px 0 var(--w-hi); cursor:default;}
.w-toolbar .tb:focus-visible{outline:1px dotted var(--w-dk); outline-offset:-4px;}