/* THE ORIGIN 사이트 — 컴포넌트 (tokens.css 다음에 불러온다)
   시안 C에서 쓴 모양을 그대로 옮겨 부품으로 정리 (2026-11-12) */

/* 바탕 */
.ds-body{margin:0;background:var(--c-bg);color:var(--c-ink);font:var(--size-body)/var(--lh-body) var(--font-body);
  background-image:radial-gradient(rgba(20,20,30,.10) 1px,transparent 1px);background-size:6px 6px}

/* 창 */
.win{background:var(--c-panel);border:2px solid var(--c-line);box-shadow:6px 6px 0 var(--c-line)}
.win-tb{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--c-acc);color:var(--c-acc-ink);border-bottom:2px solid var(--c-line);font:var(--size-caption)/1.4 var(--font-title)}
.win-tb .t{flex:1;min-width:0}
.win-x{width:18px;height:18px;flex:none;border:2px solid currentColor;display:grid;place-items:center;font:var(--size-caption)/1 var(--font-title);cursor:pointer}
.win--dark .win-tb{background:var(--c-ink);color:var(--c-panel)}
.win--warn .win-tb{background:var(--c-warn);color:#fff}
.win-menu{display:flex;flex-wrap:wrap;gap:16px;padding:6px 12px;font:var(--size-caption)/1.4 var(--font-title);border-bottom:2px solid var(--c-line);color:var(--c-sub)}
.win-pane{padding:16px 18px}
.win-status{display:flex;flex-wrap:wrap;border-top:2px solid var(--c-line);font:var(--size-caption)/1.4 var(--font-title)}
.win-status>div{padding:6px 10px;flex:1;border-right:2px solid var(--c-line)}
.win-status>div:last-child{border-right:0}

/* 버튼 — 누르면 그림자만큼 들어간다 */
.btn{display:inline-block;font:var(--size-caption)/1 var(--font-title);padding:8px 12px;border:2px solid var(--c-line);box-shadow:3px 3px 0 var(--c-line);background:var(--c-panel);color:var(--c-ink);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--c-soft)}
.btn:active,.btn.is-pressed{box-shadow:0 0 0 var(--c-line);transform:translate(3px,3px)}
.btn--primary{background:var(--c-acc);color:var(--c-acc-ink)}
.btn--primary:hover{background:var(--c-acc);filter:brightness(1.08)}

/* 태그 */
.tag{display:inline-block;font:var(--size-caption)/1 var(--font-title);padding:5px 8px;border:2px solid var(--c-line);background:var(--c-panel)}
.tag--soft{background:var(--c-soft)}

/* 링크 */
.link{color:var(--c-acc);text-decoration:underline;text-underline-offset:3px}

/* 표 */
.tbl{border-collapse:collapse;width:100%}
.tbl th,.tbl td{border:2px solid var(--c-line);padding:6px 9px;text-align:left;vertical-align:top}
.tbl th{background:var(--c-th);font:var(--size-caption)/1.4 var(--font-title)}

/* 등급 배지 */
.grade{display:inline-flex;align-items:center;gap:7px;font:var(--size-caption)/1 var(--font-title);padding:5px 8px;border:2px solid var(--c-line);background:var(--c-panel)}
.grade i{width:12px;height:12px;border:2px solid var(--c-line)}

/* 바탕화면 아이콘 — 박스 없는 도트 그림, 고르면 이름에 파란 띠 (11/12 대표 "아이콘만 다시 다듬으삼") */
.icon{display:inline-flex;flex-direction:column;align-items:center;gap:6px;font:var(--size-caption)/1.3 var(--font-title);text-decoration:none;color:var(--c-ink)}
.icon img{width:64px;height:64px;image-rendering:pixelated;display:block}   /* icons/*.svg — 16×16 도트, ×4 */
.icon span{padding:2px 4px}
.icon:hover span,.icon.is-selected span{background:var(--c-acc);color:var(--c-acc-ink);outline:1px dotted #fff;outline-offset:-3px}

/* 흐르는 공지 */
.notice{overflow:hidden;white-space:nowrap;font:var(--size-caption)/1.4 var(--font-title);padding:7px 0;border:2px solid var(--c-line);background:var(--c-ink);color:var(--c-panel)}
.notice span{display:inline-block;padding-left:100%;animation:ds-notice 22s linear infinite}
@keyframes ds-notice{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.notice span{animation:none;padding-left:8px}}

/* 작업 표시줄 */
.taskbar{display:flex;gap:8px;align-items:center;padding:6px 8px;background:var(--c-panel);border-top:2px solid var(--c-line);font:var(--size-caption)/1 var(--font-title)}
.taskbar--fixed{position:fixed;left:0;right:0;bottom:0;z-index:5}
.taskbar .b{padding:7px 12px;border:2px solid var(--c-line);box-shadow:2px 2px 0 var(--c-line);background:var(--c-panel)}
.taskbar .b.on{background:var(--c-acc);color:var(--c-acc-ink)}
.taskbar .clock{margin-left:auto}