/* 유튜브 작업실 공용 테마 — 모든 페이지 </head> 바로 앞에서 불러옴 (각 페이지의 색 변수·글꼴을 덮어씀)
   눈이 편한 따뜻한 종이색 바탕 + 차분한 청록 포인트 + Pretendard 글꼴. 색은 아래 변수만 바꾸면 사이트 전체가 바뀜 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root,
:root:not([data-theme=light]){
  color-scheme:light;
  --bg:#f4f2ec;          /* 바탕: 따뜻한 미색 */
  --surface:#fffdf9;     /* 카드 */
  --fg:#2a2926;          /* 글자 */
  --muted:#75716a;       /* 보조 글자 */
  --line:#e4dfd4;        /* 테두리 */
  --accent:#2e6f63;      /* 포인트: 차분한 청록 */
  --accent-soft:#e2eeea;
  --tag:#efebe2;
  --ok:#2f7a4a; --ok-soft:#e3f1e6;
  --warn:#8a6214; --warn-soft:#fbf2dc;
  --var:#3d5ba6; --var-soft:#e8edf8;
  --hot:#fbefd6; --hot-fg:#8a5a12;
  --up:#e4f1e6; --up-fg:#2e6b3d;
  --bar:#c5dad3;
  --code:#efebe2;
  --shadow:0 1px 2px rgba(40,36,28,.04),0 8px 22px -14px rgba(40,36,28,.18);
}
/* 다크 모드 OS 에서도 같은 밝은 테마(허브 안 iframe 끼리 색이 달라지지 않게) */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:light;--bg:#f4f2ec;--surface:#fffdf9;--fg:#2a2926;--muted:#75716a;--line:#e4dfd4;--accent:#2e6f63;--accent-soft:#e2eeea;--tag:#efebe2;--ok:#2f7a4a;--ok-soft:#e3f1e6;--warn:#8a6214;--warn-soft:#fbf2dc;--var:#3d5ba6;--var-soft:#e8edf8;--code:#efebe2}}

html{-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--fg)}
h1{font-weight:800;letter-spacing:-0.025em}
h2,h3{font-weight:700;letter-spacing:-0.015em}
b,strong{font-weight:650}
::selection{background:var(--accent-soft);color:var(--fg)}

/* 카드 */
.box,.card,.step .body > .box{border-color:var(--line);box-shadow:var(--shadow)}
.box{border-radius:14px}

/* 버튼 */
button{transition:background-color .15s,border-color .15s,box-shadow .15s,opacity .15s,transform .05s}
button:not(:disabled):active{transform:translateY(1px)}
button:not(:disabled):hover{filter:brightness(1.06)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 입력칸 */
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:#a9a49a}

/* 링크·배지·코드 */
a{color:var(--accent);text-underline-offset:2px}
details summary{color:var(--accent)}
.badge{letter-spacing:0}
code,.k{font-family:"JetBrains Mono","D2Coding",Consolas,monospace}

/* 오류·하락 표시는 포인트색(청록)이 아닌 부드러운 적갈색 */
.status.err,.neg{color:#b4412f}
.badge.down{background:#f8e4df;color:#b4412f}

/* 표 */
table th{color:var(--muted)}

/* 스크롤바 */
*{scrollbar-color:#cfc8ba transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d6cfc2;border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* 공통 상단 카테고리 바 (nav.js) */
nav.sitenav{background:rgba(255,253,249,.86);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom-color:var(--line);font-family:inherit;padding-top:8px;padding-bottom:8px}
nav.sitenav a.cat{border-radius:12px;background:var(--surface);transition:border-color .15s,background-color .15s}
nav.sitenav a.cat.on{background:var(--accent);border-color:var(--accent)}
nav.sitenav .brand{letter-spacing:-0.02em}

/* 허브(index.html) 머리글 */
body > header{box-shadow:0 1px 0 var(--line)}
#cats button{border-radius:12px}
#cats button.on{background:var(--accent);border-color:var(--accent)}

/* 토스트 */
#toast{border-radius:14px;box-shadow:0 10px 30px -10px rgba(0,0,0,.35)}