:root{
  --bg:#0f1216; --bg2:#171b21; --text:#eef1f5; --muted:#9aa4b2;
  --accent:#4f9dff; --card:#1c2129; --border:#2a303a;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f8fa; --bg2:#ffffff; --text:#1a1d23; --muted:#5b6472; --accent:#2563eb; --card:#ffffff; --border:#e4e7ec; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,Roboto,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:10;flex-wrap:wrap;gap:8px}
.brand{font-weight:800;font-size:18px}
.site-header nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.site-header nav a{font-weight:600}
.soon{color:var(--muted);font-size:13px}
main{max-width:960px;margin:0 auto;padding:28px 20px 60px}
.hero h1{font-size:28px;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
#search{width:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:16px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:14px}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:22px}
.card{display:block;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cmd{font-weight:800;font-size:17px}
.alias{font-size:12px;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 6px}
.desc{color:var(--muted);font-size:14px;margin:0 0 10px}
.tag{display:inline-block;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:2px 10px}
.empty{color:var(--muted)}
.tool-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tool-card{display:block;padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.tool-card h2{margin:0 0 8px}
.tool-card p{color:var(--muted);margin:0;font-size:14px}
.tool-card.disabled{opacity:.5;cursor:default}
.breadcrumb{color:var(--muted);font-size:13px;margin-bottom:16px}
.detail h1{font-size:26px;margin:10px 0}
.alias-lg{color:var(--muted);font-weight:500;font-size:18px}
.lead{font-size:16px;margin:14px 0}
.callout{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:14px 16px;margin:18px 0}
.related{padding-left:18px}
.site-footer{max-width:960px;margin:0 auto;padding:24px 20px 60px;color:var(--muted);font-size:13px;border-top:1px solid var(--border)}
.example-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin:18px 0}
.example-box strong{display:block;margin-bottom:6px;font-size:13px;color:var(--muted)}
.example-box pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.6}

/* Search readability and detailed instructions */
.search-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.result-count{font-size:14px;color:var(--muted);margin:18px 0 0}
.card-top{align-items:flex-start;flex-wrap:wrap;gap:8px}
.cmd{min-width:0;overflow-wrap:anywhere}
.alias{flex-shrink:0;font-size:14px;word-break:keep-all;max-width:100%}
.desc,.tool-card p{font-size:16px}
.tag,.breadcrumb,.site-footer{font-size:14px}
.card:hover,.tool-card:hover{border-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.empty{grid-column:1/-1;padding:20px 0}
.guide{margin:32px 0}.guide h2{margin-top:28px;font-size:22px}
.guide-note{color:var(--muted);font-size:14px}
.environment{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;margin:20px 0}
.environment dt{color:var(--muted)}.environment dd{margin:0}
kbd{font-family:inherit;font-weight:700;border:1px solid var(--border);border-radius:6px;padding:4px 8px;display:inline-block}
.steps{padding-left:24px}.steps li{padding:5px 0 10px 6px}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.comparison h3{font-size:16px}.document-example{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:8px;min-height:85px}
.document-example p{margin:0}.document-example hr{border:0;border-top:1px dashed var(--border);margin:24px 0}
.break-label{color:var(--accent);font-size:14px;margin:8px 0}
.source-link{text-decoration:underline;text-underline-offset:4px}
@media(max-width:520px){main{padding:24px 16px 40px}.grid,.tool-cards,.comparison{grid-template-columns:minmax(0,1fr)}.site-header nav{gap:10px;font-size:14px}.detail h1{overflow-wrap:anywhere}.environment{grid-template-columns:80px minmax(0,1fr)}}


/* Platform-aware command catalog */
.catalog-filters {display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;margin:18px 0;}
.catalog-filters label {display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;min-width:0;}
.catalog-filters select {width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font:inherit;}
.catalog-filters select:focus-visible,.load-more:focus-visible {outline:3px solid #4080ef;outline-offset:3px;}
.coverage {text-align:left;margin:16px 0;color:var(--muted);font-size:14px;line-height:1.7;}
.coverage summary {cursor:pointer;font-weight:600;color:var(--text);}
.coverage p {font-size:14px;max-width:100%;}
.card-meta {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto;}
.platform-badge,.kind-badge {font-size:12px;color:var(--muted);}
.card .cmd {overflow-wrap:anywhere;word-break:normal;}
.card .alias {white-space:normal;overflow-wrap:anywhere;}
.load-more {display:block;margin:28px auto;padding:12px 26px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;cursor:pointer;font:inherit;font-weight:600;}
.load-more[hidden] {display:none;}
.command-environment {margin:24px 0;padding:20px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;}
.command-environment h2 {margin-top:0;}
.detail h1,.breadcrumb,.environment dd,.related a {overflow-wrap:anywhere;}
.command-sources {margin:28px 0;}
@media(max-width:680px){.catalog-filters {grid-template-columns:1fr;}.command-environment {padding:14px;}}

/* Readable in both system themes; explicit foreground and background pairs. */
:root {color-scheme:dark;}
@media(prefers-color-scheme:light){:root{color-scheme:light;}}
.execution{margin:24px 0;padding:20px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;}
.execution h2{margin-top:0;}
.command-environment h2,.command-environment dd,.execution dd{color:var(--text);}
.command-environment dt,.command-environment .guide-note{color:var(--muted);}
.key-sequence{display:flex;flex-wrap:wrap;align-items:center;gap:5px;}
kbd{background:var(--bg2);color:var(--text);border-color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.key-separator{color:var(--muted);font-size:14px;}
.command-sources a{text-decoration:underline;text-underline-offset:3px;color:var(--accent);}
@media(max-width:520px){.execution{padding:14px;}}

/* Accessible, user-controlled Windows/Mac explanatory videos. */
.animation-demo{margin:24px 0 32px;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:12px;}
.animation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.animation-heading h2{margin:0;}.video-platforms{display:flex;gap:8px;margin-top:16px;}
.animation-keys{font-weight:700;overflow-wrap:anywhere;}
.animation-demo video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;background:#0d1424;}
.animation-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0;}
.animation-links a{text-decoration:underline;text-underline-offset:4px;color:var(--accent);}
.animation-transcript{margin-top:16px;color:var(--muted);}.animation-transcript summary{cursor:pointer;}
.animation-gallery{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.animation-gallery img{width:100%;height:auto;border-radius:8px;}.animation-gallery h2{font-size:20px;}
.animation-app{color:var(--accent);font-weight:700;}
@media(max-width:520px){.animation-demo{padding:12px;}.animation-gallery{grid-template-columns:minmax(0,1fr);}}

.search-os-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:20px 0 14px;}
.search-os-toggle>span{font-weight:700;margin-right:6px;}
.search-os-toggle .chip,.video-platforms .chip{border-radius:8px;min-height:44px;min-width:100px;font-size:16px;font-weight:700;}
.video-only-filter{display:flex;align-items:center;gap:10px;margin:12px 0;cursor:pointer;font-weight:600;}
.video-only-filter input{width:20px;height:20px;accent-color:var(--accent);}
.platform-select-fallback{display:none!important;}
.catalog-filters{grid-template-columns:1fr 2fr;}
.video-badge{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;border:1px solid var(--accent);border-radius:8px;padding:8px 10px;}
.video-pending{display:block;color:var(--muted);font-size:13px;margin-top:12px;}
.play-animation{display:block;margin:18px 0 10px;padding:12px 20px;background:var(--accent);color:#0d1424;font-weight:800;font-size:17px;border:0;border-radius:8px;cursor:pointer;}
.animation-demo{scroll-margin-top:100px;}.animation-pending{border-style:dashed;}
@media(prefers-color-scheme:light){.play-animation{color:white;}}
@media(max-width:680px){.catalog-filters{grid-template-columns:1fr;}}

.animation-demo video.portrait-video{aspect-ratio:9/16;max-width:430px;margin-inline:auto;height:auto;}

/* ===== DESIGN DAN 브랜드 연동 (study 서브섹션 전용 오버라이드) ===== */
:root{
  --bg:#f6f2ec; --bg2:#ffffff; --text:#18181b; --muted:#6b6b70;
  --accent:#d9772c; --card:#ffffff; --border:#e7e2d9;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif}
.brand,.cmd,h1,.tool-card h2{font-family:'Fraunces',Georgia,serif}
.chip.active{background:var(--accent);border-color:var(--accent)}
.tag{color:var(--accent);border-color:var(--accent)}
.dd-bridge{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#101012;color:#f7f5f2;font-size:13px}
.dd-bridge__logo{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:15px;color:#fff;letter-spacing:.02em}
.dd-bridge__logo:hover{color:#f2b705}
.dd-bridge__sep{color:#6b6b70}
.dd-bridge__label{color:#f2b705;font-weight:700;letter-spacing:.08em;font-size:12px}