@import url('/beginner-qa-diagrams.css');

/* Use the supplied tool language without affecting the site's type system. */
#guide-beginner .qa-drawing:lang(ko) .u{font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif}
#guide-beginner .qa-drawing:lang(ja) .u{font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif}
#guide-beginner .qa-drawing:lang(zh-Hans) .u{font-family:"Microsoft YaHei","PingFang SC",sans-serif}
#guide-beginner .qa-drawing:lang(zh-Hant) .u{font-family:"Microsoft JhengHei","PingFang TC",sans-serif}

:is(#guide-beginner,#guide-general) {
 --u-bg:#383838;--u-card:#2f3335;--u-line:#4a5154;--u-text:#e3e8ea;--u-muted:#b5bfc3;
 --u-btn:#4a4f52;--u-btn-line:#5b6265;--u-field:#2a2a2a;--u-aqua:#40e0d1;--u-blue:#298fed;--u-ok:#5cd39a;--u-err:#e0604f;
 --font-mono:ui-monospace,Consolas,monospace;
}
:is(#guide-beginner,#guide-general) .qa-intro{max-width:64ch;margin-bottom:20px}
:is(#guide-beginner,#guide-general) .qa-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
:is(#guide-beginner,#guide-general) .qa-topics a{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 13px;border:1px solid #bdd3ca;border-radius:8px;background:#fff9;color:#28564d;text-decoration:none;font-size:13px;line-height:1.5}
:is(#guide-beginner,#guide-general) .qa-topics a:hover,:is(#guide-beginner,#guide-general) .qa-topics a[aria-current]{background:#e6efea;border-color:#709d8c}
:is(#guide-beginner,#guide-general) .qa-count{font:11px var(--font-mono);color:#52796d}
:is(#guide-beginner,#guide-general) .qa-reference-note{font-size:12px;line-height:1.8;color:#5b7169;margin:0 0 28px}
:is(#guide-beginner,#guide-general) .qa-group{margin-top:28px;scroll-margin-top:calc(var(--guide-jump-height) + 12px)}
:is(#guide-beginner,#guide-general) .qa-group h3{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.6;margin:0 0 10px;color:#245b4b}
:is(#guide-beginner,#guide-general) .qa-category-number{font:11px var(--font-mono);color:#658075}
:is(#guide-beginner,#guide-general) .qa-item{padding:0;margin:0;border:0;border-bottom:1px solid #cadbd3;scroll-margin-top:calc(var(--guide-jump-height) + 12px)}
:is(#guide-beginner,#guide-general) .qa-item:first-of-type{border-top:1px solid #cadbd3}
:is(#guide-beginner,#guide-general) .qa-item>summary{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:12px;min-height:64px;padding:15px 12px;list-style:none;font-size:15px;font-weight:600;line-height:1.65;cursor:pointer;word-break:normal;overflow-wrap:anywhere}
:is(#guide-beginner,#guide-general) .qa-item>summary::-webkit-details-marker{display:none}
:is(#guide-beginner,#guide-general) .qa-item>summary:hover,:is(#guide-beginner,#guide-general) .qa-item[open]>summary{background:#eaf1ec;color:#205e4e}
:is(#guide-beginner,#guide-general) .qa-item>summary:focus-visible,:is(#guide-beginner,#guide-general) a:focus-visible{outline:2px solid #268577;outline-offset:3px;border-radius:4px}
:is(#guide-beginner,#guide-general) .qa-question-number{font:11px var(--font-mono);color:#668276;font-weight:400}
:is(#guide-beginner,#guide-general) .qa-chevron{position:relative;width:14px;height:14px}
:is(#guide-beginner,#guide-general) .qa-chevron::before,:is(#guide-beginner,#guide-general) .qa-chevron::after{content:'';position:absolute;inset:6px 1px auto;height:1px;background:currentColor}
:is(#guide-beginner,#guide-general) .qa-chevron::after{inset:1px auto 1px 6px;width:1px;height:auto}
:is(#guide-beginner,#guide-general) .qa-item[open] .qa-chevron::after{display:none}
:is(#guide-beginner,#guide-general) .qa-answer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:24px;padding:24px 12px 28px;align-items:start}
:is(#guide-beginner,#guide-general) .qa-answer-solo{display:block;max-width:74ch}
:is(#guide-beginner,#guide-general) .qa-copy{min-width:0;font-size:14px;line-height:1.95;color:#365b51}
:is(#guide-beginner,#guide-general) .qa-copy p{padding:0;margin:0 0 14px;font-size:14px;line-height:1.95}
:is(#guide-beginner,#guide-general) .qa-copy p:last-child{margin-bottom:0}
:is(#guide-beginner,#guide-general) .qa-copy ol,:is(#guide-beginner,#guide-general) .qa-copy ul{padding-left:22px;margin:0 0 14px}
:is(#guide-beginner,#guide-general) .qa-copy li{margin-bottom:8px}
:is(#guide-beginner,#guide-general) .qa-copy .tip{color:#5b7169;font-size:13px}
:is(#guide-beginner,#guide-general) .qa-copy code,:is(#guide-beginner,#guide-general) .ui-name{font:12px/1.8 var(--font-mono);color:#215f50;background:#e5eee8;border-radius:3px;padding:2px 4px;white-space:normal;overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}
:is(#guide-beginner,#guide-general) .qa-copy a,.qa-related a,:is(#guide-beginner,#guide-general) .qa-more a{font-size:13px;color:#167462;text-underline-offset:4px;line-height:1.8}
:is(#guide-beginner,#guide-general) .qa-figure{margin:0;min-width:0;display:grid;gap:9px}
:is(#guide-beginner,#guide-general) .qa-figure-label{font-size:11px;color:#567567;font-weight:600;letter-spacing:.025em}
:is(#guide-beginner,#guide-general) figcaption{font-size:11px;line-height:1.7;color:#5c726a;word-break:normal;overflow-wrap:anywhere}
:is(#guide-beginner,#guide-general) .qa-drawing{min-width:0;overflow-wrap:anywhere;text-align:left}
:is(#guide-beginner,#guide-general) .u{box-shadow:none;border-radius:8px;font-size:12px;color:#e3e8ea}
:is(#guide-beginner,#guide-general) .u *{min-width:0;word-break:normal}
:is(#guide-beginner,#guide-general) .u-banner{flex-wrap:wrap;padding:10px}
:is(#guide-beginner,#guide-general) .u-banner>div:not(.u-group){flex:1}
:is(#guide-beginner,#guide-general) .u-banner b{font-size:13px}
:is(#guide-beginner,#guide-general) .u-group{flex:1 0 100%;margin:4px 0 0;flex-wrap:wrap;overflow:visible}
:is(#guide-beginner,#guide-general) .u-group span{padding:3px 5px;white-space:normal}
:is(#guide-beginner,#guide-general) .u-tabs{grid-template-columns:repeat(3,minmax(0,1fr));font-size:10px;gap:2px}
:is(#guide-beginner,#guide-general) .u-tabs span{white-space:normal;overflow:visible;text-overflow:clip}
:is(#guide-beginner,#guide-general) .u-title{font-size:12px}
:is(#guide-beginner,#guide-general) .u-title::before{flex:none}
:is(#guide-beginner,#guide-general) .u-row{flex-wrap:wrap}
:is(#guide-beginner,#guide-general) .u-row>[style*="110px"]{flex-basis:88px!important}
:is(#guide-beginner,#guide-general) .u-list,:is(#guide-beginner,#guide-general) .u-obj{overflow-wrap:anywhere}
:is(#guide-beginner,#guide-general) .u-btn.fixed{flex:0 1 auto}
:is(#guide-beginner,#guide-general) .u-btn{line-height:1.45;font-size:11px;cursor:default}
:is(#guide-beginner,#guide-general) .u-sl{grid-template-columns:minmax(0,1.5fr) minmax(28px,1fr) 40px;font-size:11px}
:is(#guide-beginner,#guide-general) .u-num{font-size:10px}
:is(#guide-beginner,#guide-general) .qa-more{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:24px}
:is(#guide-beginner,#guide-general) .qa-more a{min-height:40px;display:flex;align-items:center}
.qa-related{padding-top:16px;margin-bottom:0}
html[lang=ko] :is(#guide-beginner,#guide-general) .qa-item>summary{word-break:keep-all;overflow-wrap:break-word}
@media(max-width:600px){
 :is(#guide-beginner,#guide-general) .qa-topics{gap:6px}
 :is(#guide-beginner,#guide-general) .qa-topics a{padding:8px 10px;gap:8px;font-size:12px}
 :is(#guide-beginner,#guide-general) .qa-item>summary{grid-template-columns:20px minmax(0,1fr) 14px;gap:8px;padding:15px 4px;font-size:14px}
 :is(#guide-beginner,#guide-general) .qa-answer{padding:18px 4px 24px;gap:20px}
 :is(#guide-beginner,#guide-general) .qa-copy p,:is(#guide-beginner,#guide-general) .qa-copy li{font-size:14px}
 :is(#guide-beginner,#guide-general) .u{padding:8px}
 :is(#guide-beginner,#guide-general) .u-card{padding:9px}
}

/* Environment guidance stays beside the answer in every language. */
#guide-general .qa-verification{border-left:3px solid #a7b7a7;background:#edf0e8;padding:14px 16px;margin:20px 0 0;border-radius:0 5px 5px 0}
#guide-general .qa-verification>strong{display:block;color:#536446;font-size:12px;margin-bottom:5px}
#guide-general .qa-verification p{color:#4f6257;font-size:13px;line-height:1.85;margin:0}
#guide-general .qa-budget{width:100%;max-width:460px;border-collapse:collapse;margin:18px 0 22px;font-size:14px}
#guide-general .qa-budget caption{text-align:left;font-size:12px;color:#60766b;padding-bottom:8px}
#guide-general .qa-budget th,#guide-general .qa-budget td{padding:10px 12px;border-bottom:1px solid #c7d7cd;text-align:left;white-space:normal}
#guide-general .qa-budget thead th{background:#e7eee8;font-size:12px;color:#4f6a5c}
#guide-general .qa-budget tbody th{font-weight:500}
#guide-general .qa-budget th:last-child,#guide-general .qa-budget td:last-child{text-align:right;white-space:nowrap}
#guide-general .qa-budget td{font-family:ui-monospace,Consolas,monospace;color:#205e4e}

#guide-general .u-pop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;align-items:center}
#guide-general .u-drop{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#494f52;border:1px solid var(--u-btn-line);padding:4px 8px;border-radius:4px}
#guide-general .u-drop::after{content:'▾';flex:none}
#guide-general .u-menu{display:grid;width:100%;max-width:260px;margin-left:auto;background:#2c3133;border:1px solid #657074;border-radius:4px;padding:4px;font-size:11px}
#guide-general .u-menu span{position:relative;padding:4px 8px 4px 22px}
#guide-general .u-menu .on{background:#29597f;border-radius:3px}
#guide-general .u-menu .on::before{content:'✓';position:absolute;left:7px}
#guide-general .u-help{display:flex;gap:8px;background:#33393b;border:1px solid var(--u-line);border-radius:6px;padding:8px;font-size:11px}
#guide-general .u-help::before{content:'i';flex:none;width:16px;height:16px;border-radius:50%;background:#6aa9e8;color:#10263c;font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px}
#guide-general .u-fold::before{content:'▸ ';color:var(--u-muted)}
#guide-general .qa-tools{margin-top:24px}
#guide-general .qa-tools h4{font-size:15px;line-height:1.6;margin:0 0 10px;color:#245b4b}
#guide-general .qa-tool{padding:20px 0;border-top:1px solid #c7d7cd;margin-top:20px}
#guide-general .qa-tool h5{font-size:14px;line-height:1.65;color:#284f45;margin:0 0 8px;overflow-wrap:anywhere}
#guide-general .qa-tool-status{display:inline-block;max-width:100%;font-size:12px;line-height:1.65;background:#e9eee8;color:#526346;border-radius:4px;padding:3px 8px;margin-bottom:8px;overflow-wrap:anywhere}
#guide-general .qa-tool .qa-tool-author{font-size:12px;color:#647b70;margin-bottom:16px}